从混乱到秩序：用pnpm+changesets搞定Monorepo，效率提升300%

原创

于 2025-09-22 07:59:28 发布 · 1.1k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

你是不是也遇到过这样的场景？公司项目越来越多，每个项目都有自己的node_modules，磁盘空间被疯狂吞噬。公共组件修改一点东西，要在十几个项目里手动更新版本，一不小心就漏掉几个。

别担心，今天我要分享的Monorepo实战方案，能让你彻底告别这些烦恼。看完本文，你不仅能学到一套成熟的多项目管理方案，还能直接复制我们的实战代码到自己的项目里。

什么是Monorepo？为什么你需要它？

Monorepo简单来说就是把多个项目放在一个代码仓库里管理。就像把散落各地的分公司都整合到一栋办公大楼里，沟通协作效率瞬间提升。

传统多仓库管理就像让每个项目单独住一套房，自己的家具(node_modules)自己买，浪费空间还不好协调。而Monorepo让所有项目住进大平层，共享基础设施，依赖装一份大家共用。

我们团队在引入Monorepo后，依赖安装时间从原来的15分钟降到2分钟，磁盘空间节省了60%，代码复用率提升了3倍。这还只是开始，更大的好处是代码质量和协作效率的显著提升。

工具链选择：为什么是pnpm + changesets？

市面上Monorepo方案不少，但我们最终选择了pnpm + changesets的组合。原因很简单：pnpm的依赖管理效率最高，changesets的版本发布最丝滑。

pnpm的硬链接机制让node_modules不再占满你的硬盘，同样的依赖只存储一份。而changesets用最直观的方式管理版本更新和CHANGELOG生成，再也不用担心手动改版本号出错了。

先来看看我们项目的目录结构吧：

my-monorepo/
├── packages/
│   ├── utils/         # 公共工具库
│   │   ├── package.json
│   │   └── src/
│   ├── components/    # UI组件库
│   │   ├── package.json
│   │   └── src/
│   └── web-app/       # 实际业务项目
│       ├── package.json
│       └── src/
├── package.json       # 根目录的package.json
└── pnpm-workspace.yaml # pnpm工作区配置

手把手搭建Monorepo环境

首先确保你安装了pnpm，没有的话一行命令搞定：

npm install -g pnpm

然后在项目根目录创建pnpm-workspace.yaml，这是pnpm工作区的核心配置：

# 告诉pnpm哪些目录是工作区内的包
packages:
  - 'packages/*'
  - 'apps/*'
  - '!**/test/**' # 排除test目录

接下来配置根目录的package.json，这里可以放一些共享的脚本和配置：

{
   
   
  "name": "my-monorepo",
  "private": true,
  "scripts": {
   
   
    "dev": "turbo run dev",
    "build": "turbo run build",
    "test": "turbo run test"
  },
  "devDependencies": {
   
   
    "turbo": "^1.8.3",
    "@changesets/cli": "^2.26.0"
  }
}

现在让我们创建一个简单的工具包，在packages/utils目录下：

// packages/utils/package.json
{
   
   
  "name": "@my-monorepo/utils",
  "version": "1.0.0",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
   
   
    "build": "tsc",
    "dev": "tsc -w"
  }
}

对应的工具函数代码：

// packages/utils/src/index.ts
/**
 * 防抖函数 - 避免频繁调用
 * @param fn 要执行的函数
 * @param delay 延迟时间(毫秒)
 */
export function debounce<T extends (...args: any[]) => any>(
  fn: T,
  delay: number
): (...args: Parameters<T>) => void {