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

本文主要是介绍使用 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.ymlname: Publish Package to npmjson:push:tags:- 'v*'jobs:build:runs-on: ubuntu-latestpermissions:contents: readid-token: writesteps:- uses: actions/checkout@v4- uses: actions/setup-node@v4with:node-version: '20.x'registry-url: 'https://registry.npmjs.org'- run: npm install -g npm- run: npm ci- run: npm publishenv: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 中提出。

这篇关于使用 Github Actions 自动发布包到 NPM 官网上的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---