フロントエンド モジュラー ESM とは何ですか?

フロントエンド ESM とは何ですか。具体的なコード例が必要です。

フロントエンド開発では、ESM は ECMAScript モジュールを指します。これは、以下に基づくモジュール式開発手法です。 ECMAScriptの仕様。 ESM は、より優れたコード構成、モジュール間の分離、再利用性など、多くの利点をもたらします。この記事では、ESM の基本概念と使用法を紹介し、いくつかの具体的なコード例を示します。

1. ESM の基本概念
   ESM では、コードを複数のモジュールに分割することができ、各モジュールは他のモジュールで使用するためのいくつかのインターフェイスを公開します。各モジュールは、グローバル変数の競合を気にすることなく、import ステートメントを通じて必要な依存関係を導入できます。同時に、モジュールは、export ステートメントを通じてそのインターフェイスを他のモジュールに公開することもできます。
2. ESM の使用法
   2.1 基本構文
   ESM を使用するには、HTML ファイル内の script タグを使用してモジュールをロードし、タイプを「モジュール」として指定する必要があります。例:

<script type="module" src="main.js"></script>

モジュール ファイルでは、import ステートメントを使用して他のモジュールのインターフェイスを導入し、export ステートメントを使用して独自のインターフェイスを他のモジュールに公開できます。たとえば、2 つのモジュール ファイルがあります。

// module1.js
export function sayHello() {
  console.log("Hello, module1!");
}

// module2.js
import { sayHello } from "./module1.js";

sayHello();

2.2 エクスポートおよびインポート インターフェイス
ESM では、export ステートメントを使用して、モジュール内の変数、関数、またはクラスを他のモジュールにエクスポートできます。例:

// module1.js
export const PI = 3.14;

export function square(x) {
  return x * x;
}

他のモジュールは、import ステートメントを使用してインターフェースを module1.js にインポートし、それを使用できます。例:

// module2.js
import { PI, square } from "./module1.js";

console.log(PI); // 输出3.14
console.log(square(2)); // 输出4

2.3 デフォルトのエクスポートとデフォルトのインポート
名前付きインターフェイスのエクスポートに加えて、ESM はデフォルトのエクスポートとデフォルトのインポートもサポートしています。モジュールにはデフォルトのエクスポートを 1 つだけ含めることができ、デフォルトのエクスポートを {} で囲む必要はありません。デフォルトのインポートでは、任意の変数名を使用して受信できます。例:

// module1.js
export default function sayGoodbye() {
  console.log("Goodbye!");
}

// module2.js
import goodbye from "./module1.js";

goodbye(); // 输出Goodbye!

3. ESM と CommonJS の違い (module.exports/require)
   ESM と CommonJS は 2 つの異なるモジュール開発方法です。 ESM は静的なインポートとエクスポートを使用し、モジュールの依存関係はコンパイル時に決定されますが、CommonJS は動的なインポートとエクスポートを使用し、モジュールの依存関係は実行時にのみ決定できます。

ESM の利点は、モジュールの依存関係がより明確になり、モジュールの読み込みと実行順序を制御するためにグローバル変数を使用する必要がないことです。 CommonJS の利点は、実行時にモジュールの依存関係を動的に計算できるため、より高い柔軟性が得られることです。

次は、ESM と CommonJS を混合する例です:

// module1.js (ESM)
export const PI = 3.14;

// module2.js (CommonJS)
const { PI } = require("./module1.js");
console.log(PI); // 输出3.14

概要:
ESM は、フロントエンド開発で一般的に使用されるモジュラー開発手法であり、静的なインポートと共有を通じてモジュールを管理します。エクスポートの参照関係。 ESM では、モジュールは相互に参照してコードを再利用でき、グローバル変数の汚染を心配する必要はありません。実際の開発では、モジュールの考え方に従って複雑なコードを分割し、コードの保守性と可読性を向上させることができます。

以上は ESM の基本的な概念と使い方についての紹介でしたが、この記事の紹介を通じて読者の皆様が ESM について一定の理解を深め、実際の開発に ESM 技術を適用できるようになれば幸いです。

以上がフロントエンド モジュラー ESM とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。