ES6 モジュールの条件付きインポート

ES6 では、「import」キーワードと「export」キーワードは、モジュール。これにより、多くのアプリケーションで一般的な要件である条件付きインポートが防止されます。この質問では、この問題の解決策を探ります。

最初、ユーザーは条件ステートメントを使用してモジュールをインポートしようとしましたが、SyntaxError が発生しました。次に、ユーザーは System.import を使用して調査しましたが、必要なリソースを見つけるのが困難でした。

条件付きインポートに対する解決策は、ECMAScript 2020 に動的インポートを導入することで提供されます。動的インポートでは、import() 関数を使用します。モジュール名を表す文字列引数。この関数は、インポートされたモジュールに解決される Promise を返します。

動的インポートを使用してモジュールを条件付きでインポートする方法は次のとおりです。

if (condition) {
  import('something')
  .then((something) => {
    console.log(something.something);
  });
}

この例では、「import」キーワードが条件ステートメント内に表示されます。 import() 関数は Promise を返し、それが解決されてモジュールが「something」変数に割り当てられます。これにより、構文エラーなしでモジュールを条件付きでインポートできます。