變數感知 ES6 導入

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

靜態導入

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

Loader API

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

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

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

相容性注意事項

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