前言

今天講到的主題為 bun 的 Bundler 打包工具，
在現今這個年代不外呼最流行的還是 vite 的 esBuild 作為打包手段，
自從 Rolldown 橫空出世之後，已經把 vite 推向另外一個新紀元，
即便如此，bun 本身的打包工具也不遑多讓，他本身也有很多厲害的功能和元素
我們不一定要每件事情都依賴 vite ，今天的文章基本上就給讀者啟發另外一種思路以及方法
去實現我們日常的打包。

相較於 vite , Bun Bundler 的優勢是什麼

在效能上來說，兩者其實已經相差無幾，
所以我們在這裡的比較方向比較偏向於在什麼時候，可以考慮用 bun 而不是 vite
基本上我們可以知道 vite 已經創造出一整套的生態，所以有安裝 vite 相關的 plugin
就可以把它整合到 vite 裡面，並且在 unjs 的生態加持下，基本上 vite 無懈可擊

那 bun 呢？

在 runtime 階段的時候，他已經把測試打包等相關都集成在一起，因此可以開箱即用
這就是 bun 強大的地方

我們俗稱為「一體化工具鏈」

另一點是 bun 可以經由 --compile 將應用打包成單一獨立可執行檔，這個在 vite 就沒有

以 bun 來說，他比較適合比較基本的用途。

開始用 bun

我們先用 bun 起一個基本的專案

首先我們先創建個資料夾 姑且叫做 demo

mkdir demo

然後我們移到 demo 裡面

cd demo

開始初始化我們的專案

bun init -y

這時候就會看到 bun 幫我們產生的 scaffold(我這裡先無視 node_modules)

.
├── bun.lock
├── index.ts
├── package.json
├── README.md
└── tsconfig.json

如果使用 claude code 的話還會有額外的檔案 CLAUDE.md
畢竟現在他們一家親了

如何使用 bun Bundler

一些基本用法

最直接的用法為單一 entrypoint 輸出到 ./out 的狀況

bun build ./index.ts --outdir ./out

這時候他會把 index.ts 輸出到 out 資料夾內

所以這時候仔細觀測資料夾會變成這樣

.
├── bun.lock
├── CLAUDE.md
├── index.ts
├── out
│   └── index.js
├── package.json
├── README.md
└── tsconfig.json

這時候一到 out 裡面執行 nodejs

node index.js

會輸出

Hello via Bun!

因為我們還沒改任何 code 預設會給我們基本的 console

當然跑 bun 也是可以的

bun index.js

當然一樣會跑出一樣的結果，

當然 bun 可以直接跑起 typescript，這時候可以回到專案目錄輸入

bun index.ts

也可以跑出一樣的結果

打包 react

這裡也是相較於 vite 比較不一樣的地方，如果是 vite 就需要裝 @vitejs/plugin-react 去處理 react 的部分，
bun 只需要最基本 react 的依賴就可以打包 react

我們先安裝 react 的部分

bun add react react-dom @types/react @types/react-dom

並且建立 tsx 檔案

touch index.tsx

然後常見的 react 起手式 (index.tsx)

import { createRoot } from 'react-dom/client'

const root = createRoot(document.getElementById('root')!);

root.render(
  <div>
    這個是 react 從 bun 來的
  </div>
)

這時我們直接打包即可

bun run index.tsx --outdir out

這時候就會看到 index.js 已經幫我們把 react 都搞好了

一些常見的優化設定

1. 我們這裡可以加上 minify 或是 sourcemap 這裡我們兩個都加

bun build ./index.tsx --outdir out --minify --sourcemap=external

.
├── bun.lock
├── CLAUDE.md
├── index.ts
├── index.tsx
├── out
│   ├── index.js
│   └── index.js.map
├── package.json
├── README.md
└── tsconfig.json

這時候我們可以看到 map 檔和最小化都實現了

2. 針對 bun 優化輸出 執行時不再編譯

bun build ./index.tsx --outdir out --target bun

結論

我們這裡已 bun bundler 的基本去做一些操作，接下來會有進階的部分，
會展現出 bun 獨有的奧義，這裡我們展示 bun 的一些基本操作
以及展示如何處理 react 的部分