打包工具:编译器ESBuild

  • 作者: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. 使用

js 复制代码
npm install esbuild -D
js 复制代码
//# 把 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 开发模式大量用这个)
js 复制代码
// 运行:`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))
js 复制代码
// transform例子,只编译一段ts代码,不读文件
const result = await esbuild.transform(`let a:number = 1`, {loader:'ts'})
console.log(result.code)
相关推荐
szarron13 小时前
VNA6 便携式矢量网络分析仪|1MHz‑6.3GHz 手持 VNA 真实应用场景全解析
前端·嵌入式硬件·信息可视化·数据挖掘·数据分析
Reisentyan13 小时前
B站首页,点击视频卡片之后首页自动刷新的问题
前端
默_笙13 小时前
🚕 缺料就出门买:给 RAG 装上"信息够不够"的判断力
前端·javascript
丑陋小蚊子13 小时前
有作品集的岗位,简历和作品各写什么?
面试·求职招聘·大学生·简历·简历下载
Liora_Yvonne13 小时前
同样用 Element Plus,为什么你的后台总有一股“模板味”?
前端
葡萄城技术团队13 小时前
用 Sheet 页导航视图管理复杂 SpreadJS 工作簿
前端
志尊宝13 小时前
Vue3 零基础每日笔记(054):Pinia 三件套详解——state / getters / actions 全搞懂
前端·javascript·vue.js·vue·前端开发
Caroline51613 小时前
GPT Image 2.5还能这么玩!一套提示词生成IP吉祥物,附完整案例
前端·gpt·tcp/ip
wangyadong31713 小时前
# el-table 复选框无法选中问题记录
前端·javascript·vue.js
葡萄城技术团队14 小时前
给 SpreadJS 单元格装上自动完成
前端