小四先生的云

介绍 最初接触 umi 微前端 时, 感觉这个就是两种子应用的加载方式 路由匹配方式 手动加载方式 后来在网上看到大佬的发的这个文章 探索微前端的场景极限, 才发现这个实现不简单, 引用了大佬的话： 在应用 A 中通过调用 loadMicroApp(B) 的方式唤起微应用 B，然后在微应用 B 中通过 loadMicroApp(C) 的方式唤起微应用 C，通过这样的调用链路即可很完美的完成产品上的诉求。 但是现实情况往往没有那么简单，前面提到过，若想要 loadMicroApp API 能符合预期的运行，我们需要确保被加载的微应用是不含自己的路由系统，否则会出现多个应用间路由系统互相 抢占/冲突 的情况。 这种场景下，我们其实只需要确保微应用的路由系统不会干扰到全局的 URL 系统即可。幸运的是 react-router 的 memory history 模式很好的解决了这一问题。 思路 主应用 app 有链接两个子应用 app1 和 app2 子应用 app1 可以通过 loadMicroApp(app1) 的方式打开子应用...

建议阅读 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 ...

需要 npm 账号 注册 npm 账号 常用 npm 命令 12345678910111213# 登录 npmnpm login# 发布 npm 包npm publish# 撤销发布整个包npm unpublish demo1 --force# 撤销发布指定版本npm unpublish demo1@1.0.0 --force# 撤销发布提醒npm deprecate demo1 "this project is deprecated" 手动上传 npm 包 使用 npm init 初始化项目 在 package.json 中添加发布配置, 使包公开, 私有包需要付费 123"publishConfig": { "access": "public"} 完整 package.json 1234567891011121314{ "name": "@zxiaosi/demo1", "version":...

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...

免责声明: 本项目仅供学习交流使用，不得用于商业用途，如有侵权请联系删除 项目地址项目介绍项目目录12345678910111213141516171819202122⊢ dist # 打包后的文件 [插件文件]⊢ public # 静态资源文件 ⨽ images # 图片资源 ⨽ manifest.json # 插件配置文件 [重要] ⨽ inject.js # 注入脚本 [inject-script.js]⊢ src # 源码文件 ⨽ apis # 接口请求 ⨽ background # 后台脚本 [background-script.js] ⨽ init.ts # 后台脚本入口 ⨽...