ES6 インポートを使用してモジュールを動的にインポートする方法
最新の JavaScript アプリケーションでは、ES6 インポート構文を使用してモジュールをインポートするのが一般的です。しかし、変数名に基づいてモジュールを動的にインポートしたい場合はどうすればよいでしょうか?
ES6 Import の制限
残念ながら、ES6 の import ステートメントは静的に分析可能です。これは、実行時情報に依存できないことを意味します。これは、変数名に基づいてモジュールを直接インポートできないことを意味します。
代替解決策: ローダー API
動的モジュールのインポートを実現するには、ローダー API (ポリフィル)。この API を使用すると、System.import メソッドを使用してモジュールを動的にロードできます。その仕組みは次のとおりです。
<code class="javascript">System.import('./utils/' + variableName).then(function(m) { console.log(m); });</code>
このコードは、variableName を使用して構築されたパスからモジュールを動的にインポートし、インポートされたモジュールで提供されたコールバックを実行します。
互換性を考慮する
Loader API を使用する場合は、さまざまな JavaScript 環境との互換性を考慮することが重要です。一部のブラウザとノードのバージョンは、デフォルトではローダー API をサポートしていない場合があります。互換性を確保するには、polyfill を使用することをお勧めします。
結論
ES6 の import ステートメントは静的に分析可能ですが、Loader API (polyfill) を使用して次のことを実現できます。変数名に基づいた動的モジュールのインポート。このアプローチにより柔軟性がもたらされ、より動的で再利用可能なコードを作成できます。
以上が変数に基づいて ES6 モジュールを動的にインポートできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。