你的代码仓库变成“毛线团”了？Monorepo 用 Turborepo 拆成“乐高积木”

你维护着五六个项目每个都单独开一个 Git 仓库。改一个公共组件要挨个进每个项目复制粘贴提交发布。一上午就没了。今天我们来学 Monorepo——用 Turborepo 把多个项目放进同一个仓库共享代码、统一构建、一键发布。让你的“多仓库噩梦”变成“搭积木游戏”。前言Polyrepo多仓库刚开始很爽每个项目独立互不干扰。但公共代码一多就成了复制粘贴地狱。你修了一个 bug五个项目都要同步漏一个线上就崩。Monorepo单仓库不是把代码随便堆在一起而是用工具Turborepo、Nx、Lerna把多个项目“有序地”放在同一个 Git 仓库里让它们能共享依赖、共享配置、共享构建缓存。今天我们用TurborepoVercel 出品Next.js 同款团队搭一个 Monorepo里面有 React 应用、Node API、一个共享的 UI 组件库。全程实战告别“复制粘贴工程师”。一、Monorepo 解决了什么代码共享公共组件放在packages/shared所有应用直接import。统一依赖根目录一个package.json用pnpm或yarn workspaces管理依赖避免重复安装。原子提交一次 commit 修改多个项目版本同步。任务缓存Turborepo 会记住每个任务的输入输出第二次构建直接取缓存秒完成。二、准备工作安装 pnpm 和 Turborepo我们选择pnpm作为包管理器比 npm/yarn 快节省磁盘空间。如果你没装 pnpmnpminstall-gpnpm创建项目目录mkdirmy-monorepocdmy-monorepopnpminit三、配置 pnpm workspace在根目录创建pnpm-workspace.yamlpackages:-apps/*-packages/*这样apps/下的每个子目录是一个应用比如 React 前端、Node 后端packages/下的子目录是共享包比如 UI 组件库、工具函数。四、安装 Turborepopnpmadd-gturbo# 或者在项目中安装pnpmadd-Dturbo创建turbo.json{$schema:https://turbo.build/schema.json,pipeline:{build:{dependsOn:[^build],outputs:[dist/**]},dev:{cache:false,persistent:true},lint:{},test:{}}}pipeline定义了任务依赖关系。^build表示执行某个包的build之前先构建它的依赖包。五、创建共享组件库mkdir-ppackages/uicdpackages/uipnpminitpackages/ui/package.json中给包起个名字重要{name:myrepo/ui,version:0.0.1,main:./src/index.tsx,types:./src/index.tsx,scripts:{build:tsc}}安装 React 和 TypeScript 依赖在根目录执行pnpmadd-Dreact react-dom typescript types/react-w-w表示安装在根 workspace。写一个简单的 Button 组件packages/ui/src/Button.tsximport React from react; export const Button: React.FC{ children: React.ReactNode } ({ children }) { return button style{{ padding: 8px 16px, background: blue, color: white }}{children}/button; };packages/ui/src/index.tsxexport { Button } from ./Button;配置 TypeScriptpackages/ui/tsconfig.json{compilerOptions:{jsx:react-jsx,module:ESNext,target:ES2020,declaration:true,outDir:dist,strict:true},include:[src]}六、创建 React 应用我们用 Vite 创建一个 React 应用放在apps/webcdappspnpmcreate vite web--templatereact-tscdweb修改apps/web/package.json添加对共享包的依赖dependencies:{myrepo/ui:workspace:*,...}workspace:*表示使用当前 workspace 中的对应包。在apps/web/src/App.tsx中引入共享按钮import { Button } from myrepo/ui; function App() { return ( div h1Monorepo Demo/h1 Button来自共享组件库的按钮/Button /div ); } export default App;现在在根目录运行pnpm install它会自动链接本地包。七、配置 Turborepo 任务修改根turbo.json让build任务在 React 应用里产生输出{pipeline:{build:{dependsOn:[^build],outputs:[dist/**,build/**]},dev:{cache:false,persistent:true}}}然后在根package.json添加脚本scripts:{dev:turbo dev,build:turbo build,lint:turbo lint}运行pnpm devTurborepo 会同时启动两个应用的开发服务器如果你还有 Node 后端的话。第一次启动正常速度第二次因为缓存秒开。八、共享配置与依赖提升想在根目录统一管理 TypeScript、ESLint、Prettier 配置在根目录创建tsconfig.base.json然后每个子项目的tsconfig.json继承它// apps/web/tsconfig.json{extends:../../tsconfig.base.json,compilerOptions:{outDir:./dist}}ESLint 同理根目录装eslint每个子项目通过根配置运行。九、生产构建与部署运行pnpm buildTurborepo 会按照依赖顺序构建先构建myrepo/ui再构建apps/web。并且第二次构建时会复用缓存毫秒级完成。构建产物可以分别部署apps/web/dist部署到 Vercel/NetlifyNode 应用部署到服务器。因为它们在一个仓库里但部署是独立的。十、总结Monorepo 不是银弹但能救你于复制粘贴适合场景多个项目共享代码、团队规模中等、希望统一 CI/CD。不适合项目之间几乎没有依赖、团队权限隔离要求极高可加CODEOWNERS缓解。工具选择Turborepo 速度快、配置简单Nx 功能更强但复杂Lerna 已过时现在用 Nx 或 Turborepo。下次你又在不同项目间同步代码时想一想能不能把它们放进同一个 Monorepo用 Turborepo 一键构建省下的时间正好可以摸会儿鱼。