2023年，还在手动发布 npm 包？

还在手动 npm publish 发布 npm ？ 还在手动更新版本创建发布 Github Release ？还在手动添加 Changelog？是时候利用 CI/CD 解放双手啦。常见的 CI/CD 有很多，比如 Jenkins、GitLab CI、CircleCI 、Github Actions 等。本文主要是通过 Github Actions 来自动化处理 npm 包管理。

Github Actions ​

GitHub Actions 距离推出已经好几年了，相信小伙伴们没用过，也听说过。GitHub Actions 不仅仅是能自动执行生成、测试和部署操作，还允许您在存储库中发生其他事件时运行工作流程。 例如，您可以运行工作流程，以便在有人在您的存储库中创建新问题时自动添加相应的标签。而且 GitHub 提供 Linux、Windows 和 macOS 多种虚拟机来运行工作流程，可以更具项目选择合适的虚拟机环境。

GitHub Actions 其实主要步骤只有两个，event (事件触发时机)、jobs（工作流程）。如果还不熟悉 GitHub Actions，可以参考文档对其大致使用有个了解。

发布 Npm ​

在本地发布 npm 包都是本地打包成组件后，登录 npm 账号运行 npm publish 发布。使用 GitHub Actions 来发布 npm 可以使用 Npm Access Tokens，可以更据需要分配 Tokens 权限，不需要使用账号密码登录。

Github Actions 发布 Npm ​

首先需要确定你工作流触发时机，这个需要根据你个人习惯决定。

举例：

on:
  push:
    tags:
      - "v*"

on:
  push:
    branches: [master]

# 仅在 master 推送时，且 docs 下文件修改时触发，更多可以[参考文档](https://docs.github.com/zh/actions/using-workflows/events-that-trigger-workflows)
on:
  push:
    branches: [master]
    paths:
      - 'docs/**'

本文就以为推送 Tag 触发为例：

在你项目下添加 .github\workflows\publish.yml 文件，内容如下

name: NPM Publish
on:
  push:
    tags:
      - "v*"

代码拉取和Node配置 ​

在 jobs 添加一个名为 build 的 job，配置 build 的环境和拉取代码。runs-on: ubuntu-latest 配置虚拟机为 ubuntu，使用官方提取代码拉取和 配置 Node 的 Actions，更多 官方提供 Actions

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2   # 拉取代码
      - uses: actions/setup-node@v3 # 设置 Node 版本
        with:
          node-version: 16
          registry-url: 'https://registry.npmjs.org'
          cache: yarn

配置环境密钥 ​

添加环境变量，在你项目 => Settings => Secrets and variables => Actions 中 添加你的密钥，名称随意取，密钥值为你上面生成的 Npm Access Tokens。

例如： Name => NPM_TOKEN Secret => 你的 Npm Access Tokens

发布 Npm ​

build 的 job 中，添加发布 Npm 操作，利用 NPM_TOKEN 发布 npm 包

    steps:
      - name: Npm Publish
        run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

到此时，当你推送一个以 v开头 tag 到仓库时，就会执行这个 publish.yml，这个 Action 会将当前仓库发布到 Npm 了。

当然你的包可能还需要执行一些构建操作等等，你可以在 run 里执行多条命令

run: |
    npm run build
    #...更多操作
    npm publish

区分 Beta 和 latest ​

默认情况下 npm publish 发布时正式包，如果需要测试包需要执行 npm publish --tag beta。利用 git tag 我们可以将 v1.0.2 格式发为正式包，将 v1.0.2-beta.1 格式发布测试包。

修改 publish 流程，Github Action 支持 if 操作，并不支持 else，只能通过如下模拟 if else 操作。

    steps:
      - name: Beta Publish
        if: ${{ contains(github.ref,'beta') }}
        run: npm publish --tag beta
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

      - name: Publish
        if: ${{ !contains(github.ref,'beta') }}
        run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

根据 Tag 更新版本号 ​

为例避免每次修改 package.json 中版本，我们可以根据 tag 来修改 package.json 中版本，因为上面配置 node 环境，可以直接执行 node 代码，我们直接添加一个 publish.js 文件，去修改 package.json 中 version 。

const fs = require('fs')
const path = require('path')

if (process.env.RELEASE_VERSION) {
    const version = process.env.RELEASE_VERSION.split('/').reverse()[0]
    console.log('当前版本：', version);
    const pkg = require('./package.json')
    pkg.version = version.replace('v', '')
    fs.writeFileSync(path.resolve(__dirname, './package.json'), JSON.stringify(pkg, null, 4), 'utf-8')
}

修改 publish 流程，在发布前修改版本，并将 github.ref 添加环境变量 RELEASE_VERSION

    steps:
      - name: Build
        run: node ./publish
        env:
          RELEASE_VERSION: ${{ github.ref }}

创建发布 Github Release ​

官方 actions/create-release 不在维护，推荐如下 Actions，可以结合需要选择，你也可以去前往 marketplace 选择更多 Actions。

• elgohr/Github-Release-Action
• marvinpinto/action-automatic-releases
• softprops/action-gh-release
• ncipollo/release-action

很多创建 Release 的 Actions，并不会将你的提交自动生成发版说明，所以我编写了一个发布 Release 的 Actions，具体实现参考 MaLuns/add-release 以满足我的需求。Github 为我们提供 actions/toolkit 帮助我们简化了很多操作。

简单描述如何实现：

编写完自定义 Actions 后，使用自定义 Actions。

    steps:
      - name: Release
        uses: MaLuns/add-release@指定版本
        with:
          files: Demo.zip
          generate_by_commit: true

效果图：

到此，一个根据 Git tag 自动发布 Npm 和 Release 的工作流编写完成了。你还可以在结合 Github Pages、Vercel 等同时自动化部署你的 Npm 包的文档和示例站点等。