Advanced

实现Changeset Version Management:Claude Code 实战指南

学习如何implement Changeset-based version management and automatic CHANGELOG generation:Claude Code 实战. Covers monorepo support, CI integration, and release flow design.

Changesetで体系的なバージョン管理を実現する

Changesetは、包のバージョン管理とCHANGELOG生成を自动化するツールです。尤其モノレポ環境で威力を発揮し、包間の依存関係を考慮した一貫性のある发布フローを构建可以。Claude Code 配置からCI联动まで的確にサポートします。

初期セットアップ

让 Claude Codeセットアップを依頼吧。

> Changesetをモノレポ项目に引入して。
> GitHub Actionsでの自動发布、CHANGELOG生成を含めて。
# インストール
npm install -D @changesets/cli @changesets/changelog-github

# 初期化
npx changeset init
// .changeset/config.json
{
  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
  "changelog": [
    "@changesets/changelog-github",
    { "repo": "your-org/your-repo" }
  ],
  "commit": false,
  "fixed": [],
  "linked": [],
  "access": "public",
  "baseBranch": "main",
  "updateInternalDependencies": "patch",
  "ignore": [],
  "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
    "onlyUpdatePeerDependentsWhenOutOfRange": true
  }
}

Changesetの创建

更改内容を記述するChangeset文件の创建方法です。

# インタラクティブにChangesetを作成
npx changeset
<!-- .changeset/happy-dogs-fly.md -->
---
"@myapp/ui": minor
"@myapp/utils": patch
---

ボタンコンポーネントにバリアント「outline」を追加しました。
ユーティリティ関数の型定義を改善しました。

让 Claude CodeChangeset创建を依頼するプロンプト例です。

> 今回の更改に対するChangeset创建。
> @myapp/uiにminorバージョンの更改、説明文も書いて。

npm scriptsの配置

// package.json
{
  "scripts": {
    "changeset": "changeset",
    "changeset:status": "changeset status",
    "version": "changeset version",
    "release": "changeset publish",
    "prerelease": "npm run build"
  }
}

GitHub Actionsでの自動发布

PRマージ時に自動でバージョンアップPRを创建し、マージ後にnpmへ公開する工作流です。

# .github/workflows/release.yml
name: Release

on:
  push:
    branches: [main]

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

permissions:
  contents: write
  pull-requests: write
  packages: write

jobs:
  release:
    name: Release
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          registry-url: "https://registry.npmjs.org"

      - run: npm ci
      - run: npm run build

      - name: Create Release Pull Request or Publish
        id: changesets
        uses: changesets/action@v1
        with:
          version: npm run version
          publish: npm run release
          title: "chore: バージョンアップ"
          commit: "chore: バージョンアップ"
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

モノレポでの高度な配置

包間の联动を管理する配置パターンです。

// .changeset/config.json
{
  "changelog": [
    "@changesets/changelog-github",
    { "repo": "your-org/your-repo" }
  ],
  "commit": false,
  "fixed": [
    ["@myapp/core", "@myapp/cli"]
  ],
  "linked": [
    ["@myapp/ui", "@myapp/theme"]
  ],
  "access": "public",
  "baseBranch": "main",
  "updateInternalDependencies": "patch"
}
  • fixed - 常に同じバージョンになる包グループ
  • linked - バージョンが連動して上がる包グループ

プレ发布の管理

ベータ版やRC版の发布フローです。

# プレリリースモードに入る
npx changeset pre enter beta

# Changesetを追加
npx changeset

# プレリリースバージョンを適用
npx changeset version
# => 1.0.0 -> 1.1.0-beta.0

# 公開
npx changeset publish

# プレリリースモードを終了
npx changeset pre exit

Changesetの验证

PRにChangesetが含まれているかをCIでチェックする工作流です。

# .github/workflows/changeset-check.yml
name: Changeset Check

on:
  pull_request:
    branches: [main]

jobs:
  changeset-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - name: Check for changeset
        run: npx changeset status --since=origin/main

カスタムCHANGELOGフォーマット

CHANGELOG の输出を自定义するパターンです。

// .changeset/changelog-config.ts
import type { ChangelogFunctions } from "@changesets/types";

const changelogFunctions: ChangelogFunctions = {
  getDependencyReleaseLine: async () => "",
  getReleaseLine: async (changeset, type) => {
    const [firstLine, ...rest] = changeset.summary
      .split("\n")
      .map((l) => l.trimEnd());

    const date = new Date().toISOString().slice(0, 10);

    let returnVal = `- ${firstLine}`;

    if (rest.length > 0) {
      returnVal += `\n${rest.map((l) => `  ${l}`).join("\n")}`;
    }

    return returnVal;
  },
};

export default changelogFunctions;

总结

Changesetは体系的なバージョン管理と发布フローを自动化するための強力なツールです。Claude Codeを活用すれば、初期配置からCI联动、モノレポ支持まで高效地构建是可能的。

モノレポの管理手法はモノレポ管理指南を、CI/CD流水线の设计はCI/CDセットアップ指南Changesets官方文档也建议确认一下。

#Claude Code #Changeset #version management #monorepo #release