変数対応 ES6 インポート

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

静的インポート

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

ローダー API

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

System.import('./utils/'   variableName).then(function(module) {
  console.log(module);
});

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

互換性に関する考慮事項

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