如何在esbuild中将文件夹配置为外部资源及忽略路径错误

1. 批量指定目录下所有内容为外部资源 #

esbuild的external配置支持通配符匹配，你可以用递归通配符来指定整个目录下的所有资源。如果要匹配/plugin/MyPlugin/assets/下的所有文件（包括子目录里的），直接把external配置改成["/plugin/MyPlugin/assets/**/*"]就行。修改后的构建代码如下：

const { build } = require('esbuild');

await build({
      entryPoints: ['./src/index.js'],
      bundle: true,
      platform: "browser",
      format: "esm",
      outfile: './dist/bundle.js',
      external: ["/plugin/MyPlugin/assets/**/*"]
});

这样不管你CSS里引用的是该目录下的图片、字体还是其他资源，都会被标记为外部资源，不会被打包进最终的bundle里。

2. 路径未解析/找到时避免构建报错 #

有两种常用方法可以实现：

• 调整日志级别：把logLevel设为'warning'，这样esbuild遇到未找到的路径只会输出警告，不会终止构建：

await build({
      // 其他原有配置...
      logLevel: 'warning'
});

• 用插件钩子自定义处理：如果需要更精准控制特定路径，可通过onResolve钩子捕获目标路径，直接标记为外部资源跳过解析：

await build({
      // 其他原有配置...
      plugins: [
        {
          name: 'handle-missing-paths',
          setup(build) {
            build.onResolve({ filter: /.*/ }, args => {
              // 仅针对指定目录下的路径做处理
              if (args.path.startsWith('/plugin/MyPlugin/assets/')) {
                return { external: true };
              }
            });
          }
        }
      ]
});

这种方式灵活性更高，能只处理你关心的路径，不影响其他资源的正常解析。

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