下载掌阅APP，畅读海量书库
立即打开
ESBuild是一个用Go语言编写的JavaScrip、TypeScript打包工具，如图3-23所示。ESBuild有两大功能，分别是bundler与minifier，其中bundler用于代码编译，类似babel-loader、ts-loader；minifier用于代码压缩，类似terser。
图3-23 ESBuild构建工具Logo
大多数前端打包工具是基于JavaScript实现的，而ESBuild则选择使用Go语言编写，两种语言各自有其擅长的场景，但是在资源打包这种CPU密集型场景下，Go语言天生具有多线程运行能力，因此更具性能优势。
ESBuild官方网址为https://esbuild.github.io/。
ESBuild是由Figma的CTO（Evan Wallace）基于Go语言开发的一款打包工具，相比传统的打包工具，主打性能优势在于构建速度上可以快10~100倍。
说明： Figma是一个基于浏览器的协作式UI设计工具。Figma Inc.创立于2012年10月1日，总部位于美国加州旧金山，开发了多人协作界面设计工具，可使整个团队的设计过程在一个在线工具中进行。
ESBuild项目的主要目标是：开辟一个构建工具性能的新时代，创建一个易用的现代打包器。现在很多工具内置了它，例如熟知的Vite、Snowpack。借助ESBuild优异的性能，Vite更如虎添翼，编译打包速度显著提升。
ESBuild的主要特征有以下几点：
（1）打包时极致的速度，不需要缓存。
（2）支持Source Maps。
（3）支持压缩、支持插件。
（4）支持ES6和CommonJS模块。
（5）支持ES6模块的Tree Shaking。
（6）提供JavaScript和Go的API。
（7）支持TypeScript和JSX的语法。
ESBuild的代码压缩功能非常优秀，其性能比传统的压缩工具高一个量级以上。Vite在2.6版本也官宣在生产环境中直接使用ESBuild来压缩JS和CSS代码。
Vite在开发阶段使用ESBuild进行依赖的预打包，将所有用到的第三方依赖转换成ESM格式Bundler产物，并且未来有用到生产环境的打算。
对于小程序的编译场景，也可以使用ESBuild来代替Webpack，大大提升编译速度，对于AST的转换则通过ESBuild插件嵌入SWC实现，从而实现快速编译。
Web场景就显得比较复杂了，对于兼容性和周边工具生态的要求比较高，例如低浏览器语法降级、CSS预编译器、HMR等，如果要用纯ESBuild来做，则还需要补充很多能力。
下面通过一个简单的Demo演示ESBuild如何编译打包React项目。
首先需要安装React、ReactDOM库，命令如下：
创建一个App.jsx组件页面，代码如下：
在package.json文件中添加一个编译命令，命令如下：
执行脚本命令，命令如下：
