封面信息图

在管理开源组件库(如 @tide-ui/react)的多包 Monorepo 项目中,每次发版如果依赖开发者手动去修改各个子包的 package.json 版本号、手动编写 CHANGELOG.md、并手动执行 npm publish,不仅流程极其繁琐,而且极容易发生**“漏发子依赖包、版本号不一致、或者 CHANGELOG 遗漏关键提交”**的人为失误。

现代开源前端项目的工业级发版基建是采用 Changesets(轻量多包版本管理工具)配合 GitHub Actions 自动化工作流。

通过 Changesets,开发者在提交代码时只需运行一行交互式命令声明变更类型,GitHub 机器人会在合并 PR 时全自动提升版本号、聚合生成 Markdown 变更日志、并自动发布至 npm 官方注册表。

+--------------------------------------------------------------------+
|               基于 Changesets 的 Monorepo 自动化发版全景            |
+--------------------------------------------------------------------+
| [开发者提交功能代码 (如: 新增毛笔划线组件)]                        |
|       |                                                            |
|       v (本地运行 pnpm changeset -> 交互式选择 minor / patch)      |
| [生成临时变更描述文件: .changeset/cool-leaves-bloom.md]            |
|       |                                                            |
|       v (代码合并至 main 主干分支 -> 触发 GitHub Actions)          |
| [Changesets Version Action 自动化机器人:]                          |
|   ├── 1. 自动聚合所有 changeset 生成标准的 CHANGELOG.md             |
|   ├── 2. 自动递增 @tide-ui/react 等所有受影响包的 package.json     |
|   └── 3. 自动开启一个名为 "Version Packages" 的正式发版 PR          |
|       |                                                            |
| [维护者点击 Merge PR -> 机器人自动执行 pnpm publish 推送 npm]       |
+--------------------------------------------------------------------+

1. 配置 .changeset/config.json 实现 Monorepo 联动

{
  "$schema": "https://unpkg.com/@changesets/config/schema.json",
  "changelog": "@changesets/cli/changelog",
  "commit": false,
  "fixed": [],
  "linked": [
    ["@tide-ui/react", "@tide-ui/tokens", "@tide-ui/icons"]
  ],
  "access": "public",
  "baseBranch": "main",
  "updateInternalDependencies": "patch"
}

2. GitHub Actions 自动化发版流水线

在 .github/workflows/release.yml 中配置:

name: Release Packages
on:
  push:
    branches:
      - main

concurrency: ${{ github.workflow }}-${{ github.ref }}

jobs:
  release:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
        with:
          version: 9
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: "pnpm"

      - run: pnpm install
      - run: pnpm run build
      - run: pnpm run test

      - name: Create Release Pull Request or Publish to NPM
        uses: changesets/action@v1
        with:
          publish: pnpm run release:publish
          version: pnpm run release:version
          title: "chore(release): 发布 Tide UI 新版本 🚀"
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

3. 标准化带来的工程优雅

有了这套自动化发版流水线:

  • 开发者只需要专注在代码和组件设计上。
  • 所有的版本号递增、Git Tag 打标、npm 发布与 CHANGELOG 归档全部在云端由机器人 100% 严谨执行。

把繁琐留给自动化,把自由留给创造。

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐