下一代打包工具 esbuild 理解与实践
2022/05/02
介绍
esbuild 是什么
esbuild 是一个使用 Go 语言编写的用于打包以及压缩 JavaScript、Typescript 代码的打包工具，它最大的特点就是打包速度特别快。vite在 dev 模式下就是使用 esbuild 进行打包。
下图是 esbuild 官网中 esbuild 与其他JavaScript 打包工具打包速度的对比：
为什么这么快？
- 源码由 Go 语言编写，并且被编译成 native 代码
- 大量使用并行操作
- 没有使用第三方依赖
- 内存的高效利用
目前支持的特性
- ESM 和 CommonJS 模块
- Tree shaking
- JavaScript 和 Go 的 API
- TypeScript 和 JSX 语法支持
- Source map 生成
- 代码压缩
- 自定义插件功能
esbuild 的使用
API 详解
esbuild 提供了 命令行、JavaScript、Go 三种调用方式。下面使用的都是 JavaScript 调用方式。
esbuild 提供了 2 个函数： transform 、 build。
Transform API
transform 可以将 JavaScript、TypeScript、JSX、TSX 的代码输出为旧语法的 JavaScript 代码。
transform 接受两个参数并返回一个Promise。
传入的两个参数是：
- 第一个参数为字符串，必填，内容为需要转换的代码；
- 第二个参数是对象，可选，内容为esbuild 的配置项，比如源文件路径 sourcefile、需要加载的 loader。
返回的Promise对应的 TransformResult 为一个对象，它会包含转化后的 JavaScript 代码、SourceMap 以及警告信息：
下面是一个简单的例子：
transform 是在一个单一的字符串上操作而无需访问文件系统，这使得它非常适合在没有文件系统的环境中使用（如浏览器）或作为另一个工具链的一部分。
Build API
build会对文件系统中的一个或多个文件进行操作。这使得文件可以相互引用，并被编译在一起，它还会将转换后的代码压缩并生成.js文件到指定output目录。
build 只提供了一个参数（对象），来指定需要转化的入口文件、输出文件、loader 等选项：
下面是一个简单的例子：
搭建 React 开发环境
在简单的介绍完 esbuild 后，我们使用 esbuild 来搭建一个完整的 React 开发环境。
支持的特性
- 类型检查：TypeScript
- CSS 预处理器：Sass
- 代码检查：ESLint
目录结构
初始化项目
先初始化一个 npm 项目
package.json配置
页面模板
存放在 public 目录下。
本地测试服务器配置
使用 node 的 http 模块作为本地服务器。
bundler 配置
1) 配置 esbuild
2) 实现 bundler，具有 serve 与 build两个模式，serve会启动一个开发服务器，build仅进行构建，会将构建产物放在 dist 目录。
ESLint 配置
1) 安装依赖
2) 配置 .eslintrc.js
实现脚手架工具
每次初始化 react-template 都很麻烦，我们来实现一个 esbuild 脚手架工具来完成内容的快速构建。
P.S.详细的脚手架实现可以阅读参考文章第二篇。
目录结构
初始化项目
package.json 配置
脚手架入口文件定义
配置脚手架问答交互。
项目创建逻辑配置
1) 使用 axios 获取 github（或者 github 的类似产品，比如 gitee） 上的模板 repo 信息
2) 拉取 github（或者 github 的类似产品，比如 gitee）上的 react-template 模板并创建目录
3) 根据用户命令创建相应的目录