返回

esbuild实践探索

前端

最近在开发公司的一个处于发展初期的项目，简单说就是一个monorepo的库，那么选择打包工具是必然要做的事情。作为一个npm包，webapck是必然不在考虑范围内了，另外一个选择是rollup，但最后选择了esbuild。

最直接的原因是快（在官网截了一张图）。仔细推演了之后发现，esbuild的这番速度优化并不是没有代价的。同时，esbuild也没有对Vue/React这种复杂框架的tree shaking能力。

基于以上两点，我认为esbuild比较适合以下场景：

  1. 纯js库，无需考虑tree shaking
  2. 纯静态文件打包，不涉及模板或者其他编译步骤
  3. 开发时进行快速本地编译

本文就基于以上场景，结合实战，来说一说esbuild的使用。

安装

npm install esbuild --save-dev

基本使用

esbuild src/index.js --bundle --outfile=dist/index.js

其中：

  • src/index.js 是源文件
  • dist/index.js 是打包后的文件
  • --bundle 表示打包
  • --outfile 表示输出文件

进阶配置

压缩

esbuild src/index.js --bundle --minify --outfile=dist/index.js

其中，--minify 表示压缩。

SourceMap

esbuild src/index.js --bundle --sourcemap --outfile=dist/index.js

其中，--sourcemap 表示生成SourceMap。

格式化

esbuild src/index.js --bundle --format=esm --outfile=dist/index.js

其中，--format 表示指定输出格式，可以是以下值之一：

  • esm：ES模块
  • cjs：CommonJS模块
  • iife：立即执行函数表达式

外部依赖

esbuild src/index.js --bundle --external:lodash --outfile=dist/index.js

其中，--external 表示指定外部依赖，即不打包到输出文件中。

热重载

esbuild --serve src/index.js --bundle --sourcemap --outfile=dist/index.js

其中，--serve 表示开启热重载。