vue3 + pnpm 打造一个 monorepo 项目

Monorepo 和 Multirepo

单一仓库（Monorepo）架构，可以理解为：利用单一仓库来管理多个packages的一种策略或手段；与其相对的是多仓库（Multirepo）架构

Monorepo 目录中除了会有公共的package.json依赖以外，在每个sub-package子包下面，也会有其特有的package.json依赖。

兄弟模块之间可以通过模块 package.json 定义的 name 相互引用，保证模块之间的独立性

# monorepo目录结构
monorepo-demo
├── packages
│   ├─ module-a
│   │  ├─ src             # 模块 a 的源码
│   │  ├─ node_modules    # 模块 a 的 node_modules
│   │  └─ package.json    # 仅模块 a 的依赖
│   └─ module-b
│      ├─ src             # 模块 b 的源码
│      └─ package.json    # 仅模块 b 的依赖
├── .eslintrc             # 配置文件，对整个项目生效
├── node_modules          # 所有子包公共的 node_modules
└── package.json          # 所有子包公共的依赖

Multirepo 更倾向与在项目制中，将一个个项目使用不同的仓库进行隔离，每一个项目下使用独有的package.json来管理依赖

# multirepo-a目录结构
multirepo-a
├── src
├── .eslintrc
├── node_modules
└── package.json   

# multirepo-b目录结构
multirepo-b
├── src
├── .eslintrc
├── node_modules
└── package.json

Monorepo 工具

在采用 Monorepo（单一仓库）架构的软件开发中，工具的选择是至关重要的。合适的 Monorepo 工具能够帮助团队更高效地管理大规模代码库、提升协同开发体验以及优化构建和部署流程。

直至 2024 年，目前在前端界比较流行的 Monorepo 工具有 Pnpm Workspaces、Yarn Workspaces、npm Workspaces、Rush、

Turborepo、Lerna、Yalc、和 Nx

强烈推荐使用Pnpm Workspaces 作为 Monorepo 项目的依赖管理工具

那么 Monorepo 与包管理工具（npm、yarn、pnpm）之间是一种怎样的关系？

这些包管理工具与 monorepo 的关系在于，它们可以为 monorepo 提供依赖安装与依赖管理的支持，借助自身对 workspace 的支持，允许在 monorepo 中的不同子项目之间共享依赖项，并提供一种管理这些共享依赖项的方式，这可以简化依赖项管理和构建过程，并提高开发效率。

Monorepo 项目搭建

背景

传统的多仓库 Multirepo 模式，通常都是一个仓库存放一个项目。比如现在你有三个项目，就需要创建三个远程仓库，并且需要为每个项目单独安装和升级依赖

而单一仓库 Monorepo 模式，就是在一个仓库中管理多个项目，这些项目可以是独立的，也可以相互依赖。通过 Monorepo，多个项目可以共享依赖。比如多个项目都需要 lodash，那我们也只需安装一次即可

pnpm i lodash -w

当然，Monorepo 中除了公共的package.json依赖以外，在每个sub-package子包下面，也会有其私有的package.json依赖

我们本次选择Pnpm Workspaces 作为 Monorepo 项目的依赖管理工具，一起来搭建一个 monorepo 项目

安装包管理工具

全局安装 pnpm

npm i pnpm -g

初始化项目

创建一个新的项目目录 pnpm-monorepo，根目录运行 pnpm init 创建 package.json 文件

然后根目录新建一个文件夹 packages，用于存储子包

新建 packages/libc-shared（ 共享包 ），用于存放多个项目或组件之间共享的代码 。运行 pnpm init 创建 package.json 文件，修改 package.json 的 name 为 "@libc/shared"；修改 package.json 的 main 入口文件路径字段为"src/index.js"

{
  "name": "@libc/shared",
  "version": "1.0.0",
  "main": "src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
}

新建 packages/libc-ui（ 公共组件包 ），即UI组件库，这里我们直接 clone 了 iview-ui-plus 代码。运行 pnpm install 安装依赖，

修改 package.json 的 name 为 "@libc/ui"；修改 package.json 的 main 入口文件路径字段为"src/index.js"

然后我们在 packages 下创建两个 vue 项目，vue-dom1 和 vue-dom2，运行脚本pnpm create vue@latest。由于两个项目的依赖是完全一样的，我们可以将 dependencies、devDependencies 复制到外层 package.json 中当做公共依赖，然后pnpm install 安装一次即可

到了这一步，vue 项目还是不能运行，必须要先配置 workspace，用于支持多包存储库让子包 vue 项目可以访问到我们的公共依赖

配置workspace

根目录新建一个 pnpm-workspace.yaml，将 packages 下所有的目录都作为包进行管理

packages:
  # all packages in direct subdirs of packages/
  - 'packages/*'

pnpm-monorepo 最终项目结构

pnpm-monorepo/
├── packages/
│   ├── libc-shared/
│   ├── libc-ui/
│   ├── vue-dome1/
│   └── vue-dome2/
├── package.json
└── pnpm-workspace.yaml

子包共享

此时，pnpm-workspace.yaml工作空间下的每个子包都可以共享我们的公共依赖了。还有个问题是，兄弟模块之间如何共享呢？

之前我们说过，子包之间可以通过 package.json 定义的 name 相互引用，一起看下两个实际场景

1. 如何把子包 libc-shared 共享出去？

用--workspace参数去安装共享子包，会去 workspace工作空间中找依赖项并安装

pnpm install @libc/shared --workspace -w

package.json 中就会自动添加如下依赖，"workspace:" 只会解析本地 workspace 包含的 package

"dependencies": {
   "@libc/shared": "workspace:^"
 }

此时，vue 项目就可以使用公共包 libc-shared 里的方法，import 引入即可

import { isObject } from '@libc/shared'

1. 如何把子包 libc-ui 共享出去？

重复一下上面的步骤，然后我们去引用一个 button组件，发现报错了 Failed to resolve import "./base" from "../libc-ui/src/components/typography/title.vue". Does the file exist?

vite.config.js 中添加 extensions 即可解决，配置一下省略的扩展名列表

resolve: {
  extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
}

虽然 button 组件引用成功了，但是发现没有任何样式效果。在 libc-ui/src/index.js 文件中导入一下样式文件就行了

import "./styles/index.less";

依赖

公共依赖

全局安装公共依赖 lodash。需要加-w（在工作空间的根目录中启动 pnpm）

pnpm install lodash -w

这样，vue-dom1 和 vue-dom2 这两个 vue项目就都可以使用 lodash 库了

局部依赖

如果只有 vue-dom1 项目用到了 lodash，我们也可以安装到 vue-dom1 项目内部，不作为公共依赖项，有两种方法可以实现

1. cd 到 src/packages/vue-dom1 目录下，直接安装

pnpm install lodash

1. 在任意目录下，使用 --filter 参数进行安装；package_selector：package.json 对应的 name 字段

pnpm install lodash --filter <package_selector>

shamefully-hoist

shamefully-hoist，默认 false

• false：node_modules下只能看到直接依赖的套件，次级依赖在node_modules/.pnpm 目录下；无法访问其他子包局部安装的依赖项，例如，vue-dome2 安装的 lodash，vue-dome1 是访问不到的

• true：將所有套件都拉升到 node_modules 目錄下，能访问到其他子包局部安装的依赖项，例如，vue-dome2 安装的 lodash，vue-dome1 是能访问到的

// .npmrc

# pnpm 配置
shamefully-hoist=false

配套代码

GitHub - burc-li/pnpm-monorepo: vue3 + pnpm + monorepo 项目 demo

参考文档

为什么 pnpm+monorepo 是组件库项目的最佳实践

突破项目瓶颈：2024 年 Monorepo 工具选择和实践 | BEEZEN

GitHub - Tyh2001/vue3-pnpm-monorepo: vue3 + pnpm + monorepo 项目 demo