如何为esbuild设置绝对路径解析的根目录？

你遇到的问题是ESBuild默认将以/开头的导入路径解析为文件系统根目录（Windows下就是磁盘根，比如C:\），而浏览器中这类路径是相对于Web根目录的。要让ESBuild把这类绝对路径映射到你的项目根目录，有两种便捷的解决方案：

方案1：设置绝对工作目录（推荐） #

使用ESBuild的--abs-working-dir命令行参数，指定你的项目根目录作为解析绝对路径的基准。

如果你的项目根在C:\my-project，打包命令可以写成：

esbuild src/main.js --bundle --outfile=dist/bundle.js --abs-working-dir=C:\my-project

如果直接在项目根目录下执行命令，用相对路径指定即可：

esbuild src/main.js --bundle --outfile=dist/bundle.js --abs-working-dir=./

这样ESBuild就会把/util/util.js解析为项目根下的util/util.js，而非磁盘根目录。

若使用ESBuild配置文件（比如esbuild.config.js），可添加absWorkingDir字段：

require('esbuild').build({
  entryPoints: ['src/main.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  absWorkingDir: __dirname, // __dirname对应配置文件所在的项目根目录
}).catch(() => process.exit(1))

方案2：使用别名映射 #

如果仅需针对特定路径做映射，可使用ESBuild的alias配置：

require('esbuild').build({
  entryPoints: ['src/main.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  alias: {
    '/util': './util' // 将所有以/util开头的导入映射到项目根的util目录
  },
}).catch(() => process.exit(1))

这种方式适合需要对不同根路径做差异化映射的场景，但如果有大量根路径需要处理，方案1更高效。

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