使用 Github Actions 自动发布包到 NPM 官网上

• 当我们在开发一个依赖时，我们需要发布到 npm 官网上，这样其他人才能使用我们的包。
• 但是每次都要手动执行 npm publish 命令，或者二次校验才能发布，这样就会很麻烦。

方式

• 自己写一个 node 脚本，然后在本地执行，这样就可以自动发布了。
• 利用 Github Actions 再开源项目上配置自动发布，例如触发条件是 git 创建 tag 就执行发布。这里介绍的是第二种方式。

配置

在 npm 官网上生成自动化授权 token

• 打开 npm 官网，登录自己的账号。
• 点击头像，选择 Access Tokens 选项。
• 点击 Generate New Token 按钮，选择 Classic Token 选项。
• 输入名称，不限制，例如：NPM_TOKEN；单选选择 Automation 选项。
• 点击 Generate Token 按钮生成 token，复制保存生成的 token，防止丢失，不要泄漏出去。

在 Github 项目上配置 Secrets

• 如果没有注册，则先注册并创建一个项目。
• 打开 Github 项目，点击 Settings 选项。
• 新创建的项目，默认是开启 Actions 功能的，如果没有开启，需要手动在 Settings 里的 Actions > General 选项开启。
• 点击 Secrets and variables 下的 Actions 选项，点击 New repository secret 按钮。
• name：输入 NPM_TOKEN，value：输入刚才生成的 token，点击 Add secret 按钮保存。

创建 .github 工作流代码

• 在项目根目录下创建 .github/workflows 目录。
• 在 .github/workflows 目录下创建 publish.yml 文件。
• publish.yml 文件内容如下：

# .github/workflows/publish.yml

name: Publish Package to npmjs

on:
  push:
    tags:
      - 'v*'

jobs:
  build:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      id-token: write
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20.x'
          registry-url: 'https://registry.npmjs.org'
      - run: npm install -g npm
      - run: npm ci
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

• name：任务名称。
• on：触发条件，这里是 git 创建 tag 时触发。
• jobs：任务列表。
• build：任务名称。
• runs-on：运行环境。
• permissions：权限设置。
• steps：步骤列表。
  • uses：使用的 action。
  • with：参数设置。
  • run：执行命令。
  • env：环境变量设置。这里的 NPM_TOKEN 就是上面配置的 Secrets 的 name。

创建 package.json 文件

• 在项目根目录下创建 package.json 文件。
• 执行一下命令

npm init -y

• 配置 Provenance 选项
• 也可以使用其它方式配置，更多配置请参考官方文档

{
  "publishConfig": {
    "registry": "https://registry.npmjs.org/",
    "provenance": true
  }
}

• 完整代码参考

{
  "name": "mine-npm-demo",
  "version": "1.0.0",
  "description": "This is a sample demo about npm",
  "main": "index.js",
  "private": false,
  "scripts": {},
  "keywords": ["npm", "demo"],
  "engines": {
    "node": ">=20"
  },
  "type": "module",
  "author": {
    "name": "biaov",
    "email": "biaov@qq.com"
  },
  "license": "ISC",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/biaov/mine-npm-demo.git"
  },
  "homepage": "https://github.com/biaov/mine-npm-demo",
  "bugs": {
    "url": "https://github.com/biaov/mine-npm-demo/issues"
  },
  "publishConfig": {
    "registry": "https://registry.npmjs.org/",
    "provenance": true
  },
  "contributors": [
    {
      "name": "biaov",
      "email": "biaov@qq.com"
    }
  ]
}

• 执行以下命令自动创建 package-lock.json 文件，以便于后面执行 npm ci 命令。

npm i

提交代码

• 在本地执行 git add . 和 git commit -m 'feat: add publish.yml' 命令。
• 执行 git push 命令提交代码到远程仓库。

创建 tag

• 在本地执行 git tag v1.0.0 命令创建 tag。
• 执行 git push origin v1.0.0 命令推送 tag 到远程仓库。

查看结果

• 在 Github Actions 里面查看运行结果。例如：mine-npm-demo actions
• 在 npm 官网 里面查看包是否发布成功。例如：mine-npm-demo npm
• 如果出现 Provenance 选项，则表示发布成功。

资源

• 演示项目：mine-npm-demo
• 其它案例：
  • mine-h5-ui
  • create-mine

总结

• 这样的话一个使用 Github Actions 自动发布包到 NPM 官网上的配置完成。
• 如果其中遇到什么问题，可以在 Issues 中提出。