esbuild 入门：极速 JavaScript 打包工具实战
esbuild 用 Go 编写，强调构建或检查效率，具体收益需在项目中测量。本文讲解安装、打包/转译/压缩三大核心用法、ESM 输出、CSS 处理与开发服务器配置。
esbuild 是 Figma 联合用 Go 写的打包器，一行命令完成打包：esbuild app.ts --bundle --outfile=out.js。核心能力四件：转译（TS/JSX→JS）、打包（依赖图合并）、压缩（minify）、开发服务（serve + watch）。速度快到改变工作习惯——构建等待从咖啡时间变成瞬间。
本文涉及 Vite 架构时，以版本区分：Vite 7 及更早版本使用 esbuild／Rollup 的组合；Vite 8 已改用 Rolldown 与 Oxc。旧插件及构建选项迁移请按 Vite 8 迁移文档 检查，不能将旧版本的内部实现当作当前所有版本的行为。
为什么 esbuild 这么快
传统打包器用 JavaScript 写，受限于单线程与 JIT；esbuild 用 Go：多核并行解析、从零设计的 AST、减少不必要的对象分配与处理阶段。这些设计旨在减少构建开销，实际差异需在相同输入与输出要求下测量——Vite 7 及更早版本的依赖预构建、tsx 的 TS 执行，底层都是它。
安装与三种用法
npm install --save-dev esbuild
# 转译单文件
npx esbuild src/app.ts --outfile=dist/app.js
# 打包（递归依赖图）
npx esbuild src/app.ts --bundle --outfile=dist/bundle.js
# 生产构建：压缩 + 目标环境 + sourcemap
npx esbuild src/app.ts --bundle --minify --target=es2022 --sourcemap --outfile=dist/app.min.js
面向 ESM 与 Node 的输出
# ESM 格式输出（浏览器/现代 Node）
npx esbuild src/app.ts --bundle --format=esm --outfile=dist/app.mjs
# Node 平台：外部化 npm 依赖（不打包进产物）
npx esbuild src/server.ts --bundle --platform=node --packages=external --outfile=dist/server.js
--packages=external 是后端打包的关键：node_modules 不内联，产物干净、构建飞快、依赖由部署环境提供。
CSS 与静态资源
esbuild 原生处理 CSS（打包、压缩、嵌套语法）；图片等静态资源用 loader 配置：
require('esbuild').build({
entryPoints: ['src/app.ts'],
bundle: true,
outfile: 'dist/app.js',
loader: { '.png': 'file', '.svg': 'dataurl', '.css': 'css' },
});
file 复制文件并替换为路径，dataurl 内联为 base64（小图标适用）。
开发工作流：watch 与 serve
// dev.js
const ctx = await require('esbuild').context({
entryPoints: ['src/app.ts'],
bundle: true,
outfile: 'public/app.js',
sourcemap: true,
});
await ctx.watch(); // 文件变化自动重建
await ctx.serve({ port: 8000 }); // 内置静态服务器
esbuild 的 serve 适合简单场景；需要框架级 HMR（React Fast Refresh）时上 Vite——它内部用 esbuild 做转译，快的前提不变。
常见问题（FAQ）
Q：esbuild 能替代 webpack 吗？
看场景：打包+转译+压缩的核心能力完全可替代且快得多；webpack 的 loader 生态、Module Federation、复杂分包策略是 esbuild 不具备的。新项目无历史包袱→可以；存量复杂工程→不值得为此迁移。
Q：esbuild 做类型检查吗？
不做——它只转译（类型注解直接擦除）。类型安全交给 tsc --noEmit（CI 关卡）和编辑器。这是所有"快工具"（esbuild/swc/tsx）的共同设计。
Q：esbuild 和 swc 怎么选？
两者都是"编译型语言写的 JS 工具"。esbuild 打包能力完整；swc 转译插件能力更强（Next.js 用它）。应用打包选 esbuild/Vite，需要 Babel 式 AST 插件选 swc。
参考文档
本文依据公开文档整理，示例需按项目依赖版本验证；不将文档中的性能描述视为本项目实测结果。
