Stories

Detail Return Return

7個讓全棧開發效率起飛的 Bun 工作流 - Stories Detail

有沒有誰敲下 npm install 後,電腦風扇開始狂轉,好像隨時就要起飛了。

隨着 Bun 的出現,這種情況就好轉了,Bun 把運行時、包管理器、打包工具、測試工具全塞進了一個二進制文件裏,主打多快好省。

但光用上 Bun 還不夠,得用得巧。今天就分享7個Bun工作流,提升你的全棧開發效率,減少掉髮。

image.png

在開始之前,咱們先解決入門問題。要在電腦上裝 Bun 或者 Node.js,就得得跟 nvm、brew 或者環境變量鬥智鬥勇。想跳過這些麻煩?那就用 ServBay。它能一鍵安裝和管理多個版本的 Node.js 和 Bun,而且裝完自帶 npm,開箱即用,主打一個一步到位。

image.png

好了,環境搞定了,讓我們正式發車!

bunx 執行一次性命令,告別全局污染

都2025了,就別再用 npm install -g 裝 CLI 工具了,一年到頭都不見得用第二次,還會污染全局環境。務必要試試bunx ,臨時下載並執行命令,用完就扔,乾淨利落。

# 用 Vite 創建一個新項目,全程無需全局安裝
bunx create-vite@latest my-vue-app --template vue-ts

# 跑一下 ESLint 檢查並自動修復
bunx eslint . --fix

不管是電腦還是 CI/CD 服務器,大家用的都是同一個版本的工具,避免了“在我這兒好好的”這種經典扯皮。

閃電般的 install 和鐵板一塊的鎖文件

bun install 的速度快是出了名的,但它真正的殺手鐗是生成一個高度一致、體積更小的 node_modules 目錄。

# 如果 lock 文件有變動就直接報錯,保證環境一致性
bun install --frozen-lockfile

# 在生產環境打包時,只安裝 dependencies,不裝 devDependencies
bun install --production

記得把 bun.lockb 這個二進制鎖文件提交到 Git 倉庫。在 CI 流程裏用 --frozen-lockfile,能有效防止某個同事偷偷升級依賴。

Monorepo?用 Workspaces 就夠了

項目一大,代碼庫就容易變成巨石應用。Monorepo(單體倉庫)是解決方案之一,而 Bun 的 Workspaces 讓這件事變得異常簡單,甚至不需要 Lerna 或 Nx 這類重型武器。

在項目根目錄 package.json 裏這麼寫:

{
  "name": "my-cool-project",
  "private": true,
  "workspaces": [
    "apps/*",
    "packages/*"
  ],
  "scripts": {
    "dev": "bun run --filter "./apps/*" dev",
    "build": "bun run --filter "./packages/*" build"
  }
}

這樣一來,packages 裏的公共模塊能被 apps 裏的應用直接引用,就像本地安裝了一樣,修改後立馬生效。管理多個相關聯的項目,從未如此清爽。

API + 前端,一個進程就搞定的開發服務器

Bun 內置的 HTTP 服務器小而快。隨便配個輕量級框架(比如 Hono 或 ElysiaJS),就能把 API 服務和靜態網站放在同一個進程裏跑起來。

// server.ts
import { Hono } from 'hono';
import { serveStatic } from 'hono/bun';

const app = new Hono();

// 你的 API 路由
app.get('/api/users/:id', (c) => {
  const { id } = c.req.param();
  return c.json({ id, name: `User ${id}` });
});

// 託管前端打包好的靜態文件
app.use('/*', serveStatic({ root: './public' }));

export default {
  port: 8080,
  fetch: app.fetch,
};

啓動它:bun --watch run server.ts

開發時,API 和前端都在一個地方,改完代碼自動重載,調試起來方便多了。

bun build :打包代碼,又快又小

Bun 不僅是運行時,還是個高效的打包工具。不管是給瀏覽器用的代碼,還是給服務器跑的程序,它都能打出體積超小的包。

# 打包給瀏覽器用的前端代碼
bun build ./src/main.ts --outdir ./dist/client --sourcemap --minify

# 打包給 Bun 或 Node.js 運行的後端服務
bun build ./src/server.ts --target=bun --outdir ./dist/server

這功能非常適合用來打包一些給客户部署的獨立小工具、雲函數,或者優化 CI 流程。

bun test :零配置的極速測試體驗

受夠了配置 Jest、Babel、ts-jest 那一套全家桶了嗎?Bun Test 可以開箱即用,並且利用了多核心並行測試,速度飛快。

寫個測試文件:

// utils.test.ts
import { expect, test, describe } from "bun:test";

const capitalize = (str: string) => {
  if (!str) return '';
  return str.charAt(0).toUpperCase() + str.slice(1);
}

describe("capitalize function", () => {
  test("should capitalize the first letter", () => {
    expect(capitalize("hello")).toBe("Hello");
  });

  test("should return an empty string if input is empty", () => {
    expect(capitalize("")).toBe("");
  });
});

然後運行:bun test

它還自帶了 watch 模式和覆蓋率報告,功能一點都不少。寫測試的體驗順滑得讓人想多寫幾個。

零依賴的環境變量管理,跟 dotenv 説拜拜

每個項目都少不了處理數據庫地址、API 密鑰這類敏感信息。過去我們都得裝個 dotenv 包,然後在代碼入口處小心翼翼地 require('dotenv').config()

有了 Bun,這事兒就成了歷史。Bun 會自動加載項目根目錄下的 .env 文件。

創建一個 .env 文件:

DATABASE_URL="postgresql://user:pass@host:port/db"
JWT_SECRET="a-very-secret-string-that-is-long"

然後,代碼裏直接就能用 Bun.env 來訪問它們,連 import 都不需要。

// config.ts
function getRequiredEnv(key: string): string {
  const value = Bun.env[key];
  if (!value) {
    throw new Error(`喂!環境變量 "${key}" 沒設置啊!`);
  }
  return value;
}

export const config = {
  dbUrl: getRequiredEnv("DATABASE_URL"),
  jwtSecret: getRequiredEnv("JWT_SECRET"),
};

這樣做的好處是,少裝一個包,項目就輕一分。而且通過一個簡單的輔助函數,就能確保所有必需的配置在程序啓動時都已就位,否則直接報錯退出。這可比程序跑到一半才發現連不上數據庫要友好多了。

注意有坑

  1. Node.js 原生模塊 兼容性:Bun 盡力兼容了 Node.js API,但不是 100%。如果某個庫深度依賴了 Node.js 的 C++ 底層模塊,可能會出問題。
  2. 導入舊模塊( CJS )時的 default 兼容問題:當你用 import 去加載一個使用 require/module.exports 的老庫時,有時需要通過 yourImport.default 才能拿到真正的導出內容,這是最常見的小坑。
  3. 二進制的 bun.lockb 文件:Bun 的鎖文件是二進制格式,這有助於提升解析速度。但它的壞處是,當合並分支時如果遇到衝突,沒法像解決 package-lock.json 衝突那樣手動編輯它,通常只能選擇一方的版本然後重新 bun install

總結一下

Bun 的核心思想就是整合,它把過去需要用五六個工具才能搞定的事情,用一個工具就漂亮地解決了。從依賴管理到測試打包,流程順暢了,開發體驗自然就好了。

而一個好的開始是成功的一半。在體驗 Bun 帶來的絲滑開發流程之前,不妨先用 ServBay 來搞定環境安裝這個前置任務。它鋪好了路,用户能更快地在 Bun 的世界裏馳騁。

user avatar zaotalk Avatar longlong688 Avatar geeklab Avatar q_bit Avatar fengdudeyema Avatar lu_lu Avatar sevencoding Avatar puxiaoke6 Avatar evilboy Avatar huaiyue_63f0b9e085bf0 Avatar danjuanfe Avatar shuihuyangpinga Avatar
Favorites 33 users favorite the story!
Favorites

Add a new Comments

Some HTML is okay.