快如闪电的新打包工具 - esbuild

我是个老的前端工程师了，经历过YUI，Grunt，Gulp，Webpack，RollUp 等工具的时代，不敢说对所有工具都了如指掌，但基本的使用体验还是很清楚的。目前最熟悉，也最流行的就是Webpack了，有着最成熟的解决方案，几乎可以处理所有前端的构建需求，但是它构建速度并不快，如果文件变多了，速度会慢得让人抓狂。为了不加班，我决定尝试一下新的构建工具：esbuild（它官名就是全小写的）。

快才是真理

什么是高效？就是要快。esbuild 可以说是快到极致了，看下面的对比图：

感觉就不像是同一级别的对手。但是，凡事都是但是，它毕竟还嫩，有很多东西都还没完善，大家体验一下就好了，目前还不适宜迁移。

简单配置

webpack的配置其实并不复杂，esbuild其实也差不多，一个简单的配置文件如下（build.js）：

require('esbuild').build({
  entryPoints: ['app.jsx'],
  bundle: true,
  outfile: 'out.js',
}).catch(() => process.exit(1))

执行构建也很直观，就是用node.js来直接执行配置文件：

node build.js

而且最爽的就是，它默认内置了许多目前非常流行的配置，例如：jsx，TypeScript等，省去很多重复的操作，还可以直接配置目标浏览器，连babel都省了。

常用的配置

以下是我常用的一些配置，可以参考一下：

多入口

esbuild 的多入口配置（entryPoints）有两种方式，一个是直接输入数组，包含各个入口文件，例如：['index.ts', 'worker.js']。另外一种跟webpack一样，输入一个包含输入和输出的对象：
{"entry/index": "entry/index.ts", "thread/worker": "thread/worker.js"}，这种方式可以保留文件夹的结构。参考：

const config = {
    entryPoints: {
        "entry/index":"entry/index.ts",
        "thread/worker": "thread/worker.js"
    },
    // 支持 chrome76 版本以上
    target: ['chrome76'],
    outdir: 'dist',
    // 打包成一个独立文件
    bundle: true,
};
esbuild.build(config);

监视模式

webpack利用watch参数可以直接切换至监视模式，当文件更改时，立该就重新打包。esbuild 稍微原始一点，要在参数上加上watch属性，如下（build.js）：

const config = {
    watch: true,
    // 省略其它配置
};

如果希望在命令行执行时切至监视模式，如：

node build.js --watch

可以改成这样（build.js）：

const config = {
    watch: process.argv.includes('--watch'),
    // 省略其它配置
};

其实复杂程度也还能接受吧。

后话

esbuild 现在内置在热度非常高的工具：vite，它们都有一个使命就是加快现在的构建流程，减少不必要的工作，如果你也喜欢这个工具，可以去官网看看，也可以支持一下：

https://esbuild.github.io/