本文主要是介绍使用 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 官网上的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
