はじめに
モノレポでパッケージを管理していると、バージョン管理が本当に面倒なんですよね。
「このパッケージを更新したら、依存しているあっちのパッケージも上げないと...」「CHANGELOGも書かなきゃ...」みたいな作業が積み重なって、正直なところリリース作業が億劫になってきます。
そんな悩みを解決してくれるのがChangesetsというツールです。GitHub Stars 11.1k超え、Astro、Chakra UI、Remix、SvelteKitなど名だたるプロジェクトで採用されている実績があります。
個人的には、モノレポでnpmパッケージを管理するなら、Changesets一択ですね。
Changesetsとは
Changesetsは、モノレポ向けのバージョン管理・CHANGELOG自動生成ツールです。
「changeset」というのは、「どのパッケージを、どのバージョン（major/minor/patch）で、どんな変更内容でリリースするか」という意図を宣言したファイルのことを指します。
開発者がPRを出すときにchangesetファイルを一緒に作成しておけば、あとはコマンド一発でバージョン更新とCHANGELOG生成をやってくれるという仕組みです。
特徴・メリット
1. 依存関係の自動追従
これ、意外と重要なんですよ。
モノレポでpackage-aがpackage-bに依存しているとき、package-bを更新したらpackage-aも更新が必要になります。Changesetsはこの依存関係を自動で追跡して、必要なパッケージのバージョンも一緒に上げてくれます。
手動でやっていた頃は「あ、これも上げなきゃ」という見落としが頻発していたので、この自動化はQOL上がりました。
2. セマンティックバージョニング対応
major/minor/patchの選択を対話形式で聞いてくれます。破壊的変更なのか、機能追加なのか、バグ修正なのかを意識しながらリリースできるので、バージョン番号に一貫性が出ます。
3. CHANGELOG自動生成
changeset作成時に書いた変更内容が、そのままCHANGELOGに反映されます。後から「このバージョンで何が変わったんだっけ？」と調べる手間が省けます。
4. CI/CD統合が簡単
GitHub Actionsとの連携や、Changeset Botによるチェックなど、CIに組み込む仕組みが用意されています。PRにchangesetが含まれていないと警告を出すようなワークフローも簡単に作れます。
インストール方法
npmまたはyarnでインストールします。
# npm
npm install --save-dev @changesets/cli
# yarn
yarn add --dev @changesets/cli
# pnpm
pnpm add -D @changesets/cli
インストール後、初期化コマンドを実行します。
npx changeset init
これで.changesetフォルダが作成されます。中にはconfig.jsonとREADMEが入っています。
npmに公開するパッケージの場合は、config.jsonのaccessをpublicに変更しておきましょう。
{
"$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
"changelog": "@changesets/cli/changelog",
"commit": false,
"fixed": [],
"linked": [],
"access": "public",
"baseBranch": "main",
"updateInternalDependencies": "patch",
"ignore": []
}
基本的な使い方
1. changesetの作成
変更を加えたら、以下のコマンドでchangesetを作成します。
npx changeset
対話形式で以下を聞かれます。
- どのパッケージを更新するか
- major/minor/patchのどれか
- 変更内容の説明
実行すると.changesetフォルダ内にランダムな名前のマークダウンファイルが生成されます。
---
"@myorg/package-a": minor
"@myorg/package-b": patch
---
ユーザー認証機能を追加しました
このファイルをPRに含めてコミットします。
2. バージョン更新
リリースのタイミングで、以下のコマンドを実行します。
npx changeset version
これで以下が自動的に行われます。
- 各パッケージの
package.jsonのバージョン更新 CHANGELOG.mdの更新- 依存パッケージのバージョン更新
.changeset内のchangesetファイルの削除
3. 公開
バージョン更新後、npmに公開します。
npx changeset publish
2要素認証を使っている場合は、OTPトークンを指定できます。
npx changeset publish --otp=123456
公開後はgitタグも作成されるので、pushしておきましょう。
git push --follow-tags
4. ステータス確認
現在のchangesetの状態を確認するには以下を使います。
npx changeset status
--verboseオプションで詳細情報も出せます。
npx changeset status --verbose
実践的なユースケース
GitHub Actionsでの自動化
実際のプロジェクトでは、GitHub Actionsと組み合わせて使うことが多いと思います。
name: Release
on:
push:
branches:
- main
jobs:
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
uses: changesets/action@v1
with:
publish: npm run release
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
changesets/actionを使うと、changesetがある場合は自動でRelease PRを作成してくれます。そのPRをマージすると自動でnpm publishまで行ってくれるという流れです。
Changeset Botの導入
PRにchangesetが含まれているかチェックするBotも用意されています。
Changeset Botをリポジトリにインストールすると、changesetがないPRに「Missing Changeset」というコメントが付きます。
これ、チーム開発では地味に便利なんですよね。「変更したらchangeset作ってね」というルールを強制できるので。
package.jsonのscripts設定
よく使うコマンドはpackage.jsonに登録しておくと楽です。
{
"scripts": {
"changeset": "changeset",
"version-packages": "changeset version",
"release": "changeset publish"
}
}
まとめ
Changesetsを導入すると、モノレポのバージョン管理がかなり楽になります。
正直なところ、最初は「changesetファイルを毎回作るの面倒くさそう」と思っていました。でも実際に使ってみると、その手間以上にリリース作業が効率化されます。
特に複数パッケージの依存関係を自動で追従してくれる点は、手動でやっていた頃のミスがなくなって時短になりました。
モノレポでnpmパッケージを管理している方、CHANGELOGの手書きに疲れている方は、ぜひ試してみてください。