笔者使用 github action 很久了,最近在做了一个新的 npm 发行包,就想着能够使用 github action 进行自动部署,因为这样做很方便。
以往我们在发行 npm 的新版本的时候,往往需要这么几个步骤:
- 修改 package.json 文件中的版本号
- 运行 npm run build 编译打包新版本的文件
- 运行 git tag xx.xx.xx 创建版本号对应的 git tag
- 运行 git commit -m "xxx" -a 上传新代码
- 运行 git push 推送代码到 github 上面
- 运行 git push --tag 将新的 git tag 推送到 github 上面
整个流程下来,你会发现很繁琐,尤其是你的只是在代码中做了一个微小的改动,也要执行上述的所有步骤。今天就跟给大家介绍一个方法,可以提高效率,让大家在维护 npm 包的时候,只关注代码逻辑,把这些机械化的动作,交给机器去做
使用 github action
那么就可以用到今天的主角了---- github aciton ,这是一个自动化部署工具,可以将你的工作流程打包发给 github,放在他们的服务器上运行上述流程,写完代码后,你只需要改动 package.json 文件中的版本号,然后把代码 push 到 github 上面去,就可以了,然后就可以一边喝咖啡,一边等待 github 的服务器执行你的任务---- 把新的版本发布到 npm 上面。
如何设置
- 准备秘钥 我们都知道,以往在发布 npm 包的时候,我们需要先运行 npm login 登录我们自己的账号,用来验证我们的身份,使用 github action 也要验证我们的身份,不过需要用另外一种方式。
登录 npmjs.com 后,找到个人中心菜单里面的 “Access Tokens” 菜单,然后点击右上角的 “Generate New Token” 生成 token 按钮,生成一个新token ,然后把新token复制出来,我们后面步骤要用到
- 放置秘钥
找到你的 github 项目,然后点击 Setting 选项,如图:
然后在左侧菜单中找到 Environments ,进入环境变量设置页
点击 New Environment 按钮,创建一个新的环境变量,起名为 npm ,进入后,点击Add Secret 创建一个新的秘钥
注意,这里的 name 要写 NPM_AUTH_TOKEN ,下面的 value 就写上一步我们复制出来的那个token
然后点击保存
- 设置 github action 配置文件
在我们的本地项目中,创建 .github\workflows\publish.yml 文件,内容如下:
name: Public Npm
on:
push:
branches: [ master ]
jobs:
publish:
runs-on: ubuntu-latest
name: 'publish npm'
environment: npm
steps:
- uses: actions/checkout@master
- name: Install and Build
run: |
npm install
npm run build # 这是我的项目的打包命令,你也可以改成你的
- name: 'Publish to the npm registry'
uses: primer/publish@3.0.0
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }} # 跟前面步骤中的 NPM_AUTH_TOKEN 保持一致
with:
default_branch: 'master'
保存后,提交到 github ,整个 github action 就配置完成了
如何使用 现在我们在下一次发布版本的时候,只需要在 package.json 文件中,改下版本号,然后推送到 github 上就可以了,如果帮助到你的了,可以关注我的账号,我会持续分享有用的小技巧。
完整代码请查看 我的 github