使用GitHub Actions自动发布npm包

之前通过使用npm发布自己的第一个包我们已经知道如何布自己的一个 npm 包，以及通过使用rollup打包自己的npm包来使得我们的包真正在生产环境可用。

不过目前还有几个问题，就是每次发布前都需要执行打包命令，发布包时都需要登录npm账号，修改 package.json 的版本号，然后再通过npm login，虽然开启了2FA之后发布包已经足够方便，但是仍然不够最简，有没有办法可以解决上述问题呢？

答案当然是有的，那就是使用GitHub Actions来自动发布 npm 包，为了实现这个功能，我们需要做以下四个步操作：

1. 使用 github 来管理项目
2. 创建npm Access Token
3. 将 npm Token 添加到 GitHub Secrets
4. 项目开启GitHub Actions，配置workflows

使用 github 来管理项目

这里就不过多赘述，大致流程如下：

• 注册 github 账号，创建一个新的仓库
• 本地项目初始化 git, 并关联远程 github 仓库地址

这样我们就又有了一个有远程仓库托管的项目，下面就开始进行第二步

创建npm Access Token

为什么要创建 npm Access Token

就像我们在本地执行npm publish发布包到npm上需要经过2FA认证来鉴定我们的身份，那么我们在使用GitHub Actions来帮我们自动化将包发布到npm上，同样是需要经过认证鉴定身份的，也就是Git Hub需要有访问我们npm账号的权限，而这个访问权限就是通过npm Access Token来实现

创建npm Access Token步骤

登录自己的npm账号，点击头像选择Account，进入到账号信息管理页面，选择左侧的Access Tokens，这里可以看到已经又了 4 个 Tokens，这是开启2FA认证后系统给加的。

我们选择Generate New Token来生成新的token，选择下拉列表的第一个选项Granular Access Token，点击后需要执行一次 2FA 验证，然后进入到Token创建页面：

依次说需要填写的信息：

• Token name：必填项，npm toke 的唯一标识
• Description：我们的这个 npm token 是用来干嘛的
• Expiration：过期时间，这里没有永久的选项，我直接拉到了 2099 年
• Allowed IP ranges：ip 白名单，可选的，按需配置
• Packages Permissions：这里选择下拉的Read and write，表示我们创建的npm token是有访问 npm 的读写权限的。范围默认为账号下的全部包，当然也可以选择只限定某一个包的读写访问。
• Organizations Permissions：组织的权限，因为我没创建组织，所以这里就不选择。

点击底部的生成 token 按钮，就会看到我们的NPM_TOKEN就生成了：

这个 token只会展示一次，妥善保存，复制下来，进入到第三步。

将 npm Token 添加到 GitHub Secrets

首先进入项目，选择settings标签，再选择左侧的Secrets and variables菜单的Actions子菜单：

点击New repository secret，进入到Action secrets创建页面，名称用和npm token一样的，复制刚刚的npm token值到Secret内，然后点击Add secret按钮，这样我们就为仓库生成了一个Action secret，这个secret就是github访问npm的密钥。

下面进入到第四步，项目开启GitHub Actions，配置workflows

项目开启GitHub Actions，配置workflows

选择项目的Actions菜单，选择Publish Node.js Package的Configure进入到action workflow配置页面。

github 默认已经帮我们生成了一个yml文件：

这里我们需要根据我们的需求来修改workflow，具体修改点如下：

修改workflow的触发时机

因为我希望将本地代码推送到远程仓库时来执行workflow，所以增加一个触发条件

on:
  release:
    types: [created] # 仅当创建 Release 时触发
  push:
    branches:
      - main         #仅当 push 到 main 分支时触发

这里的branches也可以配置为其它你想要的分支，如master、release，我就用的默认的main分支，所以只监听main分支的push操作。

修改NODE_AUTH_TOKEN的值

github 帮我们默认创建的 workflow，NODE_AUTH_TOKEN 使用的是secrets.npm_token，这里需要改为我们自己创建的NPM_TOKEN：

env:
 NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

增加 npm 打包命令

因为我使用了rollup来打包，并且配置了npm run build命令来执行rollup -c，所以我们需要在workflow内也执行这一套命令：

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
          
      - name: npm install
        run: npm install
          
      - name: Rollup build
        run: npm run build
     
      - name: Publish to npm
        run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

自动修改版本号

因为 npm 不允许发布同版本的包。如果 package.json 中的 version 没有更新，npm publish 会失败。所以我们需要在 npm publish 之前检查版本号，并根据需要自动更新版本号。添加如下命令：

- run: npm version patch

需要注意的是，这个命令会帮我们修改package.json内version的值，产生一条提交记录，而默认情况下Actions是没有写仓库权限的，所以需要进行如下修改：

修改 Actions读写仓库权限

点击settings选择 左侧Actions目录，点击general目录，下拉找到workflow permissions配置，勾选Read and write permissions:

这样我们的workflow就有了写仓库的权限，但是因为涉及到代码的提交，所以还需要在workflow中添加 git账户的信息以告诉github是谁提交的，并且再手动做一次代码的提交操作，完整的脚本如下：

- name: Set up Git user
  run: |
    git config --global user.name "Your Name"
    git config --global user.email "youremail@example.com"
- name: Bump version (optional)
  run: npm version patch # 自动更新版本号
- name: Commit changes
  run: |
    git add .
    git commit -m "Bump version" || echo "No changes to commit"
    git push origin main

最后附上完整的workflow配置文件：

name: Node.js Package

on:
  release:
    types: [created] # 仅当创建 Release 时触发
  push:
    branches:
      - main         #仅当 push 到 main 分支时触发

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 20
          registry-url: 'https://registry.npmjs.org'
      - name: Set up Git user
        run: |
          git config --global user.name "Your Name"
          git config --global user.email "youremail@example.com"
      - name: Bump version (optional)
        run: npm version patch # 自动更新版本号
      - name: Commit changes (if needed)
        run: |
          git add .
          git commit -m "Bump version" || echo "No changes to commit"
          git push origin main
      - name: npm install
        run: npm install
      - name: Rollup build
        run: npm run build
     
      - name: Publish to npm
        run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

我们执行⌘+s保存workflow修改，然后就可以看到actions在运行了：

可以看到运行成功，然后我们再看 npm 包，版本也变成了1.0.12，这样就完成了一个使用Github Actions自动发布npm包的过程。

⚠️ 有点需要注意，因为github actions帮我们修改了版本号做了一次代码提交，所以每次本地代码提交到远程前记得先拉一下远程仓库的代码。

总结

通过使用Github Actions自动发布npm包，以后妈妈再也不用担心我们发布npm包了，每次本地修改代码后，直接提交到远程代码仓库，就可以自动化的同步完成npm的发包，真正做到了无感发包。