1.monorepo简要介绍简单来说就是一种特殊的工程管理方案他将一个大应用拆分成多个子应用来管理比如说一个购物应用的前端分为购物车和首页普通单体目录下我们可能只放进view目录内来管理而monorepo工程结构就要对这两个页面拆分成应用来管理monorepo工程管理方案主要是为了解决一个应用的耦合问题如果封装的组件过多过大那么每个组件之间的联系只会越来越复杂。拆成不同的应用是一个比较恰当的解决方案2.monorepo基本目录结构----~monorepo---------%pnpm-workspace.yaml---------%package.json---------%apps------------------^project-1----------------------src----------------------package.json------------------^project-2----------------------src----------------------package.json---------%packages------------------^ui----------------------button------------------------------_package.json------------------^utils----------------------src-------------------------------_index.js----------------------package.json大致的monorepo工程结构如上图所示apps内部放的是主要项目文件packages这是整个项目本地的拆分包可能一些公用的组件或者是工具都放在这其中,app内部有两个包主要放项目文件且把一整个项目拆分为了两个工程分别为project-1 project-2目录中分别有src主要工程目录和package.json定义这个工程用的依赖packages 也一样里面的不同内容都会当作一个单独的工程且都有package.json 文件注意点1.pnpm-workspace.yaml 定义pnpm 要使用monorepo作为工程结构的文件有哪些,通常这样配置表示apps 目录与 packages 目录中的所有文件都使用monorepo管理//pnpm-workspace.yaml 内容 packages: - apps/* - packages/*2.我们应该把整个工程需要的基础依赖库安装到根目录比如说vite需要安装到与apps 和 packages目录的同级当然也可以使用pnpm 中的 -w 直接识别到根目录自动进行安装到根目录下。npm add vite -w 安装vite 到monorepo仓库根目录下3.当我们在packages下把相关工具库或者是拆分下来的ui组件建立好之后我们就可以通过pnpm add packages包中的package.json 下的name --workspace 去安装我们需要的本地库这是monorepo的关键把可拆分的做成库然后分开安装假如本地monorepo库内有一个按钮组件package.json 中定义name 字段为 ‘buttonComponent’那么使用pnpm add buttonComponent --workspace 即可引入这个本地依赖包3.总结monorepo就是一种工程管理方案也就是把想要拆分的一些功能和业务拆分成库每个库都有package.json, 和 node_moudles, 相当于一个项目中有多个项目的形式。比如说当我们需要某个组件时如果这个组件非常复杂那么我们可以单独把他作为一个项目这样就不用的强依赖我们本地的主要项目也简化了主项目的复杂度。然后用monorepo工程目录方案我们写好了单独的组件项目之后就再用pnpm 进行本地库的导入