扫一扫分享
为什么又要构建一个 JavaScript 构建工具呢?因为当前用于 Web 的构建工具比用户期望的性能至少慢一个数量级。我希望这个项目可以作为一种“存在证明”,证明我们的 JavaScript 工具实际上能比现在快得多。
我想到的用例是打包用于生产的大型代码库。这个流程包括压缩代码以减少网络传输时间,以及生成源映射(对于调试生产中的错误是非常重要的)。理想情况下,构建工具还应该具备快速构建能力,而不必先预热缓存。
我的主基准测试会将 three.js 库复制 10 次并从头开始构建单个包,过程中没有任何缓存,从而模拟一个大型代码库。在这个基准测试中,esbuild 比我测试的其他 JavaScript 打包器(webpack、Rollup、Parcel 和 FuseBox)快 10-100 倍。这个基准测试可以使用’make bench-three’来运行。
时间数据取三次运行中最好的一次,主要运行环境如下:
几个原因:
目前支持:
这是我在 2019-2020 年寒假期间写的一项业余爱好项目。我相信它是相对完整和实用的。但它是全新的代码,可能有很多错误。还没有任何人在生产中使用过它。使用风险自负。
还请记住,它并不完全支持将现代语言语法降低到早期语言版本。目前只有类字段和 nullish 合并运算符是支持的。
我个人不想运营一个大型的开源项目,因此我目前没在寻求贡献。
如果你已安装 Go 语言工具链,可以使用’make’生成可执行文件。当前可在 npm 上的单独软件包中找到预构建的二进制文件:
npm install -g esbuild-linux-64 # for Linux
npm install -g esbuild-darwin-64 # for macOS
npm install -g esbuild-windows-64 # for Windows
npm install -g esbuild-wasm # for all other platforms
这将添加一个名为’esbuild’的命令。
命令行界面获取入口点列表,并为每个入口点生成一个打包文件。以下是可用的选项:
Usage:
esbuild [options] [entry points]
Options:
--name=... 模块名称
--bundle 将所以依赖项打包进输出文件
--outfile=... 输出文件 (用于一个入口点)
--outdir=... 输出目录 (用于多个入口点)
--sourcemap 发出一个源映射
--error-limit=... 最大错误计数,0是禁用 (默认值为10)
--target=... 语言目标 (默认esnext)
--minify 设置所有 --minify-* flags
--minify-whitespace 移除空格
--minify-identifiers 缩短标识符
--minify-syntax 使用较短的等效语法
--define:K=V 解析时用V替换K
--jsx-factory=... 用来替换react.createElement的内容
--jsx-fragment=... 用来替换React.Fragment的内容
--trace=... 在这个文件中写入一个CPU trace
--cpuprofile=... 在这个文件中写入一个CPU profile
Example:
# Produces dist/entry_point.js and dist/entry_point.js.map
esbuild --bundle entry_point.js --outdir=dist --minify --sourcemap
要将 esbuild 与 React 一起使用:
例如,如果你有一个名为 example.jsx 的文件,其中包含以下内容:
import * as React from 'react'
import * as Reactdom from 'react-dom'
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
那么用于开发构建:
esbuild example.jsx --bundle '--define:process.env.NODE_ENV="development"' --outfile=out.js
用于生产构建:
esbuild example.jsx --bundle '--define:process.env.NODE_ENV="production"' --minify --outfile=out.js
手机预览