動的変数名を持つ ES6 モジュールをインポートできますか?

変数変数名を使用した ES6 モジュールのインポートのカスタマイズ

はじめに:

ES6 では、import ステートメントを使用してインポートできます。モジュールを作成し、特定の名前を持つデフォルトのエクスポートを提供します。しかし、実行時の値に基づいてインポートされたモジュールに変数名を割り当てることはできますか?

質問:

実行時に、 ES6 インポート ステートメント、次のパターンに似ています:

<code class="javascript">import something from './utils/' + variableName;</code>

回答:

残念ながら、この構文は ES6 インポート ステートメントでは無効です。 ES6 のインポートとエクスポートは静的に分析可能であり、ランタイム情報に依存することはできません。

代替アプローチ:

動的なインポート動作を実現するには、ローダー API (polyfill) を利用できます。 )、「System.import」と呼ばれるメソッドを提供します。このメソッドはモジュール指定子を引数として受け取り、インポートされたモジュールに解決される Promise を返します。

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

ローダー API の互換性とサポートは、プラットフォームやブラウザによって異なることに注意してください。

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