測驗:Bun 安裝與基礎使用
共 5 題,點選答案後會立即顯示結果
1. 在 macOS 或 Linux 上安裝 Bun,推薦使用哪個指令?
2. 使用 Bun 執行 TypeScript 檔案時,需要先做什麼?
// greet.ts
const name: string = “Vibe Coder”;
console.log(`Hello ${name}!`);
3. 以下哪個指令可以將 express 套件安裝為開發依賴(devDependencies)?
4. 關於 Bun 1.2 版本後的鎖定檔(lockfile),以下敘述何者正確?
5. 在 CI/CD 環境中安裝依賴時,應該使用哪個指令來確保安裝的版本與 lockfile 完全一致?
一句話說明
Bun 是取代 npm/yarn/pnpm 的超快套件管理器,同時也能直接執行 JavaScript 和 TypeScript 檔案。
安裝 Bun
各平台安裝方式
# macOS / Linux / WSL(推薦)
curl -fsSL https://bun.sh/install | bash
# Windows PowerShell
powershell -c "irm bun.sh/install.ps1|iex"
# 用 npm 安裝(如果你已經有 Node.js)
npm install -g bun
# macOS 用 Homebrew
brew install oven-sh/bun/bun
# Windows 用 Scoop
scoop install bun
Code language: PHP (php)驗證安裝成功
bun --version
# 輸出類似:1.2.x 或 1.3.x
Code language: CSS (css)系統需求
| 作業系統 | 最低版本 |
|---|---|
| macOS | 13.0 以上 |
| Windows | 10 (1809) 以上 |
| Linux | Kernel 5.1 以上(建議 5.6+) |
Linux 用戶需要先安裝 unzip:
sudo apt install unzip # Ubuntu/Debian
Code language: PHP (php)用 bun run 執行腳本
最小範例:執行 JavaScript
// hello.js
console.log("Hello from Bun!");
Code language: JavaScript (javascript)bun run hello.js
# 輸出:Hello from Bun!
# 或者省略 run
bun hello.js
Code language: CSS (css)直接執行 TypeScript(無需編譯)
這是 Bun 最爽的功能之一:TypeScript 不用先編譯,直接跑。
// greet.ts
const name: string = "Vibe Coder";
const age: number = 2025;
console.log(`Hello ${name}, welcome to ${age}!`);
Code language: JavaScript (javascript)bun greet.ts
# 輸出:Hello Vibe Coder, welcome to 2025!
Code language: CSS (css)對比 Node.js 的做法:
# Node.js 傳統流程(麻煩)
npx tsc greet.ts # 先編譯成 .js
node greet.js # 再執行 .js
# Bun 流程(一步到位)
bun greet.ts # 直接執行
Code language: CSS (css)Watch 模式:檔案變更自動重跑
開發時超好用,改了程式碼自動重新執行:
bun --watch greet.ts
Code language: CSS (css)執行 package.json 中的 scripts
{
"scripts": {
"dev": "bun --watch src/index.ts",
"build": "bun build src/index.ts --outdir dist",
"test": "bun test"
}
}
Code language: JSON / JSON with Comments (json)bun run dev # 執行 dev script
bun dev # 簡寫,省略 run
Code language: PHP (php)用 bun install 安裝依賴
最小範例
# 安裝 package.json 中所有依賴
bun install
# 簡寫
bun i
Code language: PHP (php)速度對比
在實測中,bun install 的速度:
| 套件管理器 | Next.js 專案(約 1100 個套件) |
|---|---|
| bun | 8.6 秒 |
| pnpm | 31.9 秒 |
| npm | 57.4 秒 |
| yarn | 138 秒 |
Bun 比 npm 快約 7 倍,這不是誇張的行銷數字,是實際測試結果。
為什麼這麼快?
┌─────────────────────────────────────────────────┐
│ npm/yarn/pnpm 的做法 │
│ 1. 解析 package.json │
│ 2. 查詢 registry 取得版本資訊 │
│ 3. 下載每個套件的 tarball │
│ 4. 解壓縮 │
│ 5. 寫入 node_modules │
└─────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────┐
│ Bun 的做法 │
│ 1. 全域快取:下載過的套件不再重複下載 │
│ 2. 用 Zig 寫的:比 JavaScript 快很多 │
│ 3. 平行處理:同時處理多個套件 │
│ 4. 硬連結:不複製檔案,用連結節省 I/O │
└─────────────────────────────────────────────────┘
用 bun add 新增套件
基本用法
# 新增一般依賴
bun add express
# 新增開發依賴(-d 或 --dev)
bun add -d typescript
# 新增指定版本
bun add react@18.2.0
# 新增最新版本
bun add lodash@latest
Code language: PHP (php)對照翻譯
| npm 指令 | Bun 指令 | 說明 |
|---|---|---|
npm install express |
bun add express |
新增依賴 |
npm install -D jest |
bun add -d jest |
新增開發依賴 |
npm install -g serve |
bun add -g serve |
全域安裝 |
npm install |
bun install |
安裝所有依賴 |
常用選項
# 安裝精確版本(不加 ^ 符號)
bun add express --exact
# package.json 會寫 "express": "4.18.2" 而不是 "^4.18.2"
# 新增為 peer dependency
bun add react --peer
# 新增為 optional dependency
bun add canvas --optional
Code language: CSS (css)用 bun remove 移除套件
# 移除套件
bun remove express
# 簡寫
bun rm express
Code language: PHP (php)移除後,Bun 會自動更新 package.json 和 lockfile。
理解 bun.lock 鎖定檔
bun.lockb vs bun.lock
| 版本 | 鎖定檔格式 | 特性 |
|---|---|---|
| Bun 1.1 以前 | bun.lockb(二進位) |
無法閱讀、難以 code review |
| Bun 1.2 以後 | bun.lock(文字) |
可讀的 JSONC 格式 |
從 Bun 1.2 開始,預設使用文字格式的 bun.lock,解決了以下問題:
- Git diff 可以正常顯示變更
- Merge conflict 容易解決
- Dependabot 等工具可以讀取
bun.lock 長什麼樣?
// bun.lock(簡化範例)
{
"lockfileVersion": 1,
"packages": {
"express": ["[email protected]", {
"dependencies": {
"body-parser": "1.20.1",
"cookie": "0.5.0"
}
}]
}
}
Code language: JSON / JSON with Comments (json)常見操作
# 根據 lockfile 安裝(CI/CD 必用)
bun install --frozen-lockfile
# 或用 bun ci(等同上面指令)
bun ci
# 只更新 lockfile,不實際安裝
bun install --lockfile-only
# 從舊的 bun.lockb 遷移到新的 bun.lock
bun install --save-text-lockfile
Code language: PHP (php)該把 lockfile 加入 Git 嗎?
是的,一定要。
# .gitignore 不應該包含這些
# bun.lock # 不要忽略!
# bun.lockb # 不要忽略!
Code language: CSS (css)lockfile 確保團隊每個人、CI/CD 環境都安裝相同版本的套件。
與 npm/yarn/pnpm 的相容性
Bun 完全相容 npm 生態系
# 現有 npm 專案可以直接用 Bun
cd my-npm-project
bun install # 讀取 package.json,建立 bun.lock
bun run dev # 執行 scripts
Code language: PHP (php)自動讀取其他 lockfile
Bun 可以讀取並轉換其他套件管理器的 lockfile:
| 原本的 lockfile | Bun 的處理方式 |
|---|---|
| package-lock.json | 自動讀取,產生 bun.lock |
| yarn.lock | 自動讀取,產生 bun.lock |
| pnpm-lock.yaml | 自動讀取,產生 bun.lock |
混用注意事項
# 團隊統一用 Bun 時,可以刪除舊的 lockfile
rm package-lock.json yarn.lock pnpm-lock.yaml
bun install
git add bun.lock
Code language: CSS (css)Vibe Coder 檢查點
當 AI 幫你處理套件相關工作時,確認這些事項:
安裝套件時
# AI 可能會寫 npm install,你可以改成:
bun add <套件名>
# 看到這個就知道在安裝開發依賴
bun add -d <套件名>
Code language: HTML, XML (xml)執行腳本時
# AI 可能會寫 npx tsx script.ts,你可以直接:
bun script.ts
# 看到 package.json 的 scripts,直接:
bun run <script名稱>
Code language: CSS (css)看到 lockfile 時
bun.lock → Bun 1.2+ 的文字鎖定檔(推薦)
bun.lockb → Bun 舊版的二進位鎖定檔
Code language: CSS (css)常見問題
Q: 我已經有 npm,還需要裝 Bun 嗎?
如果你常常等 npm install 等到不耐煩,裝 Bun 會讓你體驗飛起來的感覺。而且 Bun 完全相容 npm 專案。
Q: bun add 和 npm install 有什麼不同?
功能一樣,但 Bun 快很多。而且 Bun 會自動處理 TypeScript,不用額外設定。
Q: 為什麼要用 –frozen-lockfile?
這確保安裝的版本跟 lockfile 記錄的完全一致。在 CI/CD 環境必用,避免「在我電腦上可以跑」的問題。
本篇重點整理
| 你想做的事 | Bun 指令 |
|---|---|
| 安裝 Bun | curl -fsSL https://bun.sh/install \| bash |
| 執行 JS/TS 檔案 | bun <檔名> |
| 安裝所有依賴 | bun install 或 bun i |
| 新增套件 | bun add <套件> |
| 新增開發依賴 | bun add -d <套件> |
| 移除套件 | bun remove <套件> |
| CI 環境安裝 | bun ci 或 bun install --frozen-lockfile |
| Watch 模式 | bun --watch <檔名> |
下一篇,我們會深入 Bun 的 bundler 和 test runner 功能。
進階測驗:Bun 安裝與基礎使用
測驗目標:驗證你是否能在實際情境中應用所學。
共 5 題,包含情境題與錯誤診斷題。
共 5 題,包含情境題與錯誤診斷題。
1. 你正在接手一個使用 npm 的舊專案 情境題
專案目錄中有
package.json 和 package-lock.json。
你想改用 Bun 來加速開發流程,並希望團隊之後都使用 Bun。
最佳的做法是什麼?
2. 開發中需要快速測試一個 TypeScript 腳本 情境題
你寫了一個
test-api.ts 檔案,想在修改時自動重新執行來觀察結果。
應該使用哪個指令?
3. 設定 CI/CD pipeline 安裝依賴 情境題
你正在設定 GitHub Actions,需要確保每次 build 都安裝完全相同版本的套件,
避免「在我電腦上可以跑」的問題。應該使用哪個指令?
4. 同事回報安裝套件時出現錯誤 錯誤診斷
$ bun install –frozen-lockfile
error: lockfile had changes, but lockfile is frozen
最可能的原因和解決方式是什麼?
5. AI 助手生成的程式碼無法執行 錯誤診斷
# AI 助手建議的指令
npm install express
npx tsx server.ts
你想改用 Bun 來執行,正確的替代指令應該是什麼?