前端Monorepo入门：从零开始搭建你的第一个项目
快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容：
创建一个适合新手的Monorepo教学项目，使用pnpm workspace管理包含两个简单React应用的代码库。要求提供分步指导，包括初始化配置、共享组件开发、依赖安装和脚本命令设置，并附带详细注释说明。 - 点击'项目生成'按钮，等待项目生成完整后预览效果
最近在研究前端工程化，发现很多大厂项目都在用Monorepo管理代码。作为一个刚接触这个概念的新手，我花了一周时间摸清了基本玩法，今天就用最直白的语言分享从零搭建的过程，适合像我一样的小白快速上手。
1. 什么是Monorepo？
简单说就是把多个项目放在同一个代码仓库里管理。比如公司有官网、后台、小程序三个前端项目，传统方式是开三个Git仓库，而Monorepo则放在同一个仓库的不同目录下。好处特别明显：
- 共享代码更方便（比如统一的工具函数库）
- 依赖包版本统一管理
- 跨项目修改能一次性提交
2. 准备工作
我用的是pnpm+workspace方案，相比yarn/npm更节省磁盘空间。需要先安装：
- 到官网下载安装pnpm（建议版本7.0+）
- 新建空文件夹作为仓库根目录
- 终端执行
pnpm init生成package.json
3. 初始化Monorepo结构
关键步骤是配置workspace，在根目录创建pnpm-workspace.yaml文件，指定子项目位置。比如我的结构：
- /packages/admin (后台管理系统)
- /packages/web (官网项目)
- /shared (公共组件库)
对应的workspace配置只要写：
packages: - 'packages/*' - 'shared'4. 创建React子项目
以admin项目为例：
- 进入packages目录
- 用vite快速初始化React项目：
pnpm create vite admin --template react-ts - 同样步骤创建web项目
这时候打开任意子项目的package.json，会发现依赖都安装在各自node_modules里。接下来我们要优化这个情况。
5. 提升公共依赖
在根目录执行：
pnpm add react react-dom -wpnpm list查看依赖树验证。6. 开发共享组件
在shared目录新建Button组件：
- 初始化package.json（注意设置"name": "@shared/ui"）
- 编写React组件代码
- 在admin和web项目中通过
pnpm add @shared/ui -F admin安装（-F指定安装到特定项目）
现在修改Button组件时，两个项目会实时同步更新，不用手动复制粘贴。
7. 配置统一脚本
根目录的package.json可以添加这些实用命令：
"scripts": { "dev": "pnpm --parallel -r dev", "build": "pnpm -r build", "lint": "pnpm -r lint" }解释几个参数： - -r 在所有子项目运行 - --parallel 并行执行（适合dev热更新） 现在执行pnpm dev能同时启动所有前端项目！
8. 调试技巧
遇到最多的问题是依赖引用报错，分享两个排查方法：
- 用
pnpm why 包名查看依赖被哪些项目引用 - 在vscode安装Workspace插件，能可视化查看项目关系
9. 进阶优化方向
等熟悉基础操作后，可以继续探索：
- 接入Changesets管理版本发布
- 配置Turborepo加速构建
- 集成Storybook管理组件库
最近在InsCode(快马)平台看到有现成的Monorepo模板，比自己配环境省心多了。他们的在线编辑器可以直接调试，部署按钮一点就能生成演示链接，特别适合新手快速验证想法。像我这样的小白第一次搭Monorepo用了三天，现在用平台半小时就能跑通全套流程，建议大家都去试试看。
快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容：
创建一个适合新手的Monorepo教学项目，使用pnpm workspace管理包含两个简单React应用的代码库。要求提供分步指导，包括初始化配置、共享组件开发、依赖安装和脚本命令设置，并附带详细注释说明。 - 点击'项目生成'按钮，等待项目生成完整后预览效果
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考