esbuild
從 esbuild 遷移到 Bun 的打包器指南
Bun 的打包器 API 深受 esbuild 啟發。本頁面對這兩個 API 進行了並列比較。
有一些行為有所不同:
效能
在 esbuild 的 three.js 基準測試中,Bun 的打包器速度比 esbuild 快 1.75 倍。
CLI API
terminal
# esbuild
esbuild <entrypoint> --outdir=out --bundle
# bun
bun build <entrypoint> --outdir=out
在 Bun 的 CLI 中,像 --minify 這樣的布林標誌不接受引數。像 --outdir <path> 這樣需要一個引數的標誌,可以寫成 --outdir out 或 --outdir=out。某些標誌(如 --define)可以重複使用:--define foo=bar --define bar=baz。
| esbuild | bun build | 備註 |
|---|---|---|
--bundle | 不適用 | Bun 始終會進行打包;使用 --no-bundle 停用打包。 |
--define:K=V | --define K=V | 語法略有不同;沒有冒號。esbuild --define:foo=barbun build --define foo=bar |
--external:<pkg> | --external <pkg> | 語法略有不同;沒有冒號。esbuild --external:reactbun build --external react |
--format | --format | Bun 支援 "esm"、"cjs" 和 "iife"。esbuild 預設為 "iife"。 |
--loader:.ext=loader | --loader .ext:loader | Bun 支援的內建載入器與 esbuild 不同;請參閱 載入器。esbuild 的載入器 dataurl、binary、base64、copy 和 empty 尚未實現。--loader 的語法有所不同。esbuild app.ts --bundle --loader:.svg=textbun build app.ts --loader .svg:text |
--minify | --minify | 無差異 |
--outdir | --outdir | 無差異 |
--outfile | --outfile | 無差異 |
--packages | --packages | 無差異 |
--platform | --target | 為與 tsconfig 保持一致而重新命名為 --target。不支援 neutral。 |
--serve | 不適用 | 不適用 |
--sourcemap | --sourcemap | 支援 linked(未提供值時的預設值)、external、inline 和 none。不支援 esbuild 的 both。 |
--splitting | --splitting | 無差異 |
--target | 不適用 | 不支援。Bun 的打包器不會進行語法降級。 |
--watch | --watch | 無差異 |
--allow-overwrite | 不適用 | Bun 從不允許覆蓋 |
--analyze | 不適用 | 不支援 |
--asset-names | --asset-naming | 為與 JS API 中的命名保持一致而重新命名 |
--banner | --banner | 僅適用於 JS 包 |
--footer | --footer | 僅適用於 JS 包 |
--certfile | 不適用 | 不適用 |
--charset=utf8 | 不適用 | 不支援 |
--chunk-names | --chunk-naming | 為與 JS API 中的命名保持一致而重新命名 |
--color | 不適用 | 始終啟用 |
--drop | --drop | |
| 不適用 | --feature | Bun 特有。通過 import { feature } from "bun:bundle" 啟用編譯時死程式碼消除的功能標誌 |
--entry-names | --entry-naming | 為與 JS API 中的命名保持一致而重新命名 |
--global-name | 不適用 | 不支援 |
--ignore-annotations | --ignore-dce-annotations | |
--inject | 不適用 | 不支援 |
--jsx | --jsx-runtime <runtime> | 支援 "automatic"(使用 JSX 轉換)和 "classic"(使用 React.createElement) |
--jsx-dev | 不適用 | Bun 從 tsconfig.json 中讀取 compilerOptions.jsx 來確定預設值。如果 compilerOptions.jsx 為 "react-jsx",或者 NODE_ENV=production,Bun 將使用 JSX 轉換。否則將使用 jsxDEV。打包器不支援 preserve。 |
--jsx-factory | --jsx-factory | |
--jsx-fragment | --jsx-fragment | |
--jsx-import-source | --jsx-import-source | |
--jsx-side-effects | --jsx-side-effects | |
--keep-names | --keep-names | |
--keyfile | 不適用 | 不適用 |
--legal-comments | 不適用 | 不支援 |
--log-level | 不適用 | 不支援。可以在 bunfig.toml 中將日誌級別設定為 logLevel。 |
--log-limit | 不適用 | 不支援 |
--log-override:X=Y | 不適用 | 不支援 |
--main-fields | 不適用 | 不支援 |
--mangle-cache | 不適用 | 不支援 |
--mangle-props | 不適用 | 不支援 |
--mangle-quoted | 不適用 | 不支援 |
--metafile | --metafile | |
--minify-whitespace | --minify-whitespace | |
--minify-identifiers | --minify-identifiers | |
--minify-syntax | --minify-syntax | |
--out-extension | 不適用 | 不支援 |
--outbase | --root | |
--preserve-symlinks | 不適用 | 不支援 |
--public-path | --public-path | |
--pure | 不適用 | 不支援 |
--reserve-props | 不適用 | 不支援 |
--resolve-extensions | 不適用 | 不支援 |
--servedir | 不適用 | 不適用 |
--source-root | 不適用 | 不支援 |
--sourcefile | 不適用 | 不支援。Bun 不支援 stdin 輸入。 |
--sources-content | 不適用 | 不支援 |
--supported | 不適用 | 不支援 |
--tree-shaking | 不適用 | 始終為 true。Bun 還會將 import() / require() 目標的匯出進行搖樹最佳化,僅保留匯入程式碼讀取的名稱(請參閱 程式碼拆分);esbuild 會保留動態匯入模組的所有匯出。 |
--tsconfig | --tsconfig-override | |
--version | 不適用 | 執行 bun --version 檢視 Bun 的版本。 |
JavaScript API
| esbuild.build() | Bun.build() | 備註 |
|---|---|---|
absWorkingDir | 不適用 | 始終設定為 process.cwd() |
alias | 不適用 | 不支援 |
allowOverwrite | 不適用 | 始終為 false |
assetNames | naming.asset | 使用與 esbuild 相同的模板語法,但必須明確包含 [ext]。ts<br/>Bun.build({<br/> entrypoints: ["./index.tsx"],<br/> naming: {<br/> asset: "[name].[ext]",<br/> },<br/>});<br/> |
banner | banner | 僅適用於 JS 包 |
bundle | 不適用 | 始終為 true。使用 Bun.Transpiler 可在不打包的情況下進行轉譯。 |
charset | 不適用 | 不支援 |
chunkNames | naming.chunk | 使用與 esbuild 相同的模板語法,但必須明確包含 [ext]。ts<br/>Bun.build({<br/> entrypoints: ["./index.tsx"],<br/> naming: {<br/> chunk: "[name].[ext]",<br/> },<br/>});<br/> |
color | 不適用 | Bun 會在建置結果的 logs 屬性中傳回日誌。 |
conditions | conditions | 無差異 |
define | define | |
drop | drop | |
entryNames | naming 或 naming.entry | Bun 支援 naming 鍵,其值可以是字串或物件。使用與 esbuild 相同的模板語法,但必須明確包含 [ext]。ts<br/>Bun.build({<br/> entrypoints: ["./index.tsx"],<br/> // when string, this is equivalent to entryNames<br/> naming: "[name].[ext]",<br/><br/> // granular naming options<br/> naming: {<br/> entry: "[name].[ext]",<br/> asset: "[name].[ext]",<br/> chunk: "[name].[ext]",<br/> },<br/>});<br/> |
entryPoints | entrypoints | 大小寫不同 |
external | external | 無差異 |
footer | footer | 僅適用於 JS 包 |
format | format | 支援 "esm"、"cjs" 和 "iife"。 |
globalName | 不適用 | 不支援 |
ignoreAnnotations | ignoreDCEAnnotations | |
inject | 不適用 | 不支援 |
jsx | jsx.runtime | 支援 "automatic" 和 "classic" |
jsxDev | jsx.development | |
jsxFactory | jsx.factory | |
jsxFragment | jsx.fragment | |
jsxImportSource | jsx.importSource | |
jsxSideEffects | jsx.sideEffects | |
keepNames | minify.keepNames | |
legalComments | 不適用 | 不支援 |
loader | loader | Bun 支援的內建載入器與 esbuild 不同;請參閱 載入器。Bun 尚未實現 esbuild 的載入器 dataurl、binary、base64、copy 和 empty。 |
logLevel | 不適用 | 不支援 |
logLimit | 不適用 | 不支援 |
logOverride | 不適用 | 不支援 |
mainFields | 不適用 | 不支援 |
mangleCache | 不適用 | 不支援 |
mangleProps | 不適用 | 不支援 |
mangleQuoted | 不適用 | 不支援 |
metafile | metafile | |
minify | minify | 在 Bun 中,minify 可以是布林值或物件。ts<br/>await Bun.build({<br/> entrypoints: ['./index.tsx'],<br/> // 啟用所有壓縮選項<br/> minify: true<br/><br/> // 細粒度選項<br/> minify: {<br/> identifiers: true,<br/> syntax: true,<br/> whitespace: true<br/> }<br/>})<br/> |
minifyIdentifiers | minify.identifiers | 請參閱 minify |
minifySyntax | minify.syntax | 請參閱 minify |
minifyWhitespace | minify.whitespace | 請參閱 minify |
nodePaths | 不適用 | 不支援 |
outExtension | 不適用 | 不支援 |
outbase | root | 名稱不同 |
outdir | outdir | 無差異 |
outfile | outfile | 無差異 |
packages | packages | 無差異 |
platform | target | 支援 "bun"、"node" 和 "browser"(預設值)。不支援 "neutral"。 |
plugins | plugins | Bun 的外掛 API 是 esbuild 的子集。部分 esbuild 外掛無需修改即可與 Bun 配合使用。 |
preserveSymlinks | 不適用 | 不支援 |
publicPath | publicPath | 無差異 |
pure | 不適用 | 不支援 |
reserveProps | 不適用 | 不支援 |
resolveExtensions | 不適用 | 不支援 |
sourceRoot | 不適用 | 不支援 |
sourcemap | sourcemap | 支援 "none"、"linked"、"inline" 和 "external" |
sourcesContent | 不適用 | 不支援 |
splitting | splitting | 無差異 |
stdin | 不適用 | 不支援 |
supported | 不適用 | 不支援 |
target | 不適用 | 不支援語法降級 |
treeShaking | treeShaking | 預設為 true |
tsconfig | tsconfig | |
write | 不適用 | 設定了 outdir/outfile 時為 true,否則為 false |
外掛 API
Bun 的外掛 API 旨在相容 esbuild。Bun 不支援 esbuild 的全部外掛 API,但實現了核心功能。許多第三方 esbuild 外掛無需修改即可與 Bun 配合使用。
在 Bun 和 esbuild 中,外掛都通過 builder 物件定義。
import type { BunPlugin } from "bun";
const myPlugin: BunPlugin = {
name: "my-plugin",
setup(builder) {
// 定義外掛
},
};
builder 物件的方法可以掛接到打包流程的各個部分。Bun 實現了 onStart、onEnd、onResolve 和 onLoad;但沒有實現 esbuild 的鉤子 onDispose 和 resolve。Bun 部分實現了 initialOptions:該物件為只讀,僅公開 esbuild 選項的一個子集。請改用 config(Bun 的 BuildConfig 格式中具有相同功能的物件)。
import type { BunPlugin } from "bun";
const myPlugin: BunPlugin = {
name: "my-plugin",
setup(builder) {
builder.onStart(() => {
/* 當打包開始時呼叫 */
});
builder.onResolve(
{
/* onResolve 選項 */
},
args => {
return {
/* onResolve 傳回值 */
};
},
);
builder.onLoad(
{
/* onLoad 選項 */
},
args => {
return {
/* onLoad 傳回值 */
};
},
);
builder.onEnd(result => {
/* 當打包完成時呼叫 */
});
},
};
onResolve
- 🟢
filter - 🟢
namespace
- 🟢
path - 🟢
importer - 🟢
namespace - 🟢
resolveDir - 🟢
kind - 🔴
pluginData
- 🟢
namespace - 🟢
path - 🔴
errors - 🟢
external - 🔴
pluginData - 🔴
pluginName - 🔴
sideEffects - 🔴
suffix - 🔴
warnings - 🔴
watchDirs - 🔴
watchFiles
onLoad
- 🟢
filter - 🟢
namespace
- 🟢
path - 🟢
namespace - 🔴
suffix - 🔴
pluginData
- 🟢
contents - 🟢
loader - 🔴
errors - 🔴
pluginData - 🔴
pluginName - 🔴
resolveDir - 🔴
warnings - 🔴
watchDirs - 🔴
watchFiles