npmへのバージョン管理と公開
セマンティックバージョニングを使い、Changesetsまたはstandard-versionで変更履歴の生成を自動化して、ライブラリをnpmまたはプライベートレジストリに公開します。
「npmへのバージョン管理と公開」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。
npmに公開する理由
デザインシステムを複数のアプリで使用する場合は、パッケージとして公開します。利用側はnpm、yarn、pnpmでインストールし、バージョンを固定したうえで、自分たちのスケジュールに合わせて更新できます。
セマンティックバージョニング（SemVer）
バージョンはMAJOR.MINOR.PATCHの形式に従います。MAJOR：破壊的変更。MINOR：後方互換性のある新機能。PATCH：バグ修正のみ。
バージョンを上げるタイミング
propの名前を変更した？MAJORです。新しいオプションのpropを追加した？MINORです。CSSのバグを修正した？PATCHです。1.0未満のリリース（0.x.y）ではMINORでも破壊的変更が可能ですが、利用者に配慮してください。
package.json — マニフェスト
npm上でのパッケージの見え方を設定します。
{
"name": "@yourorg/design-system",
"version": "1.4.2",
"main": "dist/index.cjs.js",
"module": "dist/index.esm.js",
"types": "dist/index.d.ts",
"exports": {
".": { "import": "./dist/index.esm.js", "require": "./dist/index.cjs.js" },
"./theme": "./dist/theme.js"
},
"files": ["dist", "README.md"],
"peerDependencies": { "react": "^18.0.0" }
}ビルド出力
CommonJS、ESM、型定義を提供します。tsupやvite build --libなどのツールがこれを処理します。
// tsup.config.ts
export default {
entry: ['src/index.ts'],
format: ['cjs', 'esm'],
dts: true,
clean: true,
external: ['react', 'react-dom']
};
// package.json: "build": "tsup"peerDependencies
React、VueなどをpeerDependenciesに記載し、利用側が独自のバージョンを使用できるようにします。通常のdependenciesとして指定すると、2重にバンドルされ、フックやコンテキストが壊れます。
Tree-shakingに対応しやすい構成
ESMのexportを使用し、副作用を避けることで、バンドラーが未使用のコンポーネントを除外できるようにします。package.jsonで"sideEffects": falseを指定します（またはCSSなど特定のファイルを列挙します）。
npmに公開する
一度ログインすれば、その後は公開できます。
npm login
# Bump version + publish:
npm version patch # 1.4.2 -> 1.4.3
npm publish
# Or scoped public package:
npm publish --access publicChangesetsでリリースを自動化する
Changesetsは、モノレポとライブラリの公開に適した最新のツールキットです。プルリクエストに変更内容を説明する「changeset」ファイルを含めると、リリース用のCIがバージョンを更新して公開します。
npm install -D @changesets/cli
npx changeset init
# In each PR:
npx changeset
# pick package, type (major/minor/patch), describe change
# commits .changeset/<random>.md
# CI on main:
npx changeset version # bumps versions in package.json + generates changelog
npx changeset publish # publishes to npm変更履歴の自動生成
Changesetsは、changesetの説明からパッケージごとのCHANGELOG.mdを自動生成します。利用者は各バージョンで何が変更されたかを確認できます。
npmのDist-tag
プレリリースにはdist-tagを使用します。npm publish --tag betaで公開してもlatestを上書きしません。利用者はnpm install @yourorg/design-system@betaで明示的に利用できます。
プライベートレジストリ
内部パッケージには、GitHub Packages、GitLab Package Registry、セルフホスト型のVerdaccioを使用できます。.npmrcで設定します：@yourorg:registry=https://npm.pkg.github.com。
古いバージョンを非推奨にする
インストール時に警告が表示されるよう、バージョンを非推奨としてマークします。
npm deprecate @yourorg/design-system@1.0.0 'Use 2.x for React 18 support'クイックチェック
公開コンポーネントのpropの名前を変更した場合、SemVerではどの種類のバージョン更新が必要ですか？
振り返り：バージョン管理と公開
SemVerはMAJOR.MINOR.PATCHの形式で、破壊的変更、機能追加、修正を表します。CJS、ESM、型定義をビルドします（tsup、vite --lib）。ReactやVueはpeerDependenciesに指定します。tree-shakingにはsideEffects:falseを設定します。npm publishを実行するか、Changesetsで自動化します。CHANGELOGは自動生成できます。ベータ版にはdist-tagを使用します。内部パッケージにはプライベートレジストリを使用します。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 41
- レッスン
- 163
よくある質問
「npmへのバージョン管理と公開」レッスンは無料ですか？
はい。「npmへのバージョン管理と公開」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。
「npmへのバージョン管理と公開」で何を学びますか？
セマンティックバージョニングを使い、Changesetsまたはstandard-versionで変更履歴の生成を自動化して、ライブラリをnpmまたはプライベートレジストリに公開します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Frontend Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「npmへのバージョン管理と公開」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFrontend Academyレッスンでコードを書いて実行できますか？
はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。