0.本文工具
- NodeJS:24.13
- pnpm
- vscode
1.Monorepo 介绍
Monorepo（单一代码仓库）是一种项目管理方式，将多个相关的子项目（如前端应用、组件库、工具包）集中管理在同一个代码仓库中，而非每个项目单独建仓。
- 核心优势：统一版本管理、跨项目依赖复用、代码共享更便捷、统一的构建 / 测试 / 发布流程。
- pnpm 适配性：pnpm 原生支持 Monorepo（通过 workspace 机制），相比 npm/yarn更节省磁盘空间、安装速度更快，且能精准管理子项目间的依赖关系。
2.搭建过程
(1) 前置条件
我们按下win+R，输入cmd，打开cmd，先按照pnpm。
# 全局安装 pnpmnpminstall-gpnpm# 验证安装pnpm-v（2）创建文件夹
我们假设在D盘中创建一个文件夹，名为monorepo ，然后使用vscode打开这个文件夹。
然后点击“终端”，点击“新建终端”
（3）初始化项目
在控制台中输入
pnpminit来初始化项目
修改一个package.json，在里面增加 “private”: true, 这个是意思是：标记根项目为私有，禁止发布
{"name":"monorepo","private":"true","version":"1.0.0","description":"pnpm monorepo 示例","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":[],"author":"","license":"ISC","packageManager":"pnpm@10.32.1"}(4)配置 pnpm workspace
pnpm workspace 是 pnpm 内置的 Monorepo（单体仓库） 管理功能，用于在单一代码仓库中高效管理多个相互关联的项目 / 包。
核心概念：
Monorepo：将多个项目（如应用、组件库、工具库）放在同一个 Git 仓库，而非分散管理。
Workspace：pnpm 通过根目录的 pnpm-workspace.yaml 文件，定义哪些目录属于工作区，实现统一管理。
这里选择“新建文件”，文件名为pnpm-workspace.yaml
参考代码如下：
# pnpm-workspace.yamlpackages:# 所有放在 packages 目录下的子项目-'packages/*'# 可选：单独指定前端应用目录（如 apps 下的项目）-'apps/*'# 排除不需要的目录（可选）-'!**/node_modules'-'!**/dist'
说明：packages/* 表示 packages 目录下的每个子文件夹都是一个独立子项目；可根据需求自定义目录（如 apps/ 放应用，packages/ 放公共包）。
然后创建子项目文件夹。
点击创建第一级文件夹，packages和apps
创建完后界面如下，然后分别在packages文件夹创建utils文件夹
在app文件夹下创建web文件夹。
创建完后如下所示
注意，只有一级文件夹，没显示折叠效果。
(5)初始化项目
创建完了以后，开始初始化项目。
先初始化packages/utils，在控制台中输入下面的指令
cdpackages/utilspnpminit然后修改name (设置唯一的 name，方便其他子项目引用）：)
{"name":"@my-monorepo/utils","version":"1.0.0","description":"","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":[],"author":"","license":"ISC","packageManager":"pnpm@10.32.1"}然后创建utils的入口文件，index.js
参考代码如下：
// 示例：提供一个格式化时间的工具函数exports.formatTime=(date)=>{returnnewDate(date).toLocaleString();};再初始化 apps/web
在控制台中输入
cd../../apps/webpnpminit注意，因为根据上面的顺序，我们处的目录，所以需要退两次， cd…/…/ 回到根目录
修改name 为@my-monorepo/web， 然后增加一行代码"private": true, 表示不发布
{"name":"@my-monorepo/web","version":"1.0.0","private":true,"description":"","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":[],"author":"","license":"ISC","packageManager":"pnpm@10.32.1"}
然后给 web模块增加入口文件，index.js
右击web，选择”新建文件“，文件名是 index.js
里面的代码如下：
// 引用同仓库的 utils 包const{formatTime}=require('@my-monorepo/utils');console.log('当前时间：',formatTime(newDate()));
(6)安装子项目间的依赖（核心：workspace 协议）
在根目录执行命令，为 apps/web 安装 @my-monorepo/utils 依赖（使用 pnpm 的 workspace 协议，关联本地子项目）：
# 回到根目录cd../../# 格式：pnpm add <子项目名> -F <目标子项目>pnpmadd@my-monorepo/utils@workspace:*-F@my-monorepo/web说明：-F（–filter）是 pnpm 的过滤指令，指定为哪个子项目安装依赖；
注意上面的写法，这是 pnpm 强制指定用本地工作区包的语法，不会去 npm 公网查找。
如果你写成
pnpmadd@my-monorepo/utils-F@my-monorepo/web它会优先去npm仓库去找相关的包，关键是这个包真的有。。。 所以这里强制指定本地目录。
安装后，apps/web/package.json 会自动添加依赖：
3.运行
在项目的根目录执行
nodeapps/web/index.js可以看到，正输出结果。
本文源代码下载：
monorepo.zip链接:
https://pan.baidu.com/s/1DsjfZDPkwqY2hbLj8-3Xww?pwd=7ftv
)
