在現代前端項目日益復雜的今天，我們越來越多地面對一個場景：多個項目共享邏輯、組件和依賴，而維護和構建效率卻在不斷拉垮。這種情況下，傳統項目結構的痛點就顯現無遺。

從我親身實踐來看，選擇 pnpm + TurboRepo 構建 Monorepo 架構，是我過去兩年里提升團隊協作效率最重要的一次架構升級。構建速度快、依賴清晰、協作高效，讓我們實現了從“手動復制粘貼”到“模塊化協同開發”的飛躍。

---

🧠 為什么選擇 Monorepo？

Monorepo 并不新鮮，但它解決了多個項目協作的核心問題：

• 多個包共享公共模塊（UI庫、工具函數、hooks等）
• 可集中管理依賴版本，避免版本地獄
• 能夠跨項目統一 CI/CD 流程與測試

在實際項目中，最典型的 Monorepo 應用如：

• apps/：前臺 Web 應用、后臺管理系統、小程序等多個前端入口
• packages/：通用組件庫、接口 SDK、工具函數庫、hooks 集合等

---

🚀 為什么是 pnpm + TurboRepo？

? pnpm 的優勢

• 真正的多項目間硬鏈接復用依賴，磁盤占用極小，安裝速度極快
• Workspace 支持一流，天然適配 Monorepo
• 鎖文件小，結構清晰，沖突少

? TurboRepo 的優勢

• 原生支持 pnpm workspace，0 配置即可啟動
• 基于任務緩存（remote/local）+依賴圖調度實現構建加速
• 支持按任務分項目并發執行（如只構建有變動的包）
• 可以集成 Vercel Remote Cache，實現多端構建緩存同步

---

📁 項目結構示意

my-monorepo/
├── apps/
│   ├── web/           # 用戶前臺
│   └── admin/         # 后臺管理系統
│
├── packages/
│   ├── ui/            # 通用組件庫
│   ├── utils/         # 工具函數庫
│   └── api-sdk/       # 請求 SDK
│
├── turbo.json         # TurboRepo 配置
└── pnpm-workspace.yaml # pnpm workspace 配置

---

?? 快速配置步驟

1. 初始化項目

mkdir my-monorepo && cd my-monorepo
pnpm init -y
pnpm add -D turbo

2. 創建配置文件

pnpm-workspace.yaml

packages:- "apps/*"- "packages/*"

turbo.json

{"pipeline": {"build": {"dependsOn": ["^build"],"outputs": ["dist/**"]},"dev": {"cache": false}}
}

3. 創建子項目

mkdir -p apps/web && cd apps/web
pnpm init -y
pnpm add react react-dom
pnpm add -D typescript vite

然后在每個子項目中配置 build, dev 腳本。例如：

"scripts": {"dev": "vite","build": "vite build"
}

4. 啟動并行任務

在根目錄執行：

pnpm turbo run build --filter=web

TurboRepo 會自動分析依賴關系，并只構建有變更的項目。

---

? 實際提效體現

• 項目構建時間從分鐘級縮短到秒級（得益于緩存）
• 新成員克隆項目后 pnpm install 一次即可啟動所有子項目
• 模塊更新后自動觸發對應子項目重新構建，無需手動清理緩存或強制 rebuild
• 多人協作中避免因版本不一致導致的問題

---

🧩 常見問題 & 解決方案

Q1: 每次構建還是很慢？

確保配置了 outputs 字段，Turbo 才能啟用緩存。

Q2: 如何發布單個包？

搭配 changesets 實現包版本自動管理 + 發布

Q3: 和 Lerna 比呢？

Turbo 更輕量現代，結合 pnpm 更高效。Lerna 已經不再主推。

---

🧠 總結

pnpm + TurboRepo 是當前構建高效前端多項目體系的黃金組合。

它不僅能提升構建效率，更重要的是：

讓多項目協作真正“像一個項目一樣自然”地流動起來。

如果你還在為多個項目構建時間長、依賴管理混亂、協作不順發愁，不妨試試這套組合。相信我，用了它，你很難再回去。