ES6 で変数に基づいてモジュールを動的にインポートするにはどうすればよいですか?

変数対応 ES6 インポート

ES6 では、import ステートメントを使用してモジュールをコードにインポートする便利な方法が提供されます。ただし、実行時に変数名に基づいてモジュールをインポートする必要がある場合はどうすればよいでしょうか?これは、構成設定に基づいてモジュールを動的にロードするシナリオで発生する可能性があります。

静的インポート

残念ながら、ES6 のインポート ステートメントは静的に分析されます。これは、インポートされるモジュールがコンパイル時に認識されている必要があることを意味します。したがって、変数名を使用してインポートするモジュールを指定することはできません。

ローダー API

モジュールを動的にロードするには、ローダー API を使用する必要があります。この API は、ロードするモジュールを指定する文字列を受け入れる System.import() という関数を提供します。次の例は、これを使用して変数名に基づいてモジュールをロードする方法を示しています。

<code class="javascript">System.import('./utils/' + variableName).then(function(module) {
  console.log(module);
});</code>

System.import() 関数は、ロードされたモジュールに解決される Promise を返します。その後、モジュール オブジェクトを使用して、モジュールのエクスポートされたメンバーにアクセスできます。

互換性に関する考慮事項

ローダー API は、最新のブラウザーと Node.js でサポートされています。ただし、古いブラウザとの互換性を実現するために、ポリフィルの使用が必要になる場合があります。

以上がES6 で変数に基づいてモジュールを動的にインポートするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。