前端架构师进阶：从零搭建 pnpm + Turborepo 高效 Monorepo 架构指南
在现代前端开发中，随着业务复杂度的上升，我们经常面临这样的困境：多个项目之间存在大量的重复代码（如 UI 组件、工具函数、配置项），在传统的 Multi-repo（多仓）模式下，跨项目复用代码通常需要通过 npm 发包，流程繁琐且调试困难。
为了解决这些架构难题，Monorepo（单体仓库） 逐渐成为了大厂和开源社区的主流选择（Vue 3, React, Next.js 均采用此架构）。本文将深入浅出，从理论解析到代码实战，带你使用目前业界最热门的组合 pnpm + Turborepo 搭建一套企业级的前端工程化架构。
一、 为什么要上 Monorepo？
在动手写代码之前，我们需要明确它解决了什么问题。
1. 传统 Multi-repo 的痛点
假设你维护着 Admin（后台）和 H5（移动端）两个项目，它们都使用同一套 UI 库。
- 代码复用难： 修改 UI 库后，需要
publish->install才能在业务项目中生效，调试流程漫长。 - 依赖版本混乱：
Admin使用 React 16，H5使用 React 18，长期迭代导致技术栈割裂。 - 基建重复： 每个仓库都需要单独配置 ESLint、Prettier、Webpack/Vite，维护成本随项目数量线性增长。
2. Monorepo 的优势
Monorepo 将多个逻辑独立的项目管理在同一个 Git 仓库中。
- 统一工作流： 一个命令启动所有项目，一个 Commit 完成跨项目修改。
- 依赖原子化： 源码级引用共享库，修改即时生效，无需发包。
- 统一依赖管理： 强制所有项目使用相同版本的核心库（如 React、Vue），避免依赖地狱。
二、 黄金技术栈选型
构建 Monorepo 有多种方案（Lerna, Nx, Rush），但目前社区最推崇的轻量级高性能方案是：
- 包管理工具：pnpm
- 优势： 依赖安装速度极快，独特的'软链'机制节省磁盘空间，且原生支持 Workspace（工作区）协议。
- 构建系统：Turborepo
- 优势： 由 Vercel 推出。核心能力是智能缓存和任务编排。如果你的代码没有变动，它会直接复用上次构建的缓存（Cache Hit），将 CI/CD 速度提升 10 倍以上。
三、 实战：从零搭建 Monorepo
接下来，我们将从空文件夹开始，搭建一个包含 apps（业务应用）和 packages（共享库）的标准架构。
Step 1: 初始化项目
创建目录并初始化 package.json：
mkdir my-monorepo
cd my-monorepo
pnpm init
修改根目录 package.json，添加 private: true（防止根目录被意外发布），并移除 main 等无关字段。
