用 Changesets 为设计系统版本化
设计系统包的 semver 策略、monorepo 发布与消费者升级路径。
设计系统进阶
为什么
未版本化的设计系统迫使消费者固定 commit 或每次拉取都崩溃。Semver + changesets 给消费者可预测升级，让维护者发布修复无需跨团队协调手动发布。
根据 2024 Spark 设计系统调查，78% 拥有设计系统的组织报告产品交付更快。JavaScript is used by 62% of developers per the Stack Overflow 2024 survey，与设计令牌对齐的组件库将交接时间缩短 60%。
何时使用
发布到 npm 第一天起就版本化。即使仅内部包也受益 — 破坏性变更需协调上线时会感谢自己。
如何做
1. 安装 @changesets/cli — init 创建 .changeset/ 文件夹和配置
2. 每 PR 加 changeset — `npx changeset` 提示受影响包 + 升级类型
3. CI 检查 — `changeset status` 在 PR 改包无 changeset 时构建失败
4. 发布 — main 合并时 `changeset publish`，读取累积 changesets，升级 + 发布
5. 快照发布 — `changeset version --snapshot` 用于 PR 预览，如 [email protected]
6. 消费者升级 — 破坏性变更用 codemod，安全 minor 用范围 "^1.0.0"
示例
# .changeset/cool-cats.md
---
"@myorg/button": minor
"@myorg/tokens": patch
---
为 Button 加 `loading` 属性；令牌修复 gray-200 hex 笔误。
# package.json（消费者）
{
"dependencies": {
"@myorg/button": "^2.1.0",
"@myorg/tokens": "^2.1.0"
}
}
# .github/workflows/release.yml
on: { push: { branches: [main] } }
jobs:
release:
steps:
- uses: actions/checkout@v4
- uses: pnpm/action-setup@v3
- run: pnpm install
- run: pnpm changeset publish
env: { NPM_TOKEN: ${{ secrets.NPM_TOKEN }} }
常见问题
- ⚠破坏性变更作为 patch 发布 — 消费者自动升级后生产崩溃
- ⚠Monorepo 包独立版本化漂移 — Button v3 需 Tokens v2 但消费者有 v1
- ⚠破坏性变更无 codemod — 每个消费者手改 50 处调用
最佳实践
- ✓CI 中用 changeset status — 阻止改包无 changeset 的 PR
- ✓每个破坏性变更附 codemod — 同发布中的 jscodeshift 转换
- ✓相关包间固定 peer 依赖 — Button 声明 peer "@myorg/tokens": "^2"