Mengimplementasikan Manajemen Versi Changeset dengan Claude Code

Mewujudkan Manajemen Versi Sistematis dengan Changeset

Changeset adalah tool untuk mengotomatisasi manajemen versi package dan pembuatan CHANGELOG. Sangat powerful terutama di lingkungan monorepo, memungkinkan pembangunan alur rilis yang konsisten dengan mempertimbangkan dependensi antar package. Claude Code mendukung secara akurat dari setup hingga integrasi CI.

Setup Awal

Minta Claude Code untuk setup.

> Perkenalkan Changeset ke project monorepo.
> Sertakan rilis otomatis dengan GitHub Actions dan pembuatan CHANGELOG.

# Install
npm install -D @changesets/cli @changesets/changelog-github

# Inisialisasi
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
  }
}

Membuat Changeset

Cara membuat file Changeset yang mendeskripsikan perubahan.

# Buat Changeset secara interaktif
npx changeset

<!-- .changeset/happy-dogs-fly.md -->
---
"@myapp/ui": minor
"@myapp/utils": patch
---

Menambahkan varian "outline" ke component button.
Meningkatkan definisi tipe fungsi utility.

Contoh prompt untuk meminta Claude Code membuat Changeset:

> Buat Changeset untuk perubahan kali ini.
> Perubahan versi minor di @myapp/ui, tulis juga deskripsinya.

Konfigurasi npm scripts

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

Rilis Otomatis dengan GitHub Actions

Workflow yang otomatis membuat PR version up saat PR di-merge, dan mempublikasikan ke npm setelah merge.

# .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: version up"
          commit: "chore: version up"
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

Pengaturan Lanjutan untuk Monorepo

Pola pengaturan untuk mengelola koordinasi antar package.

// .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 - Grup package yang selalu memiliki versi yang sama
• linked - Grup package yang versinya naik secara terkait

Manajemen Pre-release

Alur rilis versi beta dan RC.

# Masuk mode pre-release
npx changeset pre enter beta

# Tambahkan Changeset
npx changeset

# Terapkan versi pre-release
npx changeset version
# => 1.0.0 -> 1.1.0-beta.0

# Publikasikan
npx changeset publish

# Keluar mode pre-release
npx changeset pre exit

Validasi Changeset

Workflow untuk memeriksa di CI apakah Changeset disertakan dalam PR.

# .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

Format CHANGELOG Kustom

Pola untuk menyesuaikan output 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;

Summary

Changeset adalah tool yang kuat untuk mengotomatisasi manajemen versi sistematis dan alur rilis. Dengan memanfaatkan Claude Code, dari setup awal hingga integrasi CI dan dukungan monorepo bisa dibangun secara efisien.

Untuk metode manajemen monorepo, lihat Panduan Manajemen Monorepo, dan untuk desain pipeline CI/CD, lihat Panduan Setup CI/CD. Periksa juga Dokumentasi Resmi Changesets.