js中怎么动态获取import的变量？

Question

比如以下代码：

import x1 from "xxx"
import x2 from "xxx"
import x3 from "xxx"

import的变量名称是有规律的，我想动态去获取这些变量，比如：

[1,2,3].forEach(i => {...})

eval('x1')和new Function('return x1')这样写不行，是写的有问题吗？或者有什么其他的方法？

Answer 1

静态 import 语句不能放在可执行的语句后面，所以用可执行的语句动态生成其语句中的模块名是不可能的（自定义 babel 插件除外）。
由于这个限制，静态 import 不能做到运行时的按需引入。
不过 import x1 from 'xxx' 是导入默认模块，导入的时候是可以随便命名的，所以没必要纠结这个模块名（如果题主关心的是模块名，而不是动态导入的话），写成“李狗蛋”也不会有问题。
或者你就先 import 进来，然后给它重新命名，有点多此一举。

不过动态 import 是可以按需引入的，引入后返回一个 Promise，在回调里你可以随心所欲地重命名模块，配置下构建工具或者升级浏览器就可以：

[1,2,3].forEach(async i => {
    const currentModule = await import(`module-path/${i}.mjs`);
    // ...
})

（语法大致如此，不保证运行结果正确）