打包工具：编译器ESBuild

蔓越莓
0 阅读2分钟
  • 作者：Evan Wallace（GitHub：evanw）
  • 公司背景：他是 Figma 的联合创始人 & 前 CTO，esbuild 是个人开源项目，不属于 Figma 公司，只是作者在 Figma 任职期间开发出来的。
  • 实现语言：Go 语言，2020 年正式发布。
  • 定位： 主打编译器（同时内置三合一：编译器 + 打包器 + 压缩器）
  • 优点：
    • 快
    • 内置三合一，同时拥有编译打包压缩
  • 缺点：
    • 生态弱
    • 语法降级能力有限（不做 polyfill）
    • dev环境简陋，没有成熟的热更新
  • 主要使用场景：
    • vite2-6版本的开发阶段的 依赖预构建，vite8用其他的替换esbuild了；
    • webpack里可以用esbuild-loader插件替代babel-loader插件
    • 打包轻量的SDK、Node脚本、小工具库、单独做代码压缩等

一句话记住：

主要是【编译器】，编译很快，顺便有打包的；

编译快的原因是Go写的，cpu并行处理；

业务一般不直接使用，是打包器Vite的底层引擎；

1. 什么是 ESBuild

ESBuild 是用 Go 语言写的 JavaScript/TypeScript 编译、打包工具。

核心卖点：速度极快，比 Webpack 快几十上百倍。

Go 是编译型语言，CPU 多核并行处理；

而 webpack 是 JS，单线程，性能瓶颈大。

⚠️ 注意：ESBuild 更多是底层引擎，不是完整工程化工具。

Vite、Rspack、Taro 内部都在大量使用 esbuild，但一般业务项目不会直接裸用 esbuild 做完整项目。

2. ESBuild 能做什么

定位：高速编译器，不是完整脚手架

  1. 转译语法：TS → JS、ES6+ 语法降级到 ES5、JSX 编译
  2. 打包 bundle：把多个文件合并成一个文件
  3. 压缩 minify：代码压缩混淆
  4. 处理 css：css 打包、压缩
  5. 提供 API：命令行 + JS API，供别的工具调用

不能 / 不擅长的

  • 没有强大的插件生态（对比 webpack）
  • 不做复杂的热更新、devServer（有简单的 serve，但很简陋）
  • 不支持完整的 HMR
  • 不适合直接做大型 SPA 完整工程

⚠️重点：esbuild 只转语法，不会自动引入 core‑js 做 API 兼容。例如 Promise、Array.prototype.includes 这些新 API，esbuild 不会帮你补，需要自己处理。

3. 使用

npm install esbuild -D

//# 把 src/index.ts 打包输出到 dist/bundle.js
esbuild src/index.ts --bundle --outfile=dist/bundle.js

//# 打包+压缩+es5
esbuild src/index.ts --bundle --minify --target=es5 --outfile=dist/bundle.js
  • buildAPI：完整打包，处理依赖、文件系统，输出文件（打包用）
  • transformAPI：只做字符串转译，不读取磁盘，只处理一段代码（Vite 开发模式大量用这个）
// 运行：`node build.js`
const esbuild = require('esbuild')

esbuild.build({
  entryPoints: ['./src/index.ts'], //入口
  bundle: true,
  minify: true,
  target: 'es5',
  outfile: './dist/bundle.js'
}).catch(()=>process.exit(1))



// transform例子，只编译一段ts代码，不读文件
const result = await esbuild.transform(`let a:number = 1`, {loader:'ts'})
console.log(result.code)
avatar
文章
阅读
粉丝