【Bun 全面教學】#02 安裝與基礎使用:執行腳本與套件管理

測驗:Bun 安裝與基礎使用

共 5 題,點選答案後會立即顯示結果

1. 在 macOS 或 Linux 上安裝 Bun,推薦使用哪個指令?

  • A. npm install bun
  • B. curl -fsSL https://bun.sh/install | bash
  • C. apt install bun
  • D. brew install bun

2. 使用 Bun 執行 TypeScript 檔案時,需要先做什麼?

// greet.ts const name: string = “Vibe Coder”; console.log(`Hello ${name}!`);
  • A. 先執行 bun tsc greet.ts 編譯
  • B. 先安裝 typescript 套件
  • C. 先建立 tsconfig.json
  • D. 不用做任何事,直接執行 bun greet.ts

3. 以下哪個指令可以將 express 套件安裝為開發依賴(devDependencies)?

  • A. bun add express
  • B. bun install express --save-dev
  • C. bun add -d express
  • D. bun add express --dev-only

4. 關於 Bun 1.2 版本後的鎖定檔(lockfile),以下敘述何者正確?

  • A. 預設使用 bun.lockb 二進位格式
  • B. 預設使用 bun.lock 文字格式,可在 Git diff 中正常顯示
  • C. 不再產生任何 lockfile,改用 package-lock.json
  • D. lockfile 應該加入 .gitignore 避免衝突

5. 在 CI/CD 環境中安裝依賴時,應該使用哪個指令來確保安裝的版本與 lockfile 完全一致?

  • A. bun install
  • B. bun add --all
  • C. bun cibun install --frozen-lockfile
  • D. bun install --production

一句話說明

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.jsonscripts,直接:
bun run <script名稱>
Code language: CSS (css)

看到 lockfile 時

bun.lockBun 1.2+ 的文字鎖定檔(推薦)
bun.lockbBun 舊版的二進位鎖定檔
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 installbun i
新增套件 bun add <套件>
新增開發依賴 bun add -d <套件>
移除套件 bun remove <套件>
CI 環境安裝 bun cibun install --frozen-lockfile
Watch 模式 bun --watch <檔名>

下一篇,我們會深入 Bun 的 bundler 和 test runner 功能。

進階測驗:Bun 安裝與基礎使用

測驗目標:驗證你是否能在實際情境中應用所學。
共 5 題,包含情境題與錯誤診斷題。

1. 你正在接手一個使用 npm 的舊專案 情境題

專案目錄中有 package.jsonpackage-lock.json。 你想改用 Bun 來加速開發流程,並希望團隊之後都使用 Bun。 最佳的做法是什麼?
  • A. 直接執行 bun install,保留 package-lock.json
  • B. 先刪除 node_modules,再執行 npm install
  • C. 執行 bun install 產生 bun.lock,然後刪除 package-lock.json,將 bun.lock 加入 Git
  • D. 在 package.json 中加入 "packageManager": "bun"

2. 開發中需要快速測試一個 TypeScript 腳本 情境題

你寫了一個 test-api.ts 檔案,想在修改時自動重新執行來觀察結果。 應該使用哪個指令?
  • A. bun run test-api.ts
  • B. bun --watch test-api.ts
  • C. bun dev test-api.ts
  • D. bun test-api.ts --hot

3. 設定 CI/CD pipeline 安裝依賴 情境題

你正在設定 GitHub Actions,需要確保每次 build 都安裝完全相同版本的套件, 避免「在我電腦上可以跑」的問題。應該使用哪個指令?
  • A. bun install
  • B. bun install --production
  • C. bun add --all
  • D. bun ci

4. 同事回報安裝套件時出現錯誤 錯誤診斷

$ bun install –frozen-lockfile error: lockfile had changes, but lockfile is frozen

最可能的原因和解決方式是什麼?

  • A. Bun 版本太舊,需要升級 Bun
  • B. package.json 的依賴版本與 bun.lock 記錄不一致,需要先執行 bun install 更新 lockfile 並提交
  • C. node_modules 資料夾損壞,刪除後重試
  • D. 網路連線有問題,無法連接到 npm registry

5. AI 助手生成的程式碼無法執行 錯誤診斷

# AI 助手建議的指令 npm install express npx tsx server.ts

你想改用 Bun 來執行,正確的替代指令應該是什麼?

  • A. bun install expressbun tsx server.ts
  • B. bun add expressbunx tsx server.ts
  • C. bun add expressbun server.ts
  • D. bun npm install expressbun run server.ts

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *