目标

制作一个 npm 包，并发布到 npm 上。

项目说明

pinia-plugin-persistence-mp 是一个为 uni-app、taro 提供本地化存储的 pinia 插件。

项目依赖

  • bumpp: 版本号生成，默认会执行git commit, git tag, git push操作。
  • unbuild: 统一的JavaScript构建系统，支持打包TypeScript生成mjs、cjs以及类型声明文件。
  • pinia: Vue状态管理器。
  • TypeScript
  • rimraf: rm -rf的nodejs工具类。

开发步骤

  1. 创建npm账号；
  2. 创建项目：
    1. 初始化 nodejs 项目 mkdir pinia-plugin-persistence-mp && pnpm init；
    2. 安装依赖: pnpm add -D bumpp pinia rimraf typescript unbuild @antfu/eslint-config；
    3. 更新 package.json 配置 unbuild （unbuild 默认从 src/ 目录下查找文件）：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    {
        "type": "module",
        "exports": {
            ".": {
            "import": "./dist/index.mjs",
            "require": "./dist/index.cjs"
            }
        },
        "main": "./dist/index.cjs",
        "types": "./dist/index.d.ts",
        "files": [
            "dist"
        ]
    }
    1. 设置 TypeScript 配置文件 tsconfig.json：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    {
        "compilerOptions": {
            "target": "ESNext",
            "module": "ESNext",
            "moduleResolution": "Node",
            "esModuleInterop": true,
            "strict": true
        },
        "include": [
            "src"
        ]
    }
    1. 代码格式化检查配置：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    // package.json
    ...
    "scripts": {
        //...
        "lint": "eslint .",
        "lint:fix": "eslint . --fix"
        //...
    }
    ...
    1
    2
    3
    4
    // .eslintrc
    {
        "extends": "@antfu"
    }
    1. bumpp 命令配置（package.json），执行命令时会提示选择版本号：
    1
    2
    3
    4
    5
    // ...
    "scripts": {
        "release": "bumpp package.json",
    }
    // ...
    1. 打包构建命令（package.json）：
    1
    2
    3
    4
    5
    // ...
    "scripts": {
        "build": "rimraf dist && pnpm unbuild",
    }
    // ...
  3. 项目代码：github
  4. 本地登录npm，根据提示输入信息:
1
2
3
npm login
# 如果切换了淘宝等镜像源，则需要指定npm的默认注册表
npm login --registry=https://registry.npmjs.org
  1. 发布npm包:
1
2
3
pnpm publish .
# 如果切换了淘宝等镜像源，则需要指定npm的默认注册表
pnpm publish . --registry https://registry.npmjs.org
许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

分享文章