ES6中如何基於變數動態導入模組？

變數感知 ES6 導入

在 ES6 中，import 語句提供了一種將模組匯入程式碼的便利方法。但是，如果您需要在運行時根據變數名稱導入模組怎麼辦？這可能會出現在根據配置設定動態載入模組的場景中。

靜態導入

不幸的是，ES6 中的 import 語句是靜態分析的。這意味著正在導入的模組必須在編譯時已知。因此，您不能使用變數名稱來指定要匯入的模組。

Loader API

要動態載入模組，您需要使用 Loader API。此 API 提供了一個名為 System.import() 的函數，該函數接受指定要載入的模組的字串。以下範例展示如何使用它根據變數名稱載入模組：

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

System.import() 函數傳回解析為載入模組的承諾。然後，您可以使用模組物件存取模組的匯出成員。

相容性注意事項

現代瀏覽器和 Node.js 支援 Loader API。但是，您可能需要使用 polyfill 來實現與舊版瀏覽器的兼容性。

以上是ES6中如何基於變數動態導入模組？的詳細內容。更多資訊請關注PHP中文網其他相關文章！