モジュールフィールドとは何ですか?

package.json のモジュール フィールドは、ESM (ES6 モジュール) のエントリ ポイントを指定します。 CommonJS モジュール (require()) 用に設計されたメイン フィールドとは異なり、モジュールは、JavaScript バンドラー (Webpack、Rollup) など、新しい ESM 標準をサポートする環境をターゲットとするために使用されます。およびインポート構文を使用するブラウザ。

なぜモジュールが重要なのでしょうか?

モジュール フィールドは、Webpack や Rollup などの JavaScript バンドラーが ESM 形式を使用するパッケージを最適化したいと考えていたために生まれました。 ESM には、ツリーシェイク (未使用のコードの削除) や 静的分析 (依存関係をより効率的に分析する) などの利点があります。 module フィールドは、パッケージの ESM バージョンがどこにあるかをバンドラーに伝え、バンドラーがこれらの最適化を実行できるようにします。

メインとの違い:

• Main は、require(). を使用して Node.js によって使用される CommonJS
(古い形式) 用です。
• Module は、インポート構文をサポートするバンドラーと環境によって使用される ESM (最新形式) 用です。

例：

CommonJS と ESM の両方をサポートするパッケージを出荷する場合は、メインとモジュールの両方を使用できます:

{
  "name": "my-package",
  "version": "1.0.0",
  "main": "index.js",  // Entry for CommonJS (Node.js)
  "module": "esm/index.js"  // Entry for ESM (Bundlers, Modern Environments)
}

モジュールはいつ使用されますか?

• バンドラー: Webpack、Rollup、Parcel などのツールがコードをバンドルする場合、パッケージの ESM バージョンを使用するためのモジュール フィールドが検索されます。これは CommonJS よりも最適化できます。
• 最新の環境: ネイティブのインポート構文をサポートするブラウザおよびその他の環境でも、モジュール フィールドを参照する場合があります。

main だけを使用しないのはなぜですか?

• Main は、Node.js および CommonJS システムとの 下位互換性 を目的としています。 Node.js は module フィールドを使用しません。 require().
は main に依存します。
• モジュールは、最新のESMシステム専用であり、バンドラーがインポートを最適化するために探すものです。

内訳の例:

{
  "main": "index.js",   // Entry point for CommonJS, Node.js uses this
  "module": "esm/index.js"  // Entry point for ES modules, bundlers use this
}

• 誰かが require('my-package') を使用すると、Node.js はindex.js (CommonJS) をロードします。
• 誰かが import 'my-package' を使用すると、バンドラーは esm/index.js (ESM) を調べます。

重要な注意事項:

• Node.js はネイティブに module フィールドを使用しません (下位互換性のために main のみを使用します)。
• JavaScript バンドラは、パッケージの ES モジュール バージョンを指すため、モジュールを優先します。

まとめ：

• Node.js (CommonJS).
には main を使用します
• 最新の JavaScript 環境 (ESM) およびバンドラー用のモジュールを使用します。
• 両方をサポートしたい場合は、package.json に両方のフィールドを含めます。

これはモジュールフィールドに関する混乱を解消するのに役立ちますか?