JavaScript ES6 モジュールの詳細な説明

0. モジュールとは何か

歴史的に、JavaScript にはモジュール システムがなかったため、大規模なプログラムを小さな相互依存ファイルに分割し、それらを簡単な方法で組み立てることは不可能でした。他の言語にもこの機能があり、例えばRubyのrequire、Pythonのimport、さらにはCSSにも@importがありますが、JavaScriptにはこの点に関するサポートがないため、大規模で複雑なプロジェクトの開発に大きな障害となっています。

ES6 より前に、コミュニティはいくつかのモジュール読み込みソリューションを開発しましたが、その中で最も重要なのは CommonJS と AMD でした。 ES6 モジュールの設計思想は、モジュールの依存関係や入力変数、出力変数をコンパイル時に決定できるように、可能な限り静的にすることです。 ES6 モジュールはオブジェクトではなく、エクスポート コマンドを通じて出力用に明示的に指定され、インポート コマンドを通じてインポートされるコードです。

モジュール システムによって解決される主な問題は次のとおりです。

• モジュール化の問題
• グローバル変数を削除する
• ロード順序の管理

1.モジュールの読み込み

<script> タグを使用してモジュールをロードする場合は、type="module" を追加する必要があります。

1.1 方法1

<スクリプトタイプ="モジュール">
    「./module.js」からモジュールをインポートします。
</スクリプト>

1.2 方法2

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

2. 輸出と輸入

2.1 モジュールのエクスポートは他のモジュールからインポートしてアクセスできます。

例 1: About.js を使用して Base.js 内の Base オブジェクトを呼び出し、ホームページに出力します。

インデックス.html

<スクリプトタイプ="モジュール">
    「./js/About.js」からAboutをインポートします。
    console.log(バージョン情報);
</スクリプト>

ベース

定数ベース = {
    ニックネーム: 'admin',
    年齢: 19
}
デフォルトのベースをエクスポートします。

について

'../js/Base.js' から Base をインポートします。
const src = `ニックネーム:${Base.nick},年齢:${Base.age}.`;
デフォルトの src をエクスポートします。

出力：

ニックネーム:admin、年齢:19。

2.2 輸出されていなくても輸入できる

例 2: About.js はエクスポートされず、ホームページにインポートされます。

インデックス.html

<スクリプトタイプ="モジュール">
    「./js/About.js」をインポートします。
</スクリプト>

について

const src = 'Hello World!';
コンソールログ(ソース);

出力：

「こんにちは世界」

2.3 インポートされたコードは一度だけ実行されます

例 3: About.js を 3 回インポートし、エクスポート結果を確認します。

インデックス.html

<スクリプトタイプ="モジュール">
    「./js/About.js」をインポートします。
    「./js/About.js」をインポートします。
    「./js/About.js」をインポートします。
</スクリプト>

について

const src = 'Hello World!';
コンソールログ(ソース);

出力：

「こんにちは世界」

3. デフォルトのエクスポートと対応するインポート

export default はデフォルト値をエクスポートするために使用されます。モジュールには 1 つしか設定できません。

エクスポートにエクスポート デフォルトを使用する場合、インポート名は任意の名前にすることができます。

例 4: export default を使用してエクスポートし、インポートに任意の名前を付けます。

インデックス.html

<スクリプトタイプ="モジュール">
    「./js/About.js」からbbbをインポートします。
    コンソールにログ出力します。
</スクリプト>

について

const src = 'Hello World!';
デフォルトの src をエクスポートします。

出力：

「こんにちは世界」

4. 輸出とそれに伴う輸入

export を使用してエクスポートする場合、インポートの名前は任意にすることはできません。

例 5: export を使用してエクスポートします。

インデックス.html

<スクリプトタイプ="モジュール">
    「./js/About.js」から{age、nick}をインポートします。
    console.log(ニックネーム、年齢);
</スクリプト>

jsについて

定数年齢 = 18;
{age} をエクスポートします。
// 年齢をエクスポートします; ×
// エクスポート const age = 18; √
エクスポート const nick = 'admin';

出力：

管理者 18

5. モジュールに関する注意事項

1. モジュールでは、トップレベルの this は undefined を指します。

2import には昇格効果があり、モジュール全体の先頭に昇格され、最初に実行されます。

3. インポートが実行された時点では、コードはまだ実行されていません。

4. インポートとエクスポートは、コード ブロック内ではなく、モジュールの最上位レベルでのみ実行できます。

5.import() は条件付きでインポートできます。

6. 複合書き込みメソッドはエクスポートされており、現在のモジュールでは使用できません

複合書き込み、インポートしてからエクスポート:

'./js/About.js' から About をエクスポートします。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。