在 ES6 中，我们可以使用 import 语句来引入模块，这个语法看起来很简单，但是它有一个致命的局限性：不支持动态路径，也就是说，我们无法使用变量或表达式来构建引入路径。例如，我们希望根据用户的选择来引入不同的模块，这时我们就需要解决这个问题。
问题描述
举个例子，我们有两个模块 moduleA.js 和 moduleB.js，它们分别实现了不同的功能。我们希望根据用户的选择来引入其中之一，可以这样写：
const moduleName = 'moduleA';
import { func } from `./${moduleName}.js`;但这样是行不通的，因为 import 语句只支持静态路径。
解决方案
有两种解决方案可以解决这个问题：
1. 使用 require 方法
我们可以使用 require 方法来代替 import 语句。虽然 require 是 CommonJS 规范的语法，但是在 Node.js 环境下也可以使用，而且支持动态路径。我们可以这样写：
const moduleName = 'moduleA';
const { func } = require(`./${moduleName}.js`);这样就可以根据变量来动态地引入模块了。
2. 使用 import() 方法
在 ES6 中，我们可以使用 import() 方法来动态地引入模块。这个方法返回一个 Promise 对象，当异步加载完成后，Promise 的状态变为 resolved，返回一个包含模块导出的对象。我们可以这样写：
const moduleName = 'moduleA';
const module = await import(`./${moduleName}.js`);
const { func } = module;需要注意的是，import() 方法是一个异步方法，所以我们需要使用 async/await 或者 Promise 的 then 方法来处理异步加载完成的情况。
示例代码
下面是完整的示例代码，我们创建了两个模块 moduleA.js 和 moduleB.js，分别实现了不同的功能，然后根据用户的选择来引入其中之一。
moduleA.js
export function func() {
console.log('function from moduleA.js');
}moduleB.js
export function func() {
console.log('function from moduleB.js');
}main.js
-- -------------------- ---- ------- ----- ---------- - ---------- -- -- ------- -- ----- - ---- - - ------------------------------ ------- -- -- -------- -- ---------------------------------------- -- - ----- - ---- - - ------- ------- ---
总结
在 ES6 中，import 语句不支持动态路径，但是我们可以使用 require 方法或者 import() 方法来实现动态加载模块的目的。为了让代码更加清晰，我们建议将所有的模块引入放在文件的开头，然后根据用户的选择来选择相应的模块。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e18880f6b2d6eab3cb4adc