使用semantic-release搞定NPM和Github自动化部署

发布一个NPM包是众多开发人员摆脱调包侠称呼的第一步，npm publish完事，完善整个维护链条也是一个包走向稳定不可或缺的一步。

下面我们利用一个比较成熟的工具 semantic-release 来解决我们发包的最后一公里。

先来看看他能做什么：

• 获取 commit 信息生成 CHANGELOG
• 修改 package.json 版本号
• 发布版本到 NPM
• Git 打 TAG
• Git 生成一个 Release
• 提交上面的修改到 Git

首先，为了让他能够读懂 commit 信息，我们需要把提交的信息规范化，请看这篇文章 Git Commit 规范化。

下面的操作基于 commit 规范化的前提：

1. 安装相关依赖

# semantic-release
npm i -D semantic-release 

# 相关的组件
npm i -D @semantic-release/changelog @semantic-release/git @semantic-release/github @semantic-release/npm @semantic-release/release-notes-generator

2. 编写 Release 配置

根目录 .releaserc.js:

module.exports = {
  branches: ['main'], // 指定在哪个分支下要执行发布操作
  plugins: [
    '@semantic-release/commit-analyzer', // 解析 commit 信息，默认就是 Angular 规范
    '@semantic-release/release-notes-generator',
    [
      '@semantic-release/changelog',
      {
        changelogFile: 'CHANGELOG.md' // 把发布日志写入该文件
      }
    ],
    '@semantic-release/npm',  // 发布到NPM
    '@semantic-release/github',
    [
      '@semantic-release/git',
      {
        assets: ['CHANGELOG.md', 'package.json'] // 前面说到日志记录和版本好是新增修改的，需要 push 回 Git 
      }
    ]
  ]
}

3. 配置持续集成

这里用 Git Action 来说明，之前用 Travis CI，现在收费了作罢。

根目录 .github/workflows/blank.yml

# 工作流名称
name: Build and Deploy

on:
  # 指明要运行的分支，跟上面配置保持一致
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      # 把分支拉出来
      - name: Checkout
        uses: actions/checkout@v2
        with:
          persist-credentials: false

      # 指定node版本
      - name: Set node version
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      # 安装依赖，包括我们的 semantic-release 全套
      - name: Install
        run: |
          npm install
      
      # 打包你的插件/组件/库等等等
      - name: Build
        run: |
          npm run build

      # 执行 semantic-release 发布包
      - name: Release
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
        run: npx semantic-release

环境变量配置

我们知道 token 和密码等私密信息是不能放在 git 文件里面的，这里我们把它抽离出来。

先获取 NPM 发布 和 Git 提交的所需要的 token：

• NPM_TOKEN 获取方式：登录NPM -> 头像 -> Account -> Access Tokens -> Generate New Token ，类型选择 publish 才有相应的权限，完成后复制 token。
• GITHUB_TOKEN 获取方式：登录Github -> 头像 -> Settings -> Developer settings -> Personal access tokens -> Generate New Token，勾上下图所示三个权限，完成后复制 token。

接着我们把这两 token 放到 secrets：

找到你的项目 -> Settings -> secrets -> Actions -> New repository secret，分别把两个写进去，name就是 GITHUB_TOKEN 和 NPM_TOKEN， value 就是刚获取的 token。

4. 运行一下

semantic-release 只认 fix feat 等关键 commit 才会执行发布操作。

当我们 commit 一个 fix 内容并 push 时，Git Action 就会执行，效果如下：