快如闪电的新打包工具 - 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/