windows搭建Monorepo环境

0.本文工具NodeJS:24.13pnpmvscode1.Monorepo 介绍Monorepo单一代码仓库是一种项目管理方式将多个相关的子项目如前端应用、组件库、工具包集中管理在同一个代码仓库中而非每个项目单独建仓。核心优势统一版本管理、跨项目依赖复用、代码共享更便捷、统一的构建 / 测试 / 发布流程。pnpm 适配性pnpm 原生支持 Monorepo通过 workspace 机制相比 npm/yarn更节省磁盘空间、安装速度更快且能精准管理子项目间的依赖关系。2.搭建过程(1) 前置条件我们按下winR输入cmd打开cmd先按照pnpm。# 全局安装 pnpmnpminstall-gpnpm# 验证安装pnpm-v2创建文件夹我们假设在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:pnpm10.32.1}(4)配置 pnpm workspacepnpm workspace 是 pnpm 内置的 Monorepo单体仓库 管理功能用于在单一代码仓库中高效管理多个相互关联的项目 / 包。核心概念Monorepo将多个项目如应用、组件库、工具库放在同一个 Git 仓库而非分散管理。Workspacepnpm 通过根目录的 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:pnpm10.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:pnpm10.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 目标子项目pnpmaddmy-monorepo/utilsworkspace:*-Fmy-monorepo/web说明-F–filter是 pnpm 的过滤指令指定为哪个子项目安装依赖注意上面的写法这是 pnpm 强制指定用本地工作区包的语法不会去 npm 公网查找。如果你写成pnpmaddmy-monorepo/utils-Fmy-monorepo/web它会优先去npm仓库去找相关的包关键是这个包真的有。。。 所以这里强制指定本地目录。安装后apps/web/package.json 会自动添加依赖3.运行在项目的根目录执行nodeapps/web/index.js可以看到正输出结果。本文源代码下载monorepo.zip链接:https://pan.baidu.com/s/1DsjfZDPkwqY2hbLj8-3Xww?pwd7ftv