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

发布:elantion 日期:2021-04-01 阅读:707 评论:0

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

快才是真理

什么是高效?就是要快。esbuild 可以说是快到极致了,看下面的对比图:
6065326f3d5af57f1c14f6cb
感觉就不像是同一级别的对手。但是,凡事都是但是,它毕竟还嫩,有很多东西都还没完善,大家体验一下就好了,目前还不适宜迁移。

简单配置

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/