Monorepo 项目实践
介绍
- Monorepo : 是一种管理项目的方式，即将多个项目放在一个仓库中，这样可以方便地管理项目之间的依赖关系，提高代码复用性，减少重复代码，提高开发效率
项目管理工具
Lerna +
Npm/Yarn/Pnpm Workspaces：一个快速、领先的构建系统，用于管理和发布来 自同一源码仓库的多个 JavaScript/TypeScript 软件包Lerna-Lite +
Npm/Yarn/Pnpm Workspaces：Lerna-Lite is a super light version of the original Lerna (Lerna-Lite 是原始 Lerna 的超轻版本)
微前端架构
组件库、通用方法等共用模块
Npm：多个项目可以共用同一个包，不重复安装，提高开发效率
模块联邦(Module Federation)：允许不同的应用或组件之间进行动态的模块共享
样式共用/隔离
Ant Design Token : 可以将多个项目的样式变量集中管理，并通过工具生成对应的样式文件，实现样式的共享。
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 小四先生的云！
相关推荐
2025-01-12
Qiankun+Vite实现微前端
介绍 Lerna 是一个快速、领先的构建系统, 用于管理和发布来自同一源码仓库的多个 JavaScript/TypeScript 软件包 Qiankun 是一个基于 single-spa 的微前端实现库, 在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统 Vite 是一个超快的前端构建工具, 赋能下一代 Web 应用的发展 思路 主应用 app 配置四个菜单 App、 App1、App2、App3 菜单 App 链接主应用 app, 可以调用子应用 app1、app2、app3 菜单 App1 链接子应用 app1, 样式未隔离, 组件库样式未隔离 菜单 App2 链接子应用 app2, 样式未隔离, 组件库样式隔离 菜单 App3 链接子应用 app3, 样式隔离, 组件库样式未隔离 项目地址实践包版本 node: 18.20.7 npm: 10.8.2 lerna: 8.1.8 vite: 6.1.0 qiankun: 2.10.16 node 版本小于 18, 安装 vite-plugin-qiankun 后启动会报错...
2024-12-19
模块联邦(Vite)
模块联邦 什么是模块联邦？模块联邦是 Webpack 5 的新特性，它允许不同的应用或组件之间进行动态的模块共享。 为什么要使用模块联邦？模块联邦可以解决多个应用或组件之间的依赖问题，避免重复安装依赖，提高开发效率。 Webpack Module Federation 项目地址项目目录123456789101112131415161718├── 根目录 ├── packages ├── host # host 项目 ├── src ├── App.tsx ├── vite-env.d.ts ├── vite.config.ts ├── remote # remote 项目 ├── src ├── components ├── CustomButton ├── index.tsx ├── index.ts ├── App.tsx ├──...
2024-08-19
Monorepos管理工具
Lerna 一个快速、领先的构建系统，用于管理和发布来 自同一源码仓库的多个 JavaScript/TypeScript 软件包。 常见命令 命令 描述 npm install -g lerna 全局安装 npx lerna init 初始化一个 lerna 项目 npx lerna clean 删除各个包下的 node_modules (常用) npx lerna bootstrap 安装依赖 (v7之后被移除) npx lerna link 链接互相引用的库 (v7之后被移除) npx lerna list [–scope=] [–exclude=] 列出本地软件包 npx lerna add [package] [–scope=] [–exclude=] 在所有包中添加依赖 npx lerna run [script] [–scope=] [–exclude=] 在每个工作区包中按拓扑顺序运行 npm script npx lerna exec...
2024-10-23
Umi实现微前端
建议阅读 Umi 微前端, 了解 微前端 的基本使用 介绍 Lerna 是一个快速、领先的构建系统, 用于管理和发布来自同一源码仓库的多个 JavaScript/TypeScript 软件包 Umi 企业级前端开发框架, 它提供了一套完整的 Web 应用开发解决方案, 包括路由、状态管理、数据请求、页面布局、主题定制等功能 项目地址实践包版本 node: 18.20.7 npm: 10.8.2 lerna: 8.1.8 umi: 4.4.0 项目目录12345678910111213141516171819├── 根目录 |── packages # 项目目录, 名称要跟 package.json 中 workspaces 以及 lerna.json 中 packages 一致 |── app # 主应用app |── src |── .umi # 动态生成的文件夹 |── .env ...
2025-02-18
Node Cli
Node Cli 常用工具介绍 @clack/prompts : 用于命令行交互 picocolors : 用于输出样式 unbuild : 用于打包项目 项目实践项目目录12345├── node-cli ├── .gitignore # git 忽略文件 ├── index.js # 入口文件 ├── package.json # 项目配置 ├── README.md # 项目说明 配置项目 初始化项目 1npm init -y 修改 package.json 文件内容如下 12345678910111213141516{ "name": "create-yourname-app", // 项目名称 npm i create-yourname-app -g "version":...
2024-11-13
Qiankun+Vite多个子应用共存
介绍 最初接触 umi 微前端 时, 感觉这个就是两种子应用的加载方式 路由匹配方式 手动加载方式 后来在网上看到大佬的发的这个文章 探索微前端的场景极限, 才发现这个实现不简单, 引用了大佬的话： 在应用 A 中通过调用 loadMicroApp(B) 的方式唤起微应用 B，然后在微应用 B 中通过 loadMicroApp(C) 的方式唤起微应用 C，通过这样的调用链路即可很完美的完成产品上的诉求。 但是现实情况往往没有那么简单，前面提到过，若想要 loadMicroApp API 能符合预期的运行，我们需要确保被加载的微应用是不含自己的路由系统，否则会出现多个应用间路由系统互相 抢占/冲突 的情况。 这种场景下，我们其实只需要确保微应用的路由系统不会干扰到全局的 URL 系统即可。幸运的是 react-router 的 memory history 模式很好的解决了这一问题。 思路 主应用 app 有链接两个子应用 app1 和 app2 子应用 app1 可以通过 loadMicroApp(app1) 的方式打开子应用...
评论
