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中文网其他相关文章！