0Pricing
Vue Academy · レッスン

npmへの公開とセマンティックバージョニング

package.jsonのフィールド（main、module、exports）、変更履歴、semantic-release、npm publishの流れ

「npmへの公開とセマンティックバージョニング」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

公開の準備をする

公開すると、ライブラリを npm install でインストールできるようになります。その前に、package.json でエントリーポイントを正しく宣言し、公開するファイルを制御する必要があります。

mainとmodule

main は古いツール向けのCommonJSビルドを指し、module はESMビルドを指します。これにより、モダンなバンドラーはツリーシェイキング可能なバージョンを選択できます。

{
  "main": "./dist/my-ui-lib.cjs.js",
  "module": "./dist/my-ui-lib.es.js"
}

exportsマップ

モダンな exports フィールドは、条件付きのエントリーポイントを定義します。main/module より優先され、サブパスへのアクセスを制御します。

{
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/my-ui-lib.es.js",
      "require": "./dist/my-ui-lib.cjs.js"
    },
    "./style.css": "./dist/style.css"
  }
}

条件付きエクスポート

import、require、types の条件により、NodeとバンドラーはそれぞれESM、CommonJS、TypeScriptに適したファイルを解決できます。

公開ファイルを制御する

files フィールドで公開するファイルの許可リストを指定するか、.npmignore で拒否リストを指定します。dist を公開し、ソースとテストを除外すると、パッケージを小さく保てます。

{
  "files": ["dist"]
}

.npmignore

拒否リスト方式を使う場合、files フィールドを設定していなくても .npmignore でファイルを除外できます。どちらも指定しない場合、npmはほぼすべてのファイルを公開します。

# .npmignore
src
tests
vite.config.ts
*.log

npm packでプレビューする

npm pack を実行するとtarballが作成され、実際に何が公開されるかを確認できます。公開前に必ず行うべき重要な安全確認です。

npm pack
# inspect the listed files; nothing secret should appear

セマンティックバージョニング

SemVerでは MAJOR.MINOR.PATCH を使用します。後方互換性のあるバグ修正では patch、後方互換性のある機能追加では minor、互換性を壊す変更では major を上げます。

npm versionコマンド

npm version コマンドは、package.json のバージョンを上げ、同時にgitタグを作成します。

npm version patch   # 1.0.0 -> 1.0.1
npm version minor   # 1.0.1 -> 1.1.0
npm version major   # 1.1.0 -> 2.0.0

npm publish

npm publish はパッケージをアップロードします。スコープ付きの公開パッケージでは、初回のみ --access public フラグが必要です。

npm publish --access public

prepublishOnlyとdist-tag

prepublishOnly スクリプトによって公開前に最新のビルドが実行され、--tag next を使うと latest タグを移動せずにプレリリースを公開できます。

{
  "scripts": {
    "prepublishOnly": "npm run build"
  }
}
// npm publish --tag next

理解度チェック

既存の利用方法を壊さずに、新しい任意のpropを追加します。どのバージョンを上げますか。

まとめ

main、module、条件付きの exports マップ（import/require/types）を設定し、files または .npmignore で公開するファイルを制御します。npm pack で確認してから、SemVerに従い npm version patch/minor/major でバージョンを上げ、npm publish で公開します（スコープ付きパッケージでは --access public を追加します）。

よくある質問

「npmへの公開とセマンティックバージョニング」レッスンは無料ですか？

はい。「npmへの公開とセマンティックバージョニング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「npmへの公開とセマンティックバージョニング」で何を学びますか？

package.jsonのフィールド（main、module、exports）、変更履歴、semantic-release、npm publishの流れ ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「npmへの公開とセマンティックバージョニング」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Viteライブラリモードの設定
  2. コンポーネントライブラリのTypeScript宣言
  3. Tree Shakingと自動インポート
  4. npmへの公開とセマンティックバージョニング
← Vue Academyに戻る