使用 pnpm 和 Turborepo 搭建企业级前端 Monorepo 架构。通过统一工作区解决代码复用和依赖管理问题，利用 Turborepo 实现智能缓存和任务编排，显著提升构建效率和开发体验。包含从零初始化项目、配置 Workspace、创建共享库、关联依赖以及共享 TSConfig 等实战步骤。
在现代前端开发中，随着业务复杂度的上升，我们经常面临这样的困境：多个项目之间存在大量的重复代码（如 UI 组件、工具函数、配置项），在传统的 Multi-repo（多仓）模式下，跨项目复用代码通常需要通过 npm 发包，流程繁琐且调试困难。
为了解决这些架构难题，Monorepo（单体仓库） 逐渐成为了大厂和开源社区的主流选择（Vue 3, React, Next.js 均采用此架构）。本文将深入浅出，从理论解析到代码实战，带你使用目前业界最热门的组合 搭建一套企业级的前端工程化架构。
在动手写代码之前，我们需要明确它解决了什么问题。
假设你维护着 Admin（后台）和 H5（移动端）两个项目，它们都使用同一套 UI 库。
publish -> install 才能在业务项目中生效，调试流程漫长。Admin 使用 React 16，H5 使用 React 18，长期迭代导致技术栈割裂。Monorepo 将多个逻辑独立的项目管理在同一个 Git 仓库中。
构建 Monorepo 有多种方案（Lerna, Nx, Rush），但目前社区最推崇的轻量级高性能方案是：
接下来，我们将从空文件夹开始，搭建一个包含 apps（业务应用）和 packages（共享库）的标准架构。
创建目录并初始化 package.json：
mkdir my-monorepo
cd my-monorepo
pnpm init
修改根目录 package.json，添加 private: true（防止根目录被意外发布），并移除 main 等无关字段。
在根目录新建 pnpm-workspace.yaml 文件，定义工作区目录结构：
packages:
# 存放所有的业务项目（如 web, docs, admin）
- 'apps/*'
# 存放所有的共享工具库（如 ui, utils, config）
- 'packages/*'
我们在 packages 目录下创建一个简单的 UI 库，供业务项目调用。
packages/uinpm init -ypackages/ui/package.json：{
"name": "@repo/ui",
"version": "1.0.0",
"private": true,
"main": "./index.ts",
"types": "./index.ts",
"scripts": {
"lint": "eslint ."
}
}
packages/ui/index.ts，导出一个简单的函数或组件：export const add = (a: number, b: number) => {
return a + b;
};
export const Button = () => {
return "I am a shared button";
};
在 apps 目录下创建一个 Web 应用（这里以 Vite 为例，也可以是 Next.js）。
cd apps
# 使用 vite 模板创建
pnpm create vite web --template react-ts
这是 Monorepo 的核心。我们需要让 apps/web 使用 packages/ui，但不走 npm 远程仓库，而是直接链接本地代码。
在 apps/web 下执行：
# 这里的 --workspace 标志告诉 pnpm 优先使用本地工作区版本
pnpm add @repo/ui --filter web --workspace
此时观察 apps/web/package.json，你会发现依赖版本变成了 workspace:*：
{
"dependencies": {
"@repo/ui": "workspace:*"
}
}
现在，你可以在 apps/web/src/App.tsx 中直接引入使用了：
import { add, Button } from '@repo/ui';
console.log(add(1, 2)); // 3
当项目多了之后，我们需要通过一个命令同时启动所有项目，或者按依赖顺序构建。这时就需要 Turborepo。
在根目录安装：
pnpm add turbo -D -w
在根目录新建 turbo.json，这是 Turbo 的大脑：
{
"$schema": "https://turbo.build/schema.json",
"pipeline": {
"build": {
"dependsOn": ["^build"],
"outputs": ["dist/**", ".next/**"]
},
"lint": {
"dependsOn": []
},
"dev": {
"cache": false,
"persistent": true
}
}
}
修改根目录 package.json 的 scripts：
{
"scripts": {
"dev": "turbo dev",
"build": "turbo build",
"lint": "turbo lint"
}
}
现在，在根目录运行 pnpm build。
FULL TURBO，耗时几乎为 0ms，直接恢复缓存。在 Monorepo 中，最大的坑往往在于 ESLint、TSConfig 等配置文件的复用。我们不应该在每个项目中复制粘贴配置文件。
最佳实践：配置即代码 (Configuration as Code)。
创建 packages/tsconfig 目录，新建 base.json：
{
"compilerOptions": {
"strict": true,
"target": "ESNext",
"moduleResolution": "node",
"skipLibCheck": true
}
}
在 packages/tsconfig/package.json 中导出：
{
"name": "@repo/tsconfig",
"files": ["base.json"],
"publishConfig": {
"access": "public"
}
}
在 apps/web/package.json 中安装："@repo/tsconfig": "workspace:*"。
然后在 apps/web/tsconfig.json 中继承：
{
"extends": "@repo/tsconfig/base.json",
"compilerOptions": {
"baseUrl": "."
}
}
同理，ESLint、Prettier、Tailwind 配置都可以通过这种方式封装成独立的 Package 进行复用。
通过 pnpm Workspaces 解决依赖管理和物理链接，配合 Turborepo 解决任务编排和构建缓存，我们构建了一套现代化的前端 Monorepo 架构。
这套架构带来的收益是显著的：
对于追求极致工程化体验的团队来说，这不仅仅是工具的升级，更是开发思维的变革。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online