peek into ESBuild

[vaakian]

esbuild

A lighting fast JavaScript and CSS bundler and minifier

将文件依赖打包成一个bundle，可以在浏览器或者node.js中独立运行。与webpack功能无异，但因为各种loader是用go语言编写，速度极快，几乎是js版本loader速度的10～100x倍。

例子

loader: dataurl 可以将导入图片的语句，转换成类似data:image/png;base64,iVBORw0KGgo=类型，可以供dom直接使用。

file: app.jsx

import url from './example.png'
console.log(url) // 输出：data:image/png;base64,iVBORw0KGgo=
let image = new Image
image.src = url
document.body.appendChild(image)

编译时指定loader

esbuild app.jsx --bundle --loader:.png=dataurl

官网 ESBuild

虽然esbuild非常快，但目前还不够成熟，不适用于实际项目。但可以预见的是它确实解决了前端开发的痛点。Vite.js目前就是通过esbuild预构建依赖（也就是import的第三方包如react\react-dom\react-router)，然后进行强缓存，和进行Typescript的转译。而在最终生产（build）环境时，为了保证稳定性，Vite目前还是通过rollup来打包，因为rollup足够成熟。相信在未来，esbuild+Vite.js的强强联合，必将在前端开发占据一席之地。

[vaakian]

名词

bundle

英文解释

To bundle a file means to inline any imported dependencies into the file itself.

翻译过来就是

bundle一个文件，意味着将这个文件的所有依赖（dependencies）都打包到文件自身里面去。

也就是说，一个文件import了一个依赖包，那么bundle做的事情就是将依赖包一并打包进编译后的输出文件里。 当然如果依赖包又依赖了其它依赖包，那么将会递归进行以上bundle过程。

如果非bundle模式，那么import语句照旧保留，依赖需要另外手动导入，仅仅做一些bundle之外的工作。如将jsx语法转换为js语法创建dom。