介紹
☀️esbuild是一種類似於webpack 的 極速 JavaScript 打包器
❄️特性：
- 極快的速度，無需緩存
- 支持 ES6 和 CommonJS 模塊
- 支持對 ES6 模塊進行 tree shaking
- API 可同時用於 JavaScript 和 Go
- 兼容 TypeScript 和 JSX 語法
- 支持 Source maps
- 支持 Minification
- 支持 plugins
安裝
首先本地安裝 esbuild，執行npm install esbuild命令，此命令會將 esbuild 安裝到你本地的 node_modules， node_modules里面會有個esbuild的 原生可執行文件
執行 ./node_modules/.bin/esbuild 可以看到esbuild的好多命令，也可以執行./node_modules/.bin/esbuild --version可以查看我們安裝的esbuild的版本是0.14.2
構建腳本
1. 構建
我們創建一個test.jsx 文件，然后用esbuild去構建
./node_modules/.bin/esbuild test.jsx --bundle --outfile=out.js
會輸出一個名叫out.js的文件，然后我們用node out.js去運行，得出：
<div>5</div>
🐱注：esbuild 除了 jsx 擴展名， 無需任何配置就能夠將 JSX 語法轉換為 JavaScript。 盡管 esbuild 可以進行配置， 但它試圖提供合理的默認值，以便在常見的情況下自動完成構建。 如果你想在 .js 文件中使用 JSX 語法，你可以通過設置 --loader:.js=jsx 選項， 來告訴 esbuild 對 js 文件進行 JSX 的編譯。
因為我們要反復要執行構建命令，必須要寫esbuild可執行文件的相對路徑，比較繁瑣。所以我們需要簡化它。我們可以建個 package.json 中添加構建腳本， 具體代碼如下：
{
"script": {
"build": "esbuild test.jsx --bundle --outfile=out.js"
}
}
🐱注：這里直接使用 esbuild，沒用相對路徑。 這能夠生效的原因是 "scripts" 中執行的內容 會去尋找當前環境下的 esbuild 命令並執行。 （前提是，你已經安裝了 esbuild）
然后我們直接可以去執行 npm run build 即可
2. 構建方式
構建方式可以有兩種：命令行和調用javascript API，上邊我們用的都是命令行方式。
⁉️那我們什么情況下會用到調用 javascript API 方式呢？
✅如果我們需要向esbuild傳更多的配置項，這會讓命令看起來很復雜，笨重。這時我們就需要直接調用javascript API 方式：
建個esbuild.config.js文件，在里面編寫腳本：
require('esbuild').build({
entryPoints: ['test.jsx'],
bundle: true,
outfile: 'out.js'
})
esbuild 的API
在學習esbuild的基礎配置之前，我們先看看esbuild常用的API有哪些：
- transform
- transformSync
- build
- buildSync
- serve
調用esbuild API的方式有三種：在命令行中調用，在 JavaScript 中調用， 在 Go 中調用。😂作為前端，我們只需要關心命令行和javascript兩種調用方式
🍁最常用的兩種API調用就是transform和build
1. transform API
transform API 是操作單個字符串，而不是訪問文件系統的。這個可以是在沒有文件系統的環境（比如瀏覽器）下，使用，也可以作為另一個工具鏈的一部分。
舉個栗子：
🍭命令行調用🍭
echo 'console.log(5555)' | esbuild // 輸出 console.log(5555)
⁉️大家是不是有個問題，我這echo 'console.log(5555)' | esbuild 里面既沒有 build關鍵字也沒有transform關鍵字，我怎么知道這個命令就是調用的transform API呢？
✅答案：如果沒有提供輸入的文件並且沒有 --bundle 標志的話，命令行接口就會調用此 API。這個用例中，輸入的字符串來自標准輸入（stdin），並且輸出字符串轉到標准輸出（stdout）。
🍭javascript 調用🍭
require('esbuild').transform('console.log(5555)', {
loader: 'js',
}).then((res) => {
console.log(res.code);
});
- transform API 參數
| 參數 | 類型 | 描述 |
|---|---|---|
| input | string | 需要轉換的代碼 |
| options | object | transformOptions(見下文) |
transformOptions 參數可以使用的配置項：
- Define
- Format
- Loader
- Minify
- Sourcemap
- Target
transform 和 transformSync的區別：
transform是異步，transform(...)返回的是個Promise對象
transformSync是同步的，transformSync(...)返回的是結果集
2. build API
調用 build API 操作文件系統中的一個或多個文件。 它允許文件互相引用並且打包在一起。
舉個栗子：
建一個test2.js，在test2.js里面引入test.js,然后打包輸出 test2.js
🍭命令行調用🍭
esbuild test2.js --bundle --outfile=out.js // 輸出的out.js文件里面包含了test.js和test2.js兩個文件里面的內容
🐱注：如果至少提供一個輸入文件或者存在 --bundle 標志， 那么命令行接口會調用該 API。 請注意 esbuild 不會 默認打包。 你必須傳遞 --bundle 標志啟用打包。 如果沒有提供輸入文件，則從標准化輸入（stdin）讀取單個輸入文件。
🍭javascript API 調用🍭
require('esbuild').build({
entryPoints: ['test2.js'],
bundle: true,
outfile: 'out.js'
})
- build API 參數
| 參數 | 類型 | 描述 |
|---|---|---|
| options | object | buildOptions(見下文) |
buildOptions 參數可以使用的配置項：
- Bundle
- Define
- Entry points
- External
- Format
- Inject
- Loader
- Minify
- Outdir
- Outfile
- Platform
- Serve
- Sourcemap
- Target
- Watch
- Write
build 和 buildSync的區別：
build 是異步，build(...)返回的是個Promise對象
buildSync是同步的，buildSync(...)返回的是結果集
3. serve API
serve API 與 build API 調用很相似， 但是它不會將生成的代碼寫入到文件系統中，它啟動一個 long-lived 本地 web 服務器來為最新構建生成的代碼提供服務。 每批新的請求都會導致 esbuild 在響應請求之前重新運行構建命令，這樣你的文件就總是最新的。
serve API 在命令行的模式下有兩種使用方式：
第一種：為 esbuild 構建出的所有內容提供服務。用servedir參數指定構建出的輸出文件所在的目錄
舉個栗子：
🍭命令行調用🍭
esbuild test.jsx --servedir=www --outdir=www/js --bundle // 文件系統里面並沒有www文件夾，但是我們可以在瀏覽器訪問http://127.0.0.1:8000/js/test.js
🍭轉成 javascript API 調用🍭
require('esbuild').serve({
servedir: 'www',
}, {
entryPoints: ['test.jsx'],
outdir: 'www/js',
bundle: true,
}).then((serve) => {
console.log(serve, 'watch...');
});
第二種：僅為 esbuild 生成的文件提供服務。用serve參數指定訪問的端口，可以直接去訪問esbuild指定生成的文件
🍭命令行調用🍭
esbuild test.jsx --outfile=out.js --bundle --serve=8000 // 文件系統里面並沒有www文件夾，但是我們可以在瀏覽器訪問http://127.0.0.1:8000/out.js
🍭轉成 javascript 調用🍭
require('esbuild').serve({
port: 8000
}, {
entryPoints: ['test.jsx'],
bundle: true,
outfile: 'out.js'
}).then(serve => {
console.log(serve, 'watch...')
})
- serve API 的參數
require('esbuild').serve({
// serveOptions
}, {
// buildOptions
}).then(serve => {
// 輸出serve對象
})
第一個參數是帶有特定於 serve 的配置項的配置項對象
| 字段 | 類型 | 描述 |
|---|---|---|
| port | number | 配置 HTTP 端口, 默認 8000，在命令行中可以使用 --serve=8000 |
| host | string | 配置 IP 地址，默認 0.0.0.0 在命令中可以使用--serve=127.0.0.1:8000 |
| servedir | string | esbuild 的 HTTP 服務器提供的額外內容目錄，當請求路徑與生成的任何輸出文件路徑不匹配時，它將返回 404 |
| onRequest | callback | 請求完成后調用，需要在請求完成后做操作，可以在onRequest里面做 |
第二個參數是每個請求都會調用的底層 # build API 的常規配置項對象。
🐱注：serve API 在build時不能使用watch 配置項
下期見 esbuild 的基本配置項👇👇👇