👌我帮你把文章整理成一个更清晰、专业、又容易读的版本（逻辑流畅，重点突出，风格更像技术分享文档）：

Monorepo 是什么？

Monorepo（单一代码库） 是一种将多个项目集中存放在同一个仓库中的管理方式。 许多知名开源项目（如 React、Vue、Vite 等）都在使用 Monorepo 来管理它们的代码。

👉 通俗理解： 在一个目录下创建多个项目，每个项目相互独立，又能统一管理。 就像 Maven 的多模块管理 —— 一个父 pom 管理多个子 pom，Monorepo 也是类似的理念。

Monorepo 的好处

1. 代码复用 公共组件、工具函数、类型声明、样式等可放入 common 子包，其他项目只需 pnpm add common 就能使用，就像安装普通 npm 包一样。

2. 独立构建与部署 每个子包都有自己的 package.json，可以独立安装依赖、运行测试、启动服务和构建部署，互不干扰。

3. 降低切换成本 所有代码在一个仓库内，clone、切换分支、安装依赖更方便，不需要在多个仓库之间来回跳转。

4. 节省磁盘空间 使用 pnpm 管理依赖时，子包间可以共享依赖，避免重复安装，显著节约磁盘空间。

5. 提交与协作更方便 增加新组件或特性时，只需在同一个仓库提交一个 PR，不必在多个仓库分别提 MR。

6. 代码评审更高效 一个特性或功能的改动可以在同一个 MR 中完成代码检视，无需在多个仓库切换上下文。

7. 灵活扩展 新增工程只需在 packages 下添加一个子包，无需创建新仓库，也减少了分支保护、CI 配置、标签管理等运维负担。

项目结构示例

一个最小的 Monorepo Demo 结构如下：

mono-demo/
├── node_modules
├── package.json
├── packages
│   ├── mono-ui      # 公共 UI 组件库
│   │   └── package.json
│   └── mono-web     # Web 应用
│       ├── node_modules
│       │   └── @mono-demo/ui -> ../../../mono-ui  # 本地链接
│       └── package.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml

配置文件示例

pnpm-workspace.yaml

packages:
  - "packages/**"

根目录 package.json

{
  "name": "mono-demo",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "preinstall": "npx only-allow pnpm"
  },
  "engines": {
    "node": ">=16"
  },
  "workspaces": [
    "packages/*"
  ],
  "packageManager": "pnpm@10.13.1"
}

packages/mono-ui/package.json

{
  "name": "@mono-demo/ui",
  "version": "1.0.0",
  "main": "index.js",
  "license": "ISC",
  "packageManager": "pnpm@10.13.1"
}

packages/mono-web/package.json

{
  "name": "@mono-demo/web",
  "version": "1.0.0",
  "main": "index.js",
  "private": true,
  "license": "ISC",
  "packageManager": "pnpm@10.13.1"
}

如何在 Web 应用中安装 UI 包

在根目录执行以下命令，把 @mono-demo/ui 安装到 @mono-demo/web：

pnpm -F @mono-demo/web add @mono-demo/ui --workspace

执行后，mono-web/package.json 的 dependencies 中会出现：

"dependencies": {
  "@mono-demo/ui": "workspace:*"
}

这样在 mono-web 中就能直接 import 并使用 @mono-demo/ui 提供的组件了 🎉。