相信很多小伙伴第一次使用 Vite 開(kāi)發(fā)項(xiàng)目的時(shí)候，都會(huì)被它的速度震驚到。為什么 Vite 那么快呢?除了使用了 ES modules 之外，Vite 內(nèi)部還使用了一個(gè)神器 —— esbuild。
Esbuild 是由 Figma 聯(lián)合創(chuàng)始人 Evan Wallace 于 2020 年開(kāi)發(fā)的工具。它是一個(gè)速度極快的 JavaScript/CSS 打包器，相比已有的 Web 構(gòu)建工具，它的構(gòu)建速度快 10-100 倍。
如此逆天的性能提升，還在抱怨 Webpack 打包慢的你，是不是很心動(dòng)?心動(dòng)不如行動(dòng)，本文將帶你一起快速上手 esbuild。
安裝 esbuild
你可以通過(guò) npm 來(lái)安裝 esbuild ，以下命令將以局部的方式來(lái)安裝 esbuild。當(dāng)然你也可以使用 yarn 或 pnpm 等其它客戶(hù)端來(lái)安裝 esbuild。
npm install esbuild -D
待安裝成功后，可以運(yùn)行以下命令來(lái)檢測(cè)是否安裝成功：
./node_modules/.bin/esbuild --version
當(dāng)以上命令成功執(zhí)行后，終端會(huì)輸出當(dāng)前的 esbuild 版本信息 —— 0.14.21。為了方便后面的演示，我們來(lái)新建一個(gè) getting-started-esbuild 項(xiàng)目，然后使用 npm init -y 來(lái)初始化項(xiàng)目：
mkdir getting-started-esbuild npm init -y
Esbuild 支持 TypeScript 和 JSX 語(yǔ)法，下面我們先來(lái)體驗(yàn)如何打包 TS 文件。
打包 TS
首先，在根目錄下新建一個(gè) math.ts 文件并輸入以下內(nèi)容：
// math.ts export const add = (a: number, b: number) => a + b;
接著，繼續(xù)新建一個(gè) main.ts 文件并輸入以下內(nèi)容：
// main.ts import { add } from "./math" console.log(`3 + 5 = ${add(3, 5)}`);
為了方便后續(xù)的打包操作，我們?cè)?package.json 文件的 scripts 字段中新增一個(gè)打包 TS 文件的命令：
{ "name": "getting-started-esbuild", "scripts": { "build:ts": "esbuild main.ts --bundle --outfile=main.js" }
}
esbuild 默認(rèn)不進(jìn)行打包，所以你必須顯式設(shè)置 --bundle 標(biāo)志，而 --outfile 標(biāo)志用于設(shè)置打包輸出的文件名稱(chēng)。若未設(shè)置 --outfile 標(biāo)志，esbuild 將把結(jié)果發(fā)送到標(biāo)準(zhǔn)輸出(stdout)。
之后，我們就可以通過(guò) npm run build:ts 命令來(lái)打包 main.ts 文件。以下是經(jīng)過(guò) esbuild 打包后的輸出結(jié)果：
// main.js (() => { // math.ts var add = (a, b) => a + b; // main.ts console.log(`3 + 5 = ${add(3, 5)}`); })();
除了支持打包 TS 之外， esbuild 也支持打包 css 文件。下面我們來(lái)看一下如何利用 esbuild 打包 css 文件。
打包 CSS
首先，在根目錄下新建一個(gè) normalize.css 文件并輸入以下內(nèi)容：
/** normalize.css */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } body { margin: 0; }
接著，繼續(xù)新建一個(gè) style.css 文件并輸入以下內(nèi)容：
/** style.css */ "normalize.css"; p { font-weight: bold; }
同樣，為了方便后續(xù)的打包操作，我們?cè)?package.json 文件的 scripts 字段中新增一個(gè)打包 CSS 文件的命令：
{ "name": "getting-started-esbuild", "scripts": { "build:css": "esbuild style.css --bundle --minify --outfile= style.min.css" }
}
之后，我們就可以通過(guò) npm run build:css 命令來(lái)打包 style.css 文件。以下是經(jīng)過(guò) esbuild 打包后的輸出結(jié)果：
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}p{font-weight:700}
打包圖片
在 Web 項(xiàng)目打包過(guò)程中，我們經(jīng)常需要處理圖片資源。esbuild 內(nèi)置了 dataurl 和 file 加載器，利用這些加載器我們就可以輕松處理圖片資源。
下面我們將使用 esbuild 的 logo 來(lái)演示一下如何打包圖片資源，為了驗(yàn)證不同 loader，我們準(zhǔn)備了 esbuild-logo.png 和 esbuild-logo.jpg 兩張不同格式的圖片文件：
準(zhǔn)備好圖片資源文件之后，我們?cè)诟夸浵滦陆ㄒ粋€(gè) index.html 文件并輸入以下內(nèi)容：
DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Getting started esbuildtitle> head> <body> <div id="main"> <div> <img alt="esbuild-logo" id="dataUrlLogo" /> div> <div> <img alt="esbuild-logo" id="urlLogo" /> div> div> <script src="./index.js">script> body> html>
接著，繼續(xù)新建一個(gè) index.ts 文件并輸入以下內(nèi)容：
import pngUrl from "./esbuild-logo.png"; const dataUrlImg: HTMLImageElement = document.querySelector("#dataUrlLogo"); dataUrlImg.src = pngUrl; import jpgUrl from "./esbuild-logo.jpg"; const urlImg: HTMLImageElement = document.querySelector("#urlLogo"); urlImg.src = jpgUrl;
然后，我們?cè)?package.json 文件的 scripts 字段中新增一個(gè)打包圖片資源的命令：
{ "name": "getting-started-esbuild", "scripts": { "build:image": "esbuild index.ts --bundle --loader:.png=dataurl --loader:.jpg=file --outfile=index.js" }
}
在以上的 build:image 命令中，我們?yōu)?.png 文件指定了 dataurl 加載器，為 .jpg 文件指定了 file 加載器。dataurl 加載器會(huì)對(duì)圖片的二進(jìn)制數(shù)據(jù)進(jìn)行 base64 編碼，然后組裝成 data-uri 的形式。
之后，我們就可以通過(guò) npm run build:image 命令來(lái)打包圖片資源文件。以下是經(jīng)過(guò) esbuild 打包后的輸出結(jié)果：
(() => { // esbuild-logo.png var esbuild_logo_default = "data:image/png;base64,iVBORw0KGgoAAAAN...="; // esbuild-logo.jpg var esbuild_logo_default2 = "./esbuild-logo-WVOHGFM5.jpg"; // index.ts var dataUrlImg = document.querySelector("#dataUrlLogo"); dataUrlImg.src = esbuild_logo_default; var urlImg = document.querySelector("#urlLogo"); urlImg.src = esbuild_logo_default2; })();
由于我們?yōu)?.png 文件指定了 dataurl 加載器，所以 esbuild-logo.png 文件的內(nèi)容就被轉(zhuǎn)化為 data-uri 的數(shù)據(jù)格式。
使用 build API
在前面的示例中，我們都是通過(guò)在命令行啟動(dòng) esbuild 應(yīng)用程序來(lái)執(zhí)行打包操作。對(duì)于簡(jiǎn)單的命令來(lái)說(shuō)，這種方式很便捷。但如果我們的命令很復(fù)雜，比如需要設(shè)置較多的配置選項(xiàng)，那么我們的命令就不便于閱讀。針對(duì)這個(gè)問(wèn)題，我們可以使用 esbuild 提供的 build api。
在 esbuild 模塊的入口文件 main.js 中，我們可以清楚地看到該模塊導(dǎo)出的內(nèi)容：
// node_modules/esbuild/lib/main.js 0 && (module.exports = { analyzeMetafile, analyzeMetafileSync, build, buildSync, formatMessages, formatMessagesSync, initialize, serve, transform, transformSync, version });
由以上代碼可知，esbuild 為我們提供了 build(異步) 和 buildSync(同步) 的 API。接下來(lái)，我們以異步的 build API 為例，來(lái)打包一下前面的 main.ts 文件。
為了方便管理項(xiàng)目的腳本，我們先在根目錄下新建一個(gè) scripts 目錄，然后在該目錄下新建一個(gè) build.js 文件并輸入以下內(nèi)容：
// scripts/build.js require("esbuild") .build({ entryPoints: ["main.ts"], outfile: "main.js", bundle: true, loader: { ".ts": "ts" }, }) .then(() => console.log("? Done")) .catch(() => process.exit(1));
創(chuàng)建完 build.js 文件之后，我們就可以在終端中執(zhí)行 node scripts/build.js 命令來(lái)執(zhí)行打包操作。
Watch Mode
在開(kāi)發(fā)階段，我們希望當(dāng)文件發(fā)生異動(dòng)的時(shí)候，能自動(dòng)執(zhí)行打包操作，從而生成新的文件。針對(duì)這種場(chǎng)景，可以在調(diào)用 build API 的時(shí)候，設(shè)置 watch 字段的值為 true。
// scripts/watch-build.js require("esbuild") .build({ entryPoints: ["main.ts"], outfile: "main.js", bundle: true, loader: { ".ts": "ts" }, watch: true, }) .then(() => console.log("? Done")) .catch(() => process.exit(1));
Serve Mode
除了 Watch 模式之外，esbuild 還支持 Serve 模式。在該模式下，esbuild 將會(huì)根據(jù)用戶(hù)的配置啟動(dòng)一個(gè)靜態(tài)資源服務(wù)器。當(dāng)用戶(hù)在瀏覽器請(qǐng)求打包生成的文件時(shí)，若文件已經(jīng)發(fā)生變化，則 esbuild 會(huì)自動(dòng)觸發(fā)打包操作并返回新的資源文件。
// scripts/serve.js require("esbuild") .serve( { servedir: "www", port: 8000, host: "localhost" }, { entryPoints: ["index.ts"], outdir: "www", bundle: true, loader: { ".png": "dataurl", ".jpg": "file", }, } ) .then((server) => { console.log("Server is running at: http://localhost:8000/") // server.stop(); });
使用插件
Esbuild 提供了很多開(kāi)箱即用的功能，比如可以打包 TS、CSS 和 Image 等文件。但這還不能滿(mǎn)足我們?nèi)粘５墓ぷ餍枨蟆Ｔ谌粘９ぷ髦校覀兛赡苓€需要打包 Sass、Less、Yaml 或 Markdown 等文件。
為了解決上述的問(wèn)題，從而滿(mǎn)足不同的使用場(chǎng)景，esbuild 設(shè)計(jì)了插件機(jī)制。利用 esbuild 提供的插件機(jī)制，開(kāi)發(fā)者可以根據(jù)自己的需求，定制對(duì)應(yīng)的插件，來(lái)實(shí)現(xiàn)對(duì)應(yīng)的功能。當(dāng)然你并不需要從頭開(kāi)發(fā)各種插件，在開(kāi)發(fā)對(duì)應(yīng)的插件前，大家可以先瀏覽已有的社區(qū)插件。
使用 esbuild 插件，主要分為 2 個(gè)步驟：安裝插件和注冊(cè)插件。這里我們來(lái)介紹一下如何使用 esbuild-plugin-less 插件。
步驟一：安裝插件
npm install esbuild-plugin-less -D
步驟二：注冊(cè)插件
import { build } from 'esbuild'; import { lessLoader } from 'esbuild-plugin-less'; build({ entryPoints: [path.resolve(__dirname, 'index.ts')], bundle: true, outdir: path.resolve(__dirname, 'output'), plugins: [lessLoader()], loader: { '.ts': 'ts', }, });
在以上代碼中，我們通過(guò) plugins 字段來(lái)注冊(cè) esbuild-plugin-less 插件，之后 esbuild 就可以打包 less 文件了。如果使用的是 Sass 的話，就需要安裝 esbuild-plugin-sass 插件。
好的，esbuild 的相關(guān)內(nèi)容就介紹到這里，想系統(tǒng)學(xué)習(xí) esbuild 的話，可以閱讀 esbuild 官方文檔。另外，如果想進(jìn)一步了解它在實(shí)際工作中的應(yīng)用，可以閱讀 又一個(gè)基于 Esbuild 的神器 這篇文章。
原文地址：https://mp.weixin.qq.com/s/ZO44ibIzfDPVBpmCpiZBMw
