esbuild 构建工具简介

本文分享自天翼云开发者社区《esbuild构建工具简介》，作者：陈****冬

esbuild 是什么

esbuild 是采用 go 语言实现的新一代构建工具，其官方文档如下：esbuild.github.io/

其速度是目前已知的构建工具中速度最快的，但是 esbuild 为什么快以及其在实际过程中会遇的问题，是本文分析的重点，

以下将围绕 esbuild 的运用机制，基本构成，项目使用等各个方面做一个简单的分析。

esbuild 为什么这么快

简单来说可以总结为 2 点

1. go 的语言优势： js 的解释型语言的特质决定了在执行中需要不断的解释执行的过程，Go 语言编写的程序比 JavaScript 少了一个动态解释的过程；实际 go 代码执行时是开的多进程

2. 代码实现上，esbuild 使用比较克制，很多在 webpack 上使用插件实现的功能 如 loader， minify 等插件均使用的 go 实现的，在实际构建过程中，较少的插件，保证了结构的一致性（主要指 ast 处理，在 webpack 的处理中，需要对一个文件做 ast 处理，是 webpack → 字符串 →  ast → 字符串 → webpack 这样的一个过程，如果是多个 babel 则有多个这样的过程，esbuild 在实现过程中将这些 babel 直接写进了 go 代码中，所以保证了结构一致性。），提升了构建速度。

esbuild 的基本构成

esbuild 的基本构成大约可以分为 api，以及 plugin 两个部分。api 可以分为 transformApi，buildApi 两部分组成，以下会对这两部分做简单的介绍，其中，配置部分主要是在构建过程中的一些配置项。

transformApi

transformApi 可以理解成 esbuild 独立提供的工具函数库，可以在脱离文件系统下使用，并且相对于传统的 js 插件，速度更快，这使得 esbuild 能在其他的构建工具（如 vite，snowpack 等）得到应用。同时，也有一些第三方的 webpack 插件（如 esbuild-loader 既是采用这个思路实现）。 

buildApi 

buildApi 和 transformApi 不同的是 buildApi 在使用过程中和文件系统是相绑定的，所以不能单独使用，只能在 esbuild 构建过程中使用，其中，这部分的功能包括 bundle，format，全局变量，serve 等。 

plugin

plugin 提供的功能是和 webpack 的 plugin 相类似的，支持 go 代码和 js 代码。  如果分析开源代码，不难发现，很多功能都是把现有的第三方工具库做一个封装实现的，还是采用 js 的方式实现的。这种方式实际上是有一定的缺陷的，因为原本的 esbuild 是采用 go 语言实现，这个过程是很快的，然而在这个过程中使用 js 的话，会一定程度上导致原本的 js 构建速度变慢。 

esbuild 在实际工程化中的缺陷

1.自带的 loader 只支持固定的几种类型，缺少对 vue，sass，less 等相关的语法的支持，需要自行用 js 开发插件，虽然社区提供了相关的插件，但是由于都是采用 js 编写的，很多插件处理的源代码依然采用开源的 loader 处理，相关的解析逻辑依然是采用的第三方开源库，且均是采用 js 编写的，这种 js 编写的代码在解析上仍然存在执行慢的情况。

2.esbuild 不支持热加载，在每一次编辑之后需要重新构建一次，针对这三个问题，官方给出了三种解决方案

     1. 使用 watch 监听文件变化，在每一次文件变化之后重新构建

     2. 配置你的 IDE 在你每次保存代码时执行 esbuild

     3.用第一个本地服务来提供你的代码，在每次请求时都执行一次 rebuild

针对这种重新构建的情况，如果打包速度快，是没有太大影响的，但是如果加入多种的插件可能会导致在开发过程中的 build 变慢，影响开发速度。

3.对非 esm 类型的包不支持 split。

4.为了保持结构的一致性，没有提供转化的 ast 的 api。这点影响非常大，说白了无法通过 babel-plugin 来做相关的转换。 

总结

1.可以看到 esbuild 在实际的开发上秉承着极速和克制的原则，在一些功能的支持上并没有特别的全，所以有一部分的功能需要专门的 js 插件来实现。

2.esbuild 没有提供专门的 ast 生成接口，导致做一些按需引入的功能上比较困难，如 babel-plugin-import 类似的功能。

3.热加载功能的缺失。

4.esbuild 自带的 transform ，babel 等功能实际是可以独立出来的 api，使用相关的 api 替代 webpack 相关的 plugin 也能获得不菲的收益

5.esbuild 不是像 webpack 一样的大一统项目，提供完善的插件机制，而是在极度精简之后的打包工具，快是 esbuild 追求目标