使用 github action 自动发布 npm 版本

2,097 阅读3分钟

笔者使用 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 上面。

如何设置

  1. 准备秘钥 我们都知道,以往在发布 npm 包的时候,我们需要先运行 npm login 登录我们自己的账号,用来验证我们的身份,使用 github action 也要验证我们的身份,不过需要用另外一种方式。

登录 npmjs.com 后,找到个人中心菜单里面的 “Access Tokens” 菜单,然后点击右上角的 “Generate New Token” 生成 token 按钮,生成一个新token ,然后把新token复制出来,我们后面步骤要用到

  1. 放置秘钥

找到你的 github 项目,然后点击 Setting 选项,如图:

image.png

然后在左侧菜单中找到 Environments ,进入环境变量设置页

image.png

点击 New Environment 按钮,创建一个新的环境变量,起名为 npm ,进入后,点击Add Secret 创建一个新的秘钥

image.png

注意,这里的 name 要写 NPM_AUTH_TOKEN ,下面的 value 就写上一步我们复制出来的那个token

然后点击保存

  1. 设置 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