ESモジュール対commonJS：詳細な比較

ESモジュール（ESM）とCommonJSは、JavaScriptの2つのモジュールシステムです。主な違いは、構文、ロードメカニズム、実行タイミング、環境サポート、および相互運用性です。 1。構文、ESMは静的宣言へのインポート/エクスポートを使用し、commonJSはrequire（）/module.exportsを使用して値を動的に割り当てます。 2。ローディングメカニズムの観点から、ESMは静的分析とツリーシェーキングをサポートします。 CommonJSは実行時に動的にロードされ、柔軟性が高くなりますが、最適化を助長しません。 3。実行時に、ESMはリアルタイムのバインディングを通じて最新の値を取得できます。 CommonJSキャッシュモジュール出力は、初期化オブジェクトの一部を返す場合があります。 4。環境サポートの観点から、ブラウザはESMをネイティブにサポートします。 node.jsは、v12の.mjsまたは "type"： "Module"を介してESMをサポートし、CommonJSはデフォルトで使用されます。 5.相互運用性の観点から、ESMはCommonJSモジュールを直接インポートできますが（デフォルトのインポートに注意してください）、CommonJSはESMモジュールを直接要求することはできません。また、動的Import（）が必要です。 6.ツールチェーンとエコシステムでは、Webpack、ViteなどがESMによってよりよくサポートされています。新しいプロジェクトはESMを使用することをお勧めします。古いプロジェクトは徐々に移行することができます。 NPMパッケージをリリースするときは、ESMおよびCommonJSバージョンを提供し、エクスポートフィールドを介して入り口を正確に制御する必要があります。最後の結論は、新しいプロジェクトがESMに優先順位を付けて、パフォーマンスと互換性を向上させる必要があるということです。

ESモジュール（ESM）とCommonJSは、JavaScriptの2つの主流モジュールシステムであり、それぞれ最新のブラウザーと初期node.js環境を支配しています。 JavaScriptの開発により、この2つは構文、読み込みメカニズム、互換性などに明らかな違いがあります。以下は、複数の次元からの詳細な比較であり、開発者がどのモジュールシステムを使用するかを理解するのに役立ちます。

1。文法の違い：ライティング方法の直感的な比較

これは最も明白な違いであり、コードスタイルに直接影響します。

commonjs（node.js早期標準）

 // export module.exports = {foo};
//またはexports.foo = foo;

// const {foo} = require（ './ foo'）;

ESモジュール（最新標準）

 //エクスポートconst foo = 'bar';
デフォルトのfooをエクスポートします。

// './foo.js'からインポート{foo}をインポートします。
'./foo.js'からmyDefaultをインポートします。

• ESMは、言語レベルの静的構文であるimport / exportキーワードを使用します。
• commonJSは、実行時に動的荷重に属するrequire()関数とmodule.exportsオブジェクトを使用します。

✅ヒント：ESMはより厳格なファイル拡張機能（ .jsなど）が必要ですが、commonjsはノードで省略できます。

2。ローディングメカニズム：静的対動的

これがコアの違いであり、パフォーマンスとツールの最適化機能に影響を与えます。

• ESMの静的な性質は、パッケージングツール（Webパックやロールアップなど）がビルド時に依存関係を分析し、未使用コード（ツリーシェーキング）を排除し、パッケージサイズを大幅に削減できることを意味します。
• CommonJSの動的性質により、条件ifモジュールrequireますが、これはより柔軟性がありますが、静的分析も困難になります。

例：

 if（条件）{
  const mod = require（ 'somemodule'）; // commonjsは許可します}

// ESMの同様のロジックには、動的なインポートが必要です。
if（条件）{
  const mod = await import（ 'somemodule'）; //✅ESM動的インポート}

3。実行タイミングと円形の依存関係処理

モジュールの実行順序は、円形参照の処理方法とは異なります。

• CommonJS ：モジュールは最初のrequireで実行され、結果がキャッシュされます（ module.exportsの浅いコピー）。円形の依存関係に遭遇すると、部分的に初期化されたオブジェクトが返される場合があります。

   // a.js
  console.log（ 'a start'）;
  const b = require（ './ b'）;
  exports.done = true;
  
  // b.js
  console.log（ 'b start'）;
  const a = require（ './ a'）; //循環参照

  出力は次のとおりです。

  開始
  b開始

  現時点では、 a b実行されていませんa

• ESM ：すべてのモジュールはシングルトン参照であり、円形の依存関係は「リンク」メカニズムを介して処理されます。ループで参照されている場合でも、 exportの最終的な値を正しくバインドできます。

   // a.mjs
  './b.mjs'から{b}をインポートします。
  const a = 'a'をエクスポートします。
  
  // b.mjs
  './a.mjs'から{a}をインポートします。
  const b = 'b'をエクスポートします。

  ESMは「ライブバインディング」を使用するため、ループがありますが、アクセス中に最新の値を取得できます。

？キーポイント：ESMエクスポートは「読み取り専用の参照」であり、バリューコピーではありません。元のモジュールの変数を変更すると、インポーターにも変更が表示されます。

4。ブラウザとnode.jsサポートステータス

• node.jsでの混合使用：
  • .cjs拡張力commonjs。
  • .mjs Force ESM。
  • .jsファイルの動作は、 package.jsonの"type"フィールドによって決定されます。

 {
  「タイプ」：「モジュール」
}

moduleシステム全体でインポートするときに、 require() a .mjsファイルを直接要求することはできません。エラーが報告されます。

5。相互運用性：ミックスで使用する方法は？

多くの場合、移行またはハイブリッドプロジェクトで相互運用性が必要です。

• ESMにCommonJSモジュール（node.js）をインポートします

  'lodash'から_インポート。 //はい、ただし、デフォルトのインポートインポート{default as _} from 'lodash'; //より明示的

• commonjs❌でESMモジュールをインポートすることは、 ESMモジュールを直接require()はできません。

  代替品：

  • Dynamic import() （Promise to Promise）を使用してください。

     async function load（）{
      const mod = await import（ './ esm-module.mjs'）;
    }

  • またはビルドツールを介した統一された変換。

6。ツールチェーンと生態学的影響

• パッケージングツール（webpack/vite/lollup）

  • ESMの優先度が最適化されるのを助長します。
  • Viteは、デフォルトでESM開発環境に基づいています（ブラウザネイティブサポートを使用）。

• NPMパッケージリリース

  • ESMバージョンとCommonJSバージョンの両方を提供することをお勧めします。
  • exportsフィールドを使用して、正確に制御します。

     {
      「メイン」：「./index.cjs」、
      「モジュール」： "./index.mjs"、
      「エクスポート」：{
        「インポート」：「./index.mjs」、
        「要求」：「./index.cjs」
      }
    }

    ---

    概要：どちらを使用すればよいですか？

    シーン	推薦する
    新しいプロジェクト（特にフロントエンド）	モジュール
    node.jsバックエンド古いプロジェクト	？ CommonJSを使用し続け、徐々に移行できます
    ツリーシェーキングまたはブラウザのネイティブサポートが必要です	ESMが必要です
    梱包ではなく、動的な条件の負荷	commonjsはより柔軟です（ただし、 import()に置き換えることができます）
    NPMパッケージを公開します	eSMとCommonJSを同時にサポートします

    ---

    現在、node.jsとブラウザの両方がESMを完全にサポートしています。これはJavaScriptモジュールシステムの将来です。 CommonJSはまだ広まっていますが、新しいプロジェクトは、パフォーマンス、保守性、最新のツールチェーンとの互換性のためにESモジュールに優先順位を付けることを推奨しています。

    基本的にはすべて、複雑ではありませんが、詳細を無視するのは簡単です。

    以上がESモジュール対commonJS：詳細な比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。