变量感知 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 来实现与旧版浏览器的兼容性。