模块联邦和monorepo比较和pnpm包管理工具

本篇文章用于个人学习梳理模块联邦和monorepo项目的用法的区别比较下面是我通过豆包生成的核心区别对比维度Monorepo模块联邦 (Module Federation)核心目标统一管理多项目代码提升开发效率复用、版本、依赖解决跨应用模块共享实现微前端 / 微应用的模块动态加载代码存储所有项目代码在同一个仓库各应用代码在独立仓库也可 Monorepo构建方式可统一构建 / 单独构建依赖可 Hoist提升各应用独立构建运行时动态拉取远程模块模块共享时机开发时 / 构建时共享本地引用运行时共享远程加载版本依赖所有项目共享统一的依赖版本易管控各应用可独立管理依赖版本灵活但易冲突部署方式可单应用部署 / 批量部署版本强绑定各应用独立部署解耦性极高技术依赖无强依赖工具pnpm workspace、NX、Turborepo依赖 Webpack 5/Vite插件等构建工具跨团队协作适合单团队 / 紧密协作的多团队仓库权限统一适合多团队独立开发各团队维护自己的应用学习成本低核心是仓库管理中高需理解运行时共享、远程模块、版本兼容可以看到一个核心区别是项目结构多仓和单仓还有模块联邦是远程组件如果远程组件服务出问题则会影响所有使用的页面模块联邦远程组件封装 remote端new ModuleFederationPlugin({name: myComponent,filename: remoteEntry.js,exposes: {./Button: ./src/components/button/Button.vue,./Card: ./src/components/card/Card.vue,},shared: require(./package.json).dependencies,}),组件使用 host端new ModuleFederationPlugin({ name: main_app, remotes: { sharedComponent:remote_url }, shared: [react, react-dom] })remote_url是 远程组件名称 即 远程组件【ModuleFederationPlugin --name 】和 远程组件生成的js文件完整地址的组合比如上面例子 remote_url为 myComponentipport/.../remoteEntry.js页面内引入host端【ModuleFederationPlugin ---remotes key】/子组件名import *** from components声明使用monorepomonorepo pnpm turborepo svetle关于项目搭建一般来说一个标准的monorepo项目结构为monorepopackages 用于共享组件包apps 用于业务代码包pnpm-workspace.yaml不管是根组件还是下面的子组件 子项目 都需要pnpm init 并在package.json声明项目名称在根目录下需要pnpm-workspace.yaml 声明项目下 workspace( packages apps)packages下的共享组件可以直接pnpm i vue element-plus (以vue3框架为例) 封装.vue单文件组件 通过index.js (package.json main:) 入口文件 export 暴露组件 package.json name则为当前组件包的名称apps下的项目则可以通过pnpm add 组件包名 --filter 子项目name --workspace 将其安装本地依赖 给指定子项目安装本地依赖或者pnpm -filter 运行的工作空间 add 本地包名workspace:*指定是从本地的工作空间获取包当成功安装 可以在子项目package.json 看到有相应的本地依赖 软连接为 workspace:*如果想在根目录下给所有的子应用统一安装本地依赖 可以根目录 package.json 显示声明 安装包名workspace* 然后pnpm i 安装或者 pnpm i -w使用则直接通过import from 本地组件库名注意所有的子项目都必须是pnpm的项目 我之前vue项目直接通过vue create 创建 是 npm的项目所以在安装本地依赖的时候一直报错然后我把node_modules删除又重新用pnpm i 将项目转为pnpm 就可以了可以通过pnpm recursive ls查看当前workspace 如果和项目结构对应的workspace都存在则没有问题关于vue2 vue3的组件封装我们都知道vue3 element 局部引入使用 可以直接通过setup import from 直接在页面中使用vue2 则是要import {Form,FormItem,Input} from element-ui 并在components中组件注册 别名注册 ElForm:Form... 因为看elementui源码时抛出的组件其实为Form,FormItem 如果 是局部引入注册使用需要自己在页面components注册时进行名称转化关于turborepo对于生产环境包的打包我们可以使用turborepo 在根目录下配置文件进行打包, turborepo.json配置文件的内容大同小异上网就能查到 这里就不赘述了需要注意几点1.pipeline--tasks旧版本是用pipeline 我本地安装的版本是2.8 已经使用tasks2.在tasks里声明的命令需要和子项目命令一致如果根目录tasks里设置的启动和打包命令是dev build则子项目vue 等下面package.json scripts 也要是dev build而不能是serve或者其他turbo build/dev本地启动所有或者打包所有项目 即和直接执行子项目下面的命令效果一致 也可以通过--filter 子项目名称 指定运行的项目可以通过live-server本地起个服务看下打包后效果可以看到页面里直接就能加载出共享组件lerna项目搭建lerna init-- independent 将packages下面每个项目独立监听当包修改时 不会将所有的包版本都统一更新lerna.json 里设置npmClient: 包管理器默认npm 但是 monorepo项目需要 yarn | pnpm yarn (老牌稳定) pnpm 轻量 推荐useWorkSpaces:true packages.json里设置workspaces: 指定监听的工作空间packages/* (共享文件) apps/* 业务工作目录注意现在新版不支持useWorkspaces直接设置pnpm-workspace.yamllerna.json--packages:[ ]两者配置要统一pnpm install重新安装链接依赖通过lerna create xx 可以直接在packages下添加共享项目但是需要pnpm install 将包同步到工作区所以官网上也是说明了 如果在lerna使用 pnpm 最好是直接通过pnpm 操作pnpm 初始化创建项目 关联依赖等 在查看pnpm 工作空间关系树的时候需要注意pnpm ls -r是所有已经安装依赖的项目即存在node_modules如果初始化的项目无 node_modules pnpm ls -r depth 1 才能将packages下所有项目显示出来 经过实际测试最稳的写法 是 npx lerna list --all --loglevel verbose / lerna list --all --long可查看所有当前的工作空间 还可以使用可视化管理工具 nx graph可以实施监听包的变化 和相互引用lerna和 turbo 比较共同点lerna 和 turbo都需要在项目的根目录下的package.json 设置 private:true 防止发包将根目录发布区别turbo需要设置任务流水线 turbo.json tasks设置 apps 下所有子项目 scripts 运行命令都需要和 tasks里一致 具体见上面设置lerna 要执行npx lerna add-patch 初始化流水线命令 也是需要和所有子项目的scripts运行命令一致pnpm包管理工具相关对于monorepo 项目 pnpm list 直接查看依赖会返回空 pnpm list -r 查看当前项目下所有依赖树关系--filter 可查看子项目下的依赖关系可以通过pnpm list -r depth 1 XX 查看指定依赖已经安装版本和引用该依赖的文件pnpm why XX -r 则是查看实际有哪些项目安装了依赖不包含只有引用关系的项目 结合上面的命令 通过这个可以查看是否有哪些项目多余安装了依赖pnpm store path查看依赖实际安装的位置注意monorepo项目本质上是根据根目录的pnpm-workspace.yaml识别的工作区域 管理工作区域和包管理 所以 pnpm install 只能再项目的根目录下运行如果要使用vue create 新建业务项目 要注意使用 --no install不安装依赖 统一再根目录下安装依赖对于依赖混乱后的解决方法删除所有根目录 子包的node_modules package-lock pnpm-lock文件 重新 install正确的pnpm项目 查看pnpm 软连接生效子包 node_modules/依赖 ls -l查询是软连接指向根目录 node_modules .pnpm下是真实的依赖关于pnpm还有很多需要整理学习实际应用对于monorepo项目 我直接想到的就是如果能实现 下面不同框架的项目在package里有跨端共享组件 这样就可以实现一次封装 多个框架共用 经过科学上网 发现svetle可以实现这个效果 写法其实和原生的htmljscss很像未完。。参考链接mornorepohttps://mdnice.com/writing/9f102ec45931479cb21d3b72d75f523e模块联邦https://blog.csdn.net/gitblog_01123/article/details/152876805https://zhuanlan.zhihu.com/p/641955348svetle文档https://svelte.net.cn/docs/svelte/overview