如何实现等价于import * some_module的整个模块动态导入？

嘿，这个问题我之前也碰到过！静态导入的import * from some_module能把模块所有导出直接挂到当前作用域，但动态导入import('module')默认只返回模块对象。不过咱们可以手动处理模块对象，把所有导出属性挂载到目标作用域（全局或者局部），实现和静态导入一样的效果。

核心思路 #

动态导入返回的是一个Promise，resolve后得到的是模块的命名空间对象——这个对象包含了模块所有的导出内容（包括命名导出和默认导出）。我们只需要遍历这个对象的属性，把它们逐个添加到想要的作用域里就行。

具体实现示例 #

1. 浏览器环境（挂载到全局window）

async function importAll(modulePath) {
  // 动态导入模块，等待Promise resolve
  const moduleNamespace = await import(modulePath);
  
  // 遍历模块的所有导出属性
  for (const [exportName, exportValue] of Object.entries(moduleNamespace)) {
    // 把每个导出挂载到全局window对象
    window[exportName] = exportValue;
  }
  
  // 单独处理默认导出（如果需要的话）
  if ('default' in moduleNamespace) {
    // 可以给默认导出自定义一个全局变量名，比如这里用模块名的驼峰式
    const defaultExportName = modulePath.split('/').pop().replace('.js', '');
    window[defaultExportName] = moduleNamespace.default;
  }
}

// 使用示例：导入你的some_module
importAll('./some_module.js').then(() => {
  // 现在直接用模块里的a、b变量就不会报错了！
  console.log(a);
  console.log(b);
});

2. Node.js环境（挂载到全局global）

async function importAll(modulePath) {
  const moduleNamespace = await import(modulePath);
  
  for (const [exportName, exportValue] of Object.entries(moduleNamespace)) {
    global[exportName] = exportValue;
  }
  
  // 处理默认导出
  if ('default' in moduleNamespace) {
    const defaultExportName = modulePath.split('/').pop().replace('.js', '');
    global[defaultExportName] = moduleNamespace.default;
  }
}

// 使用示例
importAll('./some_module.js').then(() => {
  console.log(a); // 直接访问模块导出的变量
});

3. 批量导入多个模块（适配你的全局模块场景）

如果需要通过一个函数导入多个模块，可以封装一个批量处理的函数：

async function importMultipleModules(modulePaths) {
  // 逐个导入并挂载
  for (const path of modulePaths) {
    await importAll(path);
  }
}

// 一次性导入多个模块
importMultipleModules(['./moduleA.js', './moduleB.js', './some_module.js']).then(() => {
  // 所有模块的导出都已挂载到全局
});

重要注意事项 #

• 作用域污染问题：这种方式会把模块导出的变量全部放到全局作用域，如果多个模块有同名导出，后面导入的会覆盖前面的，容易引发bug。如果不是必须全局访问，更推荐直接通过模块对象访问（比如const mod = await import(...)然后用mod.a），代码更清晰可控。
• 异步特性：动态导入是异步操作，所有依赖这些导入变量的代码必须放在then回调里，或者用async/await包裹，否则会出现变量未定义的错误。
• 严格模式限制：在严格模式下，不能直接在函数中隐式添加全局变量，必须明确使用window（浏览器）或global（Node.js）来挂载。

内容的提问来源于stack exchange，提问作者Rohi