異なる配布ファイル

npm パッケージの dist/ ディレクトリ には、Vue I18n のさまざまなビルドが含まれています。これは、使用状況に応じてどの dist ファイルを使用すべきかの概要です。

CDN またはバンドラを使わない場合

• vue-i18n(.runtime).global(.prod).js:
  • ブラウザで <script src="..."> を介して直接使用するため。VueI18n グローバルを公開します
  • ブラウザ内のメッセージ形式コンパイル:
    • vue-i18n.global.js はコンパイラとランタイムの両方を含む「フル」ビルドであり、即時メッセージ形式のコンパイルをサポートします
    • vue-i18n.runtime.global.js はランタイムのみを含み、メッセージ形式はビルド段階で事前にコンパイルする必要があります
  • すべての Vue I18n コア内部パッケージがインライン化されており、他のファイルに依存しない単一ファイルとなります。これにより、同じコードインスタンスを得るためにはこのファイルのみからすべてをインポートする必要があります
  • ハードコードされた本番/開発ブランチを含み、本番ビルドは事前に最小化されています。本番環境では *.prod.js ファイルを使用してください

注意

グローバルビルドは UMD ビルドではありません。IIFEs として構築されており、 <script src="..."> を介した直接使用のみを目的としています。

• vue-i18n(.runtime).esm-browser(.prod).js:
  • ネイティブ ES モジュールのインポートを通じた使用 (ブラウザで <script type="module"> 経由)
  • グローバルビルドと同じランタイムコンパイル、依存関係のインライン化、およびハードコードされた本番/開発動作を共有します

バンドラと一緒に使う場合

• vue-i18n(.runtime).esm-bundler.js:
  • webpack、rollup、parcel などのバンドラで使用するため
  • process.env.NODE_ENV ガードを持つ本番/開発ブランチを残します（バンドラによって置き換えられる必要があります）
  • 最小化されたビルドを出荷しません（バンドリング後にコード全体と一緒に最小化されます）
  • 依存関係をインポートします（例：@intlify/core-base、@intlify/message-compiler）
    • インポートされた依存関係も esm-bundler ビルドであり、それらはさらにそれらの依存関係をインポートします（例：@intlify/message-compiler は @intlify/shared をインポートします）
    • これにより、これらの依存関係を個別にインストール/インポートできますが、すべて同じバージョンに解決されていることを確認する必要があります
  • ブラウザ内のローカルメッセージコンパイル:
    • vue-i18n.runtime.esm-bundler.js はランタイムのみであり、すべてのローカルメッセージを事前にコンパイルする必要があります。これはバンドラのデフォルトエントリです（package.json の module フィールド経由）バンドラを使用する場合は、テンプレートが通常事前にコンパイルされるため（例：*.json ファイル内）、これがバンドラのデフォルトエントリです。
    • vue-i18n.esm-bundler.js（デフォルト）: ランタイムコンパイラを含みます。バンドラを使用しながらもローカルメッセージコンパイルを希望する場合はこちらを使用してください（例：インライン JavaScript 文字列によるテンプレート）。このビルドを使用するには、インポート文を変更してください：import { createI18n } from "vue-i18n/dist/vue-i18n.esm-bundler.js";

注意

vue-i18n.runtime.esm-bundler.js を使用する場合、すべてのローカルメッセージを事前にコンパイルする必要があります。.json（.json5）または .yaml、i18n カスタムブロックを使用して i18n リソースを管理できます。したがって、あなたはバンドラと以下のローダー/プラグインを使ってすべてのロケールメッセージを事前にコンパイルできます。

• @intlify/unplugin-vue-i18n

Node.js（サーバーサイド）の場合

• vue-i18n(.runtime).node.js:
  • Node.js での ES モジュール使用
  • import を通じて Node.js で使用
  • 開発/本番ファイルは事前にビルドされていますが、適切なファイルは process.env.NODE_ENV に基づいて自動的に要求されます
  • このモジュールは vue-i18n(.runtime).js のプロキシモジュールです
    • vue-i18n.runtime.node.js: ランタイムのみ。
    • vue-i18n.node.js: ランタイムコンパイラを含みます。