Monorepo到底是什么？

你可Neng在想，Monorepo 就是把多个项目放到一个仓库里吧？

对啦，就是这么简单。

在 Node.js 生态里它让你Neng把前端、后端、工具包一起管理。

说实话，一开始我也觉得麻烦，后来发现它根本不是坑。

// 
全局安装pnpm
npm install -g pnpm

然后我们开始玩起项目的基础结构。

// 创建项目基本目录
mkdir prj_root
// 在项目根目录下 init
cd prj_root
pnpm init

Ru果你想在根目录先装几个共用依赖，直接往根下加吧。

pnpm add vite -w
pnpm add -D typescript -w
pnpm add -D @types/node -w
pnpm add -D tsx -w   # 安装 tsx 可Neng遇到安全拦截
# Ru果报错Ke以尝试：
pnpm add -D tsx -w --allow-build=esbuild
# 或者：
pnpm approve-builds
# 或者在 .npmrc 中配置全局允许：
# allow-build=esbuild
# 再跑一次安装，保证一切 OK
pnpm install

# 初始化 TypeScript 配置文件
pnpm tsc --init
# 创建 pnpm-workspace.yaml 文件并写入内容
touch pnpm-workspace.yaml
echo "packages:
  - 'packages/*'"> pnpm-workspace.yaml
# 打开文件确认没问题哦～
cat pnpm-workspace.yaml

// 在 packages 下新建 shared 子包并初始化 npm & TS 配置文件  
mkdir packages && cd packages  
mkdir shared && cd shared  
pnpm init  
pnpm tsc --init  
// 写一个简单的 interface，省略具体代码  
// src/index.ts 
export interface User { name: string; age: number; }

cd ../..   # 回到 root，然后进入 packages 再新建 backend  
mkdir backend && cd backend  
pnpm init  
pnpm tsc --init  
// 子包的 tsconfig 要继承根目录的配置  
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

前端我选择用 Vite + React，因为速度快又好玩。

cd ../..   # 回到 root，再进去 packages 新建 frontend
mkdir frontend && cd frontend
pnpm init  

// 用 Vite 快速启动一个 React 项目
npx create-vite@latest . --template react-ts  
// 把前端依赖也统一管理到根目录，方便以后升级或迁移
cd .. && cd ..   # 回到 root
pnpx husky-init && npm i husky   # 快速添加 Git hook Zuo lint 检查


`npm i` Neng让所有子包dou共享同一套依赖版本，省事又省心。说实话，我以前每个子包dou自己装依赖，现在整合后改一次就行了。
添加共享包到其他子包中去——hen简单！只需要 workspace 引用即可。

// 在需要使用共享库的子包里运行：
npm install @agent4/shared@workspace:*   // 或者使用 pnpm：
pnpm add @agent4/shared@workspace:* 
// 这样就Neng引用共享库里的接口定义、工具函数等啦！


"不对不对，我写成 workspace* 而不是 * 呢？其实两种写法dou行，不过第一种geng标准一点。”咱就是说大多时候开发时只要记得加上 `@workspace:` 就行了。
常见坑 & 小技巧分享

- 当你在同一个子包内多次运行 `npm run build` 时可Neng会出现缓存冲突；这时Ke以加 `--force` 或者手动清理 node_modules 再跑一次。
- Ru果某个子包里出现找不到模块错误，Ke以检查一下 `package.json` 的 `"private": true` 是否误删；私有模块默认不Neng被外部访问哦。
- 想让 Monorepo geng高效，Ke以开启 `node_modules/.cache` 的软链接，让所有子包共用同一个缓存；这个步骤稍微复杂点，但Neng显著减少磁盘占用。

小贴士：不要忘记geng新 .gitignore 跟踪所有 build 文件夹哦！毕竟打好的 dist 要排除掉，不然仓库会膨胀啊～还有，你Ke以把 `.env.*` 放进 `.git/info/exclude`，这样避免泄露密钥。

一下
Monorepo 并不是魔法，也不是必需品。但当你手头有几个紧密耦合的小项目时它Neng帮你统一依赖、快速同步变geng，让团队协作geng顺畅。只要掌握几条基本命令，你就Neng轻松上手。
希望这篇文章帮到了正在摸索 Monorepo 的朋友们。Ru果你还有什么疑问或者想聊聊具体实现细节，就随时留言～咱一起搞定吧！