ECMAScript モジュールを動的にインポートする方法に関する簡単な説明

ECMAScript (別名 ES2015 または ES) モジュールは、JavaScript でまとまったコード ブロックを編成する方法です。

ES モジュール システムには 2 つの部分があります:

• importModule - import { func } from './myModule'# を使用します。
• ##export モジュール - export const func = () => {}

import モジュールを使用します。依存関係をインポートするモジュールは import 構文

import { concat } from './concatModule';

concat('a', 'b'); // => 'ab'

を使用し、インポートされたモジュールは

export 構文

export const concat = (paramA, paramB) => paramA + paramB;

## を使用してコンポーネントを自身からエクスポートします。 import { concat } from './concatModule'

ES モジュールの使用方法は静的です。つまり、モジュール間の依存関係がコンパイル時にすでにわかっていることを意味します。 静的インポートはほとんどの場合に機能しますが、クライアントの帯域幅を節約し、条件付きでモジュールをロードしたい場合があります。

これを実現するには、別の方法 (関数として)

import(pathToModule)

構文を使用して、モジュールの新しい動的インポートを作成できます。動的インポートは、ES2020 から始まる JavaScript 言語機能です。

1. 動的モジュールのインポート

import

キーワードが静的インポート構文の代わりに関数として使用される場合: <pre class="brush:js;toolbar:false;">const module = await import(pathToModule);</pre>

promise

を返し、モジュールをロードする非同期タスクを開始します。モジュールが正常にロードされた場合、promise はモジュールのコンテンツに解決されます。そうでない場合、promise は拒否されます。

pathToModule

には、インポートされたモジュールへのパスを表す文字列を値とする任意の式を指定できることに注意してください。有効な値は、通常の文字列リテラル (./myModule など) または文字列を含む変数です。 たとえば、非同期関数でモジュールをロードします。

async function loadMyModule() {
  const myModule = await import('./myModule');
  // ... use myModule
}

loadMyModule();

興味深いことに、静的インポートとは対照的に、動的インポートはモジュール パスに評価される式を受け入れます

async function loadMyModule(pathToModule) {
  const myModule = await import(pathToModule);
  // ... use myModule
}

loadMyModule('./myModule');

モジュールをロードする方法を理解したところで、コンポーネントを抽出からインポートする方法を見てみましょう。モジュール。

#2. コンポーネントのインポート

2.1 名前付きコンポーネントのインポート

次のモジュールについて考えてみましょう:

// namedConcat.js
export const concat = (paramA, paramB) => paramA + paramB;

concat

関数がここにエクスポートされます。

namedConcat.js

を動的にインポートし、名前付きエクスポート

concat にアクセスする場合は、構造化を使用するだけです:

async function loadMyModule() {
  const { concat } = await import('./namedConcat');
  concat('b', 'c'); // => 'bc'
}

loadMyModule();

2.2デフォルトのエクスポート

モジュールがデフォルトでエクスポートされる場合、default

属性を使用してアクセスできます。

引き続き上記の例ですが、デフォルトで concat

関数を

defaultConcat.js にエクスポートします。

// defaultConcat.js
export default (paramA, paramB) => paramA + paramB;

は動的インポート モジュールで使用できます。アクセスする default

属性:

async function loadMyModule() {
  const { default: defaultImport } = await import('./defaultConcat');
  defaultImport('b', 'c'); // => 'bc'
}

loadMyModule();

default

は JavaScript のキーワードであるため、変数名として使用できないことに注意してください。

2.3 混合形式のインポート

モジュール内にデフォルトのエクスポートと名前付きエクスポートの両方がある場合、それらにも構造化を使用してアクセスできます:

async function loadMyModule() {
  const { 
    default: defaultImport,
    namedExport1,
    namedExport2
  } = await import('./mixedExportModule');
  // ...
}

loadMyModule();

3. 動的インポートを使用する場合

モジュールが比較的大きい場合、またはモジュールをインポートする必要がある場合は、動的インポート

を使用することをお勧めします。条件に基づいて。

async function execBigModule(condition) {
  if (condition) {
    const { funcA } = await import('./bigModuleA');
    funcA();
  } else {
    const { funcB } = await import('./bigModuleB');
    funcB();
  }
}

execBigModule(true);

コードが数十行しかない小さなモジュール (前の例の namedConcat.js

や

defaultConcat.js など) の場合は、動的インポートを使用します。ナイフで触って鶏を殺します。

概要

import(pathToModule)

を関数として呼び出す場合、その引数はモジュール指定子 (モジュール指定子とも呼ばれます) を表します。パス)、モジュールは動的にロードされます。

この場合、module = await import(pathToModule)

は、インポートされたモジュール コンポーネントを含むオブジェクトに解決される Promise を返します。

Node.js (13.2 以降) と最新のブラウザーは動的インポートをサポートしています。

英語の元のアドレス: https://dmitripavlutin.com/ecmascript-modules-dynamic-import/

著者: Dmitri Pavlutin

詳細プログラミング関連の知識については、

プログラミング ビデオ

をご覧ください。 ！

以上がECMAScript モジュールを動的にインポートする方法に関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。