如何让esbuild打包包含动态导入的模块？

我有一个包含动态导入的模块，代码如下（index.mjs）：

...
const components = [
 'fer-dialog',
 'welcome-description',
 'welcome-diagram',
 'welcome-feedback',
 'welcome-logo',
]

for (let i = 0; i < components.length; ++i) {          
  import(`${pathname}/component/${components[i]}/index.mjs`)
}
....

我的esbuild配置如下：

...
const buildParams = {
  entryPoints: ["./index.mjs"],
  outfile: '../build/index.mjs',
  format: "esm",
  target: "es2022",
  loader: {  '.css': 'copy', '.data': 'base64' , ".js": "jsx",".ttf":"base64", ".json": "copy", ".png": "file", ".jpeg": "file", ".jpg": "file", ".svg": "dataurl", ".woff": "file" },
  color: true,
  minify: true,
  bundle: true,
  sourcemap: true,
  mainFields : [ 'module' , 'main' ],
  define,
  logLevel: "error",
  external: ["*.gif"]
...

目前打包后的文件并未包含这些动态导入的模块，请问是否有插件或方法可以将动态导入的模块加入到打包文件中？

esbuild默认仅解析静态可分析的动态导入路径，你当前的代码用变量拼接动态路径（${pathname}/component/${components[i]}/index.mjs），导致esbuild无法提前识别要导入的模块，因此未将组件打包进去。以下是几种可行解决方案：

1. 改为静态枚举的动态导入 #

把循环替换成明确的静态导入列表，让esbuild直接识别所有需打包的模块：

// 替换原循环代码
await Promise.all([
  import(`${pathname}/component/fer-dialog/index.mjs`),
  import(`${pathname}/component/welcome-description/index.mjs`),
  import(`${pathname}/component/welcome-diagram/index.mjs`),
  import(`${pathname}/component/welcome-feedback/index.mjs`),
  import(`${pathname}/component/welcome-logo/index.mjs`),
]);

这种方式最简单，适合组件列表固定的场景，esbuild会自动将这些模块打包进主文件。

2. 开启代码分割（生成独立chunk） #

若不想把组件打包进主文件，而是生成单独的chunk文件，可调整配置：

• 将outfile替换为outdir（代码分割需要输出目录，无法使用单个文件）
• 添加splitting: true参数

修改后的配置片段：

const buildParams = {
  entryPoints: ["./index.mjs"],
  outdir: '../build', // 替换outfile为outdir
  format: "esm",
  splitting: true, // 开启代码分割
  // 其他配置保持不变...
}

需确保pathname是相对当前模块的静态路径（比如./），esbuild会将动态导入的模块打包为独立chunk，放在outdir下，运行时自动加载。

3. 自定义插件强制解析动态路径 #

若必须保留循环动态导入的写法，可编写简单的esbuild插件，手动告知esbuild要打包的模块：

const componentImportsPlugin = {
  name: 'component-imports',
  setup(build) {
    // 拦截动态导入的路径解析
    build.onResolve({ filter: /\/component\/.*\/index\.mjs$/ }, args => {
      // 手动返回模块绝对路径，触发esbuild打包
      return { path: require.resolve(args.path, { paths: [args.resolveDir] }) };
    });
  },
};

// 在buildParams中添加插件
const buildParams = {
  // 其他配置...
  plugins: [componentImportsPlugin],
}

这种方式需保证components数组中的模块路径能被正确解析，适合需要动态生成导入列表的场景。

关键注意事项 #

• pathname必须是静态可确定的路径，不能是运行时才赋值的变量，否则esbuild无法提前解析
• 开启bundle: true后，esbuild仅打包它能静态分析到的模块，动态路径需符合其解析规则

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