关于发布npm包的相关实践

如何发布一个npm包?

  1. 新建文件夹 Ru.Toolkit\Ru.Toolkit.DatePicker

  2. 在目录下执行命令npm init -y

    Wrote to D:\Ru.Toolkit\Ru.Toolkit.DatePicker\package.json:
{
  "name": "Ru.Toolkit.DatePicker",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

  3. 修改你的包信息 package.json

    {
  "name": "ru-toolkit-datepicker", // 包名 
  "version": "1.0.0a1",	// 版本
  "description": "", // 描述
  "main": "index.js", // 入口文件
  "scripts": {	
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": { // 仓库地址
    "type": "git",
    "url": "git+https://github.com/linyisonger/Ru.Toolkit.git"
  },
  "keywords": [ // 关键词
    "typescript"
  ],
  "author": "林一怂儿", // 作者
  "license": "ISC" // 协议
}

  4. 注册一个npm账号 https://www.npmjs.com/signup

  5. 账号登录

    PS D:\Ru.Toolkit\Ru.Toolkit.DatePicker> npm login
Username: linyisonger # 账号
Password:			  # 密码
Email: (this IS public) linyisonger@qq.com  # 邮箱
Logged in as linyisonger on https://registry.npmjs.org/.

  6. 发布包

    PS D:\Ru.Toolkit\Ru.Toolkit.DatePicker> npm publish
npm notice
npm notice package: ru-toolkit-datepicker@1.0.0
npm notice === Tarball Contents ===
npm notice 38B  index.js
npm notice 371B package.json
npm notice === Tarball Details ===
npm notice name:          ru-toolkit-datepicker
npm notice version:       1.0.0
npm notice package size:  407 B
npm notice unpacked size: 409 B
npm notice shasum:        e2baeec26d029bda8310a42e8e2b2ee7afdf3046
npm notice integrity:     sha512-WtkX0jshh8SbA[...]j9oSPqmq/rCdg==
npm notice total files:   2
npm notice
+ ru-toolkit-datepicker@1.0.0

  7. 退出登录 npm logout

如何加入typescript呢?

  1. 安装typescript依赖

    npm i typescript -D

  2. 初始化配置文件tsconfig.json

    npx tsc --init

  3. 目录文件结构如下

    node_modules
┕ ...
src
┕ index.ts
package-lock.json
package.json
tsconfig.json

  4. 修改配置文件tsconfig.json

    {
  "compilerOptions": {
    "target": "es5", // 指定ECMAScript目标版本
    "module": "commonjs", // 指定模块化类型
    "declaration": true, // 生成 `.d.ts` 文件
    "outDir": "./dist", // 编译后生成的文件目录
    "strict": true, // 开启严格的类型检测
  },
  "include": [
    "src/**/*"
  ],
  "exclude": []
}

  5. 更新一下包的版本

    # npm version major  主版本号
# npm version minor  次版本号
# npm version patch  修补版本号
npm version patch

  6. 编辑 index.ts

    export function add(a: number, b: number) {
    return a + b
}

  7. 编译 npx tsc

  8. 注册一个npm账号 https://www.npmjs.com/signup

  9. 账号登录

    PS D:\Ru.Toolkit\Ru.Toolkit.DatePicker> npm login
Username: linyisonger # 账号
Password:			  # 密码
Email: (this IS public) linyisonger@qq.com  # 邮箱
Logged in as linyisonger on https://registry.npmjs.org/.

  10. 发布包

    PS D:\Ru.Toolkit\Ru.Toolkit.DatePicker> npm publish
npm notice
npm notice package: ru-toolkit-datepicker@1.0.1
npm notice === Tarball Contents ===
npm notice 38B  index.js
npm notice 371B package.json
npm notice === Tarball Details ===
npm notice name:          ru-toolkit-datepicker
npm notice version:       1.0.0
npm notice package size:  407 B
npm notice unpacked size: 409 B
npm notice shasum:        e2baeec26d029bda8310a42e8e2b2ee7afdf3046
npm notice integrity:     sha512-WtkX0jshh8SbA[...]j9oSPqmq/rCdg==
npm notice total files:   2
npm notice
+ ru-toolkit-datepicker@1.0.1

  11. 退出登录 npm logout

如何发布多个npm包呢?

https://github.com/lerna/lerna/

  1. 项目初始化

    PS D:\Ru.Toolkit> npx lerna init
[##................] \ loadDep:semver: sill resolveWithNewModule @lerna/conventional-commits@4.0.0 checking installable

  2. 生成目录如下

    packages
┕ Ru.Toolkit.DatePicker
	┕ src
		┕ index.ts
	┕ .npmignore
	┕ package-lock.json
	┕ package.json
	┕ tsconfig.json
┕ Ru.Toolkit.Timeline 
	┕ src
		┕ index.ts
	┕ .npmignore
	┕ package-lock.json
	┕ package.json
	┕ tsconfig.json
lerna.json
LICENSE
package-lock.json
package.json  # 不需要安装typescript依赖
README.md
tsconfig.json

    • tsconfig.json (Ru.Toolkit/tsconfig.json)

      {
  "compilerOptions": {
    "target": "es5", // 指定ECMAScript目标版本
    "module": "commonjs", // 指定模块化类型
    "declaration": true, // 生成 `.d.ts` 文件 
    "strict": true, // 开启严格的类型检测 
  }
}

      • tsconfig.json (Ru.Toolkit/packages/Ru.Toolkit.DatePicker/tsconfig.json)

        {
  "extends": "../../tsconfig.json", // 继承
  "compilerOptions": {
    "outDir": "./dist", // 编译后生成的文件目录  
  },
  "include": [
    "src/**/*"
  ],
  "exclude": []
}

      • tsconfig.json (Ru.Toolkit/packages/Ru.Toolkit.Timeline/tsconfig.json)

        {
  "extends": "../../tsconfig.json", // 继承
  "compilerOptions": {
    "outDir": "./dist", // 编译后生成的文件目录  
  },
  "include": [
    "src/**/*"
  ],
  "exclude": []
}

    • package.json (Ru.Toolkit/package.json)

      {
  "name": "root",
  "private": true,
  "devDependencies": {
    "lerna": "^4.0.0"
  },
  "dependencies": {}
}

      • package.json (Ru.Toolkit/packages/Ru.Toolkit.DatePicker/package.json)

        {
  "name": "ru-toolkit-datepicker",
  "version": "1.0.2",
  "description": "",
  "main": "index.js",
  "scripts": {
    "init": "npm i",
    "test": "echo \"Error: no test specified\"",
    "build": "npx tsc"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/linyisonger/Ru.Toolkit.git"
  },
  "keywords": [
    "typescript"
  ],
  "author": "林一怂儿",
  "license": "MIT",
  "dependencies": {
    "typescript": "^4.3.2"
  },
  "gitHead": "ad3420a661b48ad972554bd298c51ce06a6e1dff"
}

      • package.json (Ru.Toolkit/packages/Ru.Toolkit.Timeline/package.json)

        {
  "name": "ru-toolkit-timeline",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "init": "npm i",
    "test": "echo \"Error: no test specified\"",
    "build": "npx tsc"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/linyisonger/Ru.Toolkit.git"
  },
  "keywords": [
    "typescript"
  ],
  "author": "林一怂儿",
  "license": "MIT",
  "dependencies": {
    "typescript": "^4.3.2"
  },
  "gitHead": "ad3420a661b48ad972554bd298c51ce06a6e1dff"
}

  3. 编译所有子包

    # build package.json scripts 中配置
npx lerna run build

  4. 注册一个npm账号 https://www.npmjs.com/signup

  5. 账号登录

    PS D:\Ru.Toolkit\Ru.Toolkit.DatePicker> npm login
Username: linyisonger # 账号
Password:			  # 密码
Email: (this IS public) linyisonger@qq.com  # 邮箱
Logged in as linyisonger on https://registry.npmjs.org/.

  6. 发布包

    PS D:\Ru.Toolkit> npx lerna publish from-package --yes
lerna notice cli v4.0.0
lerna info versioning independent
lerna WARN Unable to determine published version, assuming "ru-toolkit-timeline" unpublished.

Found 2 packages to publish:
 - ru-toolkit-datepicker => 1.0.2
 - ru-toolkit-timeline => 1.0.0

lerna info auto-confirmed
lerna info publish Publishing packages to npm...
lerna info Verifying npm credentials
lerna http fetch GET 200 https://registry.npmjs.org/-/npm/v1/user 312ms
lerna http fetch GET 200 https://registry.npmjs.org/-/org/linyisonger/package?format=cli 277ms
lerna info Checking two-factor auth mode
lerna http fetch GET 200 https://registry.npmjs.org/-/npm/v1/user 302ms
lerna http fetch PUT 200 https://registry.npmjs.org/ru-toolkit-datepicker 2775ms
lerna success published ru-toolkit-datepicker 1.0.2
lerna notice
lerna notice package: ru-toolkit-datepicker@1.0.2
lerna notice === Tarball Contents ===
lerna notice 1.1kB LICENSE
lerna notice 505B  package.json
lerna notice 187B  tsconfig.json
lerna notice === Tarball Details ===
lerna notice name:          ru-toolkit-datepicker
lerna notice version:       1.0.2
lerna notice filename:      ru-toolkit-datepicker-1.0.2.tgz
lerna notice package size:  1.3 kB
lerna notice unpacked size: 1.8 kB
lerna notice shasum:        6394ec52d797a4fe8188ddf1d04e5ae43caafd18
lerna notice integrity:     sha512-wsdj+2BvvThPG[...]LOq5jXXVcmS0w==
lerna notice total files:   3
lerna notice
lerna http fetch PUT 200 https://registry.npmjs.org/ru-toolkit-timeline 3458ms
lerna success published ru-toolkit-timeline 1.0.0
lerna notice
lerna notice package: ru-toolkit-timeline@1.0.0
lerna notice === Tarball Contents ===
lerna notice 1.1kB LICENSE
lerna notice 503B  package.json
lerna notice 188B  tsconfig.json
lerna notice === Tarball Details ===
lerna notice name:          ru-toolkit-timeline
lerna notice version:       1.0.0
lerna notice filename:      ru-toolkit-timeline-1.0.0.tgz
lerna notice package size:  1.3 kB
lerna notice unpacked size: 1.8 kB
lerna notice shasum:        96e640bdf6e07a9831c7f0ac194e2e13739203ac
lerna notice integrity:     sha512-1wlWsLVPTCrj2[...]auI0lItwEROHw==
lerna notice total files:   3
lerna notice
lerna notice FYI Unable to reset working tree changes, this probably isn't a git repo.
Successfully published:
 - ru-toolkit-datepicker@1.0.2
 - ru-toolkit-timeline@1.0.0
lerna success published 2 packages

  7. 退出登录 npm logout

如何使用GitHub Actions自动构建多个npm包？

  1. 登录账户 https://www.npmjs.com/

  2. 新增CI/CD Access Token

  3. 添加secret

  4. GitHub 新建Actions脚本 .github/workflows/publish-npm.yml

    name: npm packages publish

# Controls when the action will run. 
on:
  # Triggers the workflow on push or pull request events but only for the main branch
  push:
    branches: [ main ]
  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:  

jobs:
  publish-npm:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 10
          registry-url: https://registry.npmjs.org 
      - run: |
          npm i  # 安装主包依赖
          npx lerna run init  # 安装子包依赖
          npx lerna run test  # 运行子包测试
          npx lerna run build # 运行子包构建
          npx lerna publish from-package --yes # 运行包发布
        env:
          NODE_AUTH_TOKEN: ${{secrets.NpmToken}}  # NpmToken上一步步骤的Name

  5. 提交就行~

参考

https://www.jianshu.com/p/8fa2c50720e4

https://blog.csdn.net/weixin_43631580/article/details/108497984

https://blog.csdn.net/mouday/article/details/105329347

posted @ 2021-05-30 13:37  林一怂儿  阅读(113)  评论(0)  编辑  收藏  举报