ES6 如何通过字符串动态引用已导入的模块导出对象

原代码无法生效的原因是：things数组存储的是普通字符串，和你提前导入的Foo、Bar、Baz模块对象没有关联，直接调用字符串的doSomething方法会抛出方法不存在的错误。

方案1：手动构建映射表（优先推荐） #

将导入的对象统一存入键值对结构中，键为对应的匹配字符串，值为导入的模块对象，即可通过字符串直接索引到目标对象：

import { Foo } from 'path/to/foo';
import { Bar } from 'path/to/bar';
import { Baz } from 'path/to/baz';

// 字符串与导入对象的映射表
const moduleMap = {
  Foo,
  Bar,
  Baz
};

const things = ['Foo', 'Bar', 'Baz'];

things.forEach(thing => {
  // 可选链避免匹配不到时抛出错误
  moduleMap[thing]?.doSomething();
});

该方案的优势：

• 完全符合ES模块静态规范，所有打包工具都可以正常做静态分析、tree-shaking优化
• 没有异步逻辑，运行性能最高
• 配合TypeScript可以轻松实现完整的类型校验

方案2：动态导入（适合模块量极大的场景） #

如果需要匹配的模块数量极多，手动写映射表成本太高，可以使用ES模块的动态导入语法，直接通过路径字符串加载对应模块：

const things = ['foo', 'bar', 'baz'];

things.forEach(async moduleName => {
  // 按路径规则动态加载模块
  const module = await import(`path/to/${moduleName}`);
  // 匹配首字母大写的导出对象
  const targetModule = module[moduleName.charAt(0).toUpperCase() + moduleName.slice(1)];
  targetModule?.doSomething();
});

该方案的注意事项：

• 动态导入是异步操作，需要处理异步执行逻辑
• 打包工具会将所有匹配路径规则的模块全部打包，可能会增大产物体积
• 部分严格的打包环境需要额外配置支持动态导入的路径解析

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