JavaScriptモジュールの進化：CommonJS、AMD、およびESモジュール

JavaScriptのモジュールシステムは、CommonJS、AMD TO ESモジュール、およびESモジュールの進化を最終的に標準にしました。 1. CommonJSはサーバー側で使用され、同期負荷を使用します。 node.jsには適していますが、ブラウザには適していません。 2。AMDはブラウザ用に設計されており、長い構文と生態学的断片化を備えた非同期負荷をサポートしています。 3。ESモジュールは、ES2015によって導入された公式標準です。静的分析、ツリーシェーキング、クロスプラットフォームの互換性をサポートします。ブラウザとnode.jsで使用し、commonjsと相互緩和できます。現在、最新のツールとフレームワークによって広く採用されており、統一されたモジュールソリューションになっています。

JavaScriptには常に組み込みモジュールシステムが組み込まれているとは限りませんでした。 Webアプリが複雑になるにつれて、開発者はコードを再利用可能な維持されたピースに整理する方法を必要としていました。これにより、いくつかのモジュールパターンと標準（CommonJ、AMD、および最終的にESモジュール）が進化しました。それぞれが、JavaScriptの開発のさまざまな段階で特定の問題を解決するために現れました。

それらがどのように進化したか、そしてESモジュールが標準になった理由は次のとおりです。

CommonJS：サーバー側のモジュール性

CommonJSは2010年代初頭にサーバー側のJavaScriptを念頭に置いて作成されました。最も顕著なのはnode.jsで使用されています

• 同期読み込み：モジュールは同期的にロードされます。これは、ファイルI/Oが高速なサーバーで正常に動作します。

• 単純な構文：

  

   // math.js
  関数add（a、b）{
    ABを返します。
  }
  module.exports = {add};
  
  // app.js
  const {add} = require（ './ math'）;
  console.log（add（2、3））;

• キーユースケース：node.jsバックエンド開発。

CommonJSはサーバーには優れていましたが、同期ロードがUIをブロックするため、ブラウザには適していませんでした。これにより、ブラウザに優しい代替品が台頭しました。

AMD：ブラウザの非同期モジュール定義

AMD（非同期モジュール定義）は、非同期にスクリプトをロードすることが不可欠なブラウザ向けに特別に設計されています。

• 非同期ロード：ファイルは、ページをブロックせずに背景にロードされます。

• ブラウザファーストアプローチ：動的なスクリプトロードでうまく機能します。

• 構文例：

   // math.js
  定義（['依存関係']、関数（依存関係）{
    関数add（a、b）{
      ABを返します。
    }
    {add}を返します;
  }）;
  
  // main.js
  必要（['math']、function（math）{
    console.log（math.add（2、3））;
  }）;

• 一般的な実装：requirejs。

AMDは、開発者がブラウザのモジュラーコードを作成することを許可しましたが、構文は冗長であり、フロントエンドワークフローの外でトラクションを得ることはありませんでした。また、node.jsとうまく統合されず、クライアントとサーバーのエコシステム間の分割を作成しました。

ESモジュール：ネイティブソリューション

ES2015（ES6）のリリースにより、JavaScriptは最終的にネイティブモジュールシステム： ESモジュール（ESM）を取得しました。

• 標準化された組み込み：公用語仕様の一部。

• 静的構造：より良いツール（ツリーシェーキング、静的分析）を有効にします。

• 構文：

   // math.js
  const add =（a、b）=> ab;
  
  // app.js
  './math.js'から{add}をインポートします。
  console.log（add（2、3））;

• ブラウザとnode.jsの両方をサポートします：

  • ブラウザは<script type="module"></script>を介してESMをサポートします。
  • node.jsは、 package.jsonで.mjsファイルまたは"type": "module"を使用してESMをサポートします。

• 重要な利点：

  • ツリーシェーキング：未使用の輸出は、生産ビルドで削除できます。
  • 静的分析：インポート/エクスポートはコンパイル時に解決されます。
  • 相互運用性：node.jsのcommonjsと相互作用することができます（例えば、 import _ from 'lodash' ）。

ESモジュールが勝った理由

• ユニバーサル採用：現在、すべての最新のブラウザとnode.jsでネイティブにサポートされています。
• Future-Proof ：よりクリーン、よりモジュラーコードを奨励します。
• ツールフレンドリー：Webpack、Vite、Rollupなどのバンドラーでシームレスに動作します。
• 相互運用性：CommonJSプロジェクトでもESMを徐々に採用できます。

commonjsはnode.js（特に古いパッケージで）でまだ広く使用されていますが、新しいプロジェクトはESモジュールを使用することをお勧めします。主要なツールとフレームワーク（React、Vue、Next.jsなど）は、デフォルトでESMを想定しています。

基本的に、この進化は、JavaScriptのシンプルなスクリプト言語から大規模なアプリケーションのための本格的なプラットフォームへの旅を反映しています。 ESモジュールは、サーバーとクライアントのニーズが単一の標準化されたシステムに収束することを表します。

構文だけではありません。モジュラーJavaScriptをどこにでも書くための一貫した方法が1つあることです。

以上がJavaScriptモジュールの進化：CommonJS、AMD、およびESモジュールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。