1分钟教你从0-1搭建Monorepo多包项目

最新推荐文章于 2025-10-29 17:18:41 发布

原创最新推荐文章于 2025-10-29 17:18:41 发布 · 4.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #monorepo #多包项目的搭建 #前端框架

前端框架专栏收录该内容

1 篇文章

订阅专栏

Monorepo是将多个项目放在一个仓库中管理，促进代码共享和开发便利，但可能带来构建速度慢的问题。与之对比，Multirepo更强调项目独立。pnpm作为包管理器，节省磁盘空间，加快安装速度，尤其适合monorepo。文章提到了pnpm的工作区配置和常用命令，并提醒读者注意Monorepo的结构和依赖管理。

1、monorepo是啥

在了解Monorepo之前，先说一下Multirepo Multirepo：指定的是不同项目由不同的仓库来存放管理
每个仓库都维护着各项目的npm包依赖 Monorepo指的是包含多个项目的单个仓库。各个项目可以单独运行、打包、发布

在这里插入图片描述

Multirepo：分散式管理
Monorepo：集中式管理

1.1 `Multirepo`和`Monorepo`特点

Muitirepo：
1、简单明朗
2、灵活
3、缺点：

项目之间难以建立联系
将模块打包为npm包，发布到npm上
挂载到全局变量window
直接copy一份代码

Monorepo：

良好的代码共享
新建项目方便
开发便利
缺点
- 巨石项目下载、
- 编译慢；
- 对项目打包构建难度较大

目前已有很多的开源项目使用monorepo，如：Vue、React、babel、Element ui等

1.2 管理工具

1.bazel
2.lerna(版本管理和发布)+yarn/npm
3.pnpm

1.3 pnpm简介

pnpm和npm、yarn一样，是一个包管理器
特点：

节省磁盘空间安装速度快支持monorepo

pnpm内部使用了基于内容寻址的方式来存储包文件的，不会重复安装同一个包的依赖；
如果使用yarn/npm。如果多个项目都依赖同一个包，那这个包可能会被安装多次
而pnpm安装的包，如果其他项目需要用到这个包，那么会使用硬链接去连接到这个包消除依赖提升，创建非扁平化的node_modules
“幽灵依赖”放在了node_modules下的.pnpm中

1.4 pnpm常用命令

// 安装依赖
pnpm i  /  pnpm install

// 单独安装
pnpm add xxx

// 删除依赖
pnpm remove xxx

// 运行项目
pnpm dev  / pnpm run dev

// 安装依赖到根目录
pnpm add xxx -w

// 安装依赖到packages中的包
pnpm add xxx -r

// 安装到某个包
pnpm add xxx --filter A

2、Monorepo结构

├─packages
|  ├─A
     ├─package.json
|  ├─B
     ├─package.json
|  ├─C
     ├─package.json
├─package.json
├─pnpm-workspace.yaml
├─README.md

2.1 pnpm-workspace.yaml

pnpm工作区包含/排除的目录
放在根目录下

packages:
  # all packages in direct subdirs of packages/
  - 'packages/*'
  
  # exclude packages that are inside test directories
  - '!**/A/**'

3 构建monorepo-demo

在这里插入图片描述

重要的事情说三遍：

## 1、不要在根目录package.json中的dependencies安装依赖，在各自的包里面安装，根目录主要是提供给工程配置用的！ 

## 2、packages中包的依赖尽量保持一致`

以上就是简单的monorepo的搭建，后面会根据项目拓展增加需要注意的点！