使用Esbuild构建时如何复制node_modules内部依赖的静态文件？

Esbuild本身没有内置处理第三方依赖静态文件的功能，但可以通过以下几种方式实现需求：

方法1：自定义Esbuild插件 #

写一个简单的插件，在构建完成后自动复制指定依赖的静态文件目录。

示例代码：

const esbuild = require('esbuild');
const fs = require('fs-extra');
const path = require('path');

const copyDepStaticFiles = {
  name: 'copy-dep-static-files',
  setup(build) {
    build.onEnd(async () => {
      // 替换成你需要处理的依赖包名
      const targetDeps = ['package-a', 'package-b'];
      const outputDir = './dist';

      for (const dep of targetDeps) {
        // 依赖的静态文件目录，根据实际情况改成dist或build
        const depStaticDir = path.join(__dirname, 'node_modules', dep, 'dist');
        if (await fs.pathExists(depStaticDir)) {
          const destPath = path.join(outputDir, 'vendor', dep);
          await fs.copy(depStaticDir, destPath);
          console.log(`已复制 ${dep} 的静态文件到 ${destPath}`);
        }
      }
    });
  },
};

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: './dist/index.js',
  plugins: [copyDepStaticFiles],
}).catch(err => {
  console.error(err);
  process.exit(1);
});

这个插件会在Esbuild构建结束后，把指定依赖的dist目录完整复制到输出目录的vendor子文件夹下，可按需调整依赖列表和目标路径。

方法2：结合脚本工具批量复制 #

如果不想写插件，直接在构建命令后追加复制操作即可。

方式A：用Shell/CMD命令 #

在package.json的scripts中添加：

{
  "scripts": {
    "build": "esbuild src/index.js --bundle --outfile=dist/index.js && cp -r node_modules/package-a/dist/* dist/vendor/package-a/ && cp -r node_modules/package-b/build/* dist/vendor/package-b/"
  }
}

Windows环境下替换成xcopy命令：

{
  "scripts": {
    "build": "esbuild src/index.js --bundle --outfile=dist/index.js && xcopy node_modules\\package-a\\dist dist\\vendor\\package-a /E /I && xcopy node_modules\\package-b\\build dist\\vendor\\package-b /E /I"
  }
}

方式B：用copyfiles包批量处理 #

先安装依赖：

npm install copyfiles --save-dev

然后配置脚本：

{
  "scripts": {
    "build": "esbuild src/index.js --bundle --outfile=dist/index.js && copyfiles -u 3 node_modules/**/{dist,build}/**/* dist/vendor/"
  }
}

-u 3表示移除路径前3层（即去掉node_modules/xxx/dist/的前3级目录），把静态文件直接放到dist/vendor/下，可根据实际路径调整层级数。

方法3：让Esbuild自动打包引用的资源 #

如果依赖的静态文件是被代码直接引用的（比如import 'package-a/dist/style.css'或import img from 'package-a/dist/logo.png'），可以通过Esbuild的配置自动处理：

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outdir: './dist',
  assetNames: 'assets/[name]-[hash]',
  publicPath: '/',
  loader: {
    '.png': 'file',
    '.svg': 'file',
    '.css': 'css',
    '.woff2': 'file',
  },
}).catch(err => {
  console.error(err);
  process.exit(1);
});

这种方式仅适用于代码中明确引用的静态文件，未被引用的文件还是需要用前两种方法复制。

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