郑州网站建设douyanet,dw做网站 后台用什么后台,wordpress转换为html5,做糕点的网站有哪些微前端学习以及分享
注#xff1a;本次分享demo的源码github地址#xff1a;https://github.com/rondout/micro-frontend
什么是微前端
微前端的概念是由ThoughtWorks在2016年提出的#xff0c;它借鉴了微服务的架构理念#xff0c;核心在于将一个庞大的前端应用拆分成多…微前端学习以及分享
注本次分享demo的源码github地址https://github.com/rondout/micro-frontend
什么是微前端
微前端的概念是由ThoughtWorks在2016年提出的它借鉴了微服务的架构理念核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用每个应用都可以独立开发、独立运行、独立部署再将这些小型应用融合为一个完整的应用或者将原本运行已久、没有关联的几个应用融合为一个应用。微前端既可以将多个项目融合为一又可以减少项目之间的耦合提升项目扩展性相比一整块的前端仓库微前端架构下的前端仓库倾向于更小更灵活。
它主要解决了两个问题
随着项目迭代应用越来越庞大难以维护。跨团队或跨部门协作开发项目导致效率低下的问题。 微前端架构有以下特点 技术栈无关 主框架不限制接入应用的技术栈微应用具备完全自主权 独立开发、独立部署 微应用仓库独立前后端可独立开发部署完成后主框架自动完成同步更新 增量升级 在面对各种复杂场景时我们通常很难对一个已经存在的系统做全量的技术栈升级或重构而微前端是一种非常好的实施渐进式重构的手段和策略 独立运行时 每个微应用之间状态隔离运行时状态不共享
现有的微前端解决方案
现在主流的微前端解决方案有以下几种 qiankunqiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台在经过一批线上应用的充分检验及打磨后我们将其微前端内核抽取出来并开源希望能同时帮助社区有类似需求的系统更方便的构建自己的微前端系统。 MicroAppmicro-app是由京东前端团队推出的一款微前端框架它借鉴了WebComponent的思想通过js沙箱、样式隔离、元素隔离、路由隔离模拟实现了隔离特性从而实现微前端的组件化渲染旨在降低上手难度、提升工作效率。 micro-app和技术栈无关也不和业务绑定可以用于任何前端框架。 Wujie无界微前端方案基于 webcomponent 容器 iframe 沙箱能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户的核心诉求。
目前而言这三种方案都是不错的微前端解决方案但是目前而言qiankun对vite的支持仍然不友好qiankun本身是不支持vite构建的应用的还需要使用社区的插件而且我也有去做demo然后觉得坑太多了就选择了 MicroApp 方案来做微前端技术调研学习的方案。
学习目标
本次学习目标有以下几个 设计微前端架构 实现基座应用和子应用之间的通信 不同子应用之间的通信 数据共享以及数据私有 部署整个微前端架构以及有关应用
基座和子应用
微前端架构中很重要的一个概念就是基座和子应用基座就是整个应用的基础所有的子应用就是一个个单独的前端应用工程。在微前端架构中子应用是可以单独开发然后适配基座的最终整个应用运行后子应用是挂载在基座上的。
我这边设计的整个微前端架构的目录结构如下
assetsbase-appchild-vue3-appchild-react-appchild-native-appserverspackage.jsontsconfig.json
这其中 base-app、 child-vue3-app、 child-react-app、 child-native-app 都是一个单独的应用可独立运行也可和微前端架构一起整体运行。
在 package.json 中配置启动脚本 install:main: cd base-app pnpm install,install:vue: cd child-vue3-app pnpm install,install:react: cd child-react-app pnpm install,install:native: cd child-native-app pnpm install,install:server: cd servers pnpm install,dev:main: cd base-app pnpm dev,dev:vue: cd child-vue3-app pnpm dev,dev:react: cd child-react-app pnpm dev,dev:native: cd child-native-app pnpm dev,dev:server: cd servers pnpm dev,install: pnpm install:main pnpm install:vue pnpm install:react pnpm install:native pnpm install:server,dev: concurrently \pnpm dev:main\ \pnpm dev:vue\ \pnpm dev:react\ \pnpm dev:native\,我们在运行项目的时候可以先通过pnpm install命令安装所有的依赖(包括每一个子应用)然后通过pnpm dev命令启动项目。 这里大致解释一下 concurrently 这个工具就是用来同时启动多个命令比如我们这里启动了基座应用和子应用因此我们可以通过pnpm dev命令同时启动基座应用和子应用。
搭建基座和子应用
我们可以用任意的技术栈来搭建基座应用。由于我们现在目前以及后续的技术栈是 vue3 ts vite 这套。因此这里我也就以该技术栈搭建基座。
子应用我们可以使用各种技术栈搭建不同的子应用来进行技术实践我这边准备了一下几种技术栈
vue3 ts vitereact ts vite原生native app (使用nodejs搭建静态资源服务器)
搭建基座应用和子应用的流程这里就无需多讲了。也不是本次分享的重点因此这里略过。
我们设想的整个应用的结构如下 我们把整个应用分为3个部分
头部 headers侧边 aside内容区域 Content
我们期望的是头部和侧边区域是基座应用内容区域是子应用。比如我们的 demo 里面的侧边栏有首页、VUE APP、 REACT APP 以及 NATIVE APP首页是基座应用VUE APP 和 REACT APP 以及 NATIVE APP 是子应用。
初始化基座
首先是安装依赖
npm i micro-zoe/micro-app --save
// 或者
pnpm add micro-zoe/micro-app
// 或者
yarn add micro-zoe/micro-app然后根据官方文档操作步骤初始化基座的 MicroApp 有关的配置代码
import microApp from micro-zoe/micro-app;export function startMicro() {console.log(MicroApp start!);microApp.start();
}这样子我们的基座应用就初始化完成了非常简单。
加载子应用
在基座应用中直接使用 micro-app 标签加载子应用
template!-- name应用名称, url应用地址 --micro-app namemy-app urlhttp://localhost:3000//micro-app
/template
这里是以 vue 子应用为例后续完整代码会有react版本的。这里注意name和url只是这个标签的属性之二该标签还支持多种属性后续我们遇到一个说一个。比如我们在加载 vite 构建的子应用就需要加上iframe属性。因为目前vite构建的子应用目前只支持 iframe沙箱。
子应用TS配置
由于子应用无需安装 micro-app 依赖并且子应用通过window对象实现微前端功能以及和基座应用之间的通信因此我们最好是给子应用声明一下window对象上面的有关属性和方法
env.d.ts:
/** Author: shufei.han* Date: 2024-08-02 09:29:40* LastEditors: shufei.han* LastEditTime: 2024-08-29 12:05:55* FilePath: \micro-frontend\child-vue3-app\env.d.ts* Description: */
/// reference typesvite/client /
import type { MicroMessageType } from /models/base.model;
import ant-design-vue/typings/globaldeclare global {interface MicroMessageT any {type: MicroMessageType;value?: T;}interface Window {microApp: {addDataListener:(dataListener: (data: MicroMessage) any, autoTrigger?: boolean) void;removeDataListener:(dataListener: (data: MicroMessage) any, autoTrigger?: boolean) void;removeGlobalDataListener:(dataListener: (data: MicroMessage) any, autoTrigger?: boolean) void;addGlobalDataListener:(dataListener: (data: MicroMessage) any, autoTrigger?: boolean) void;clearDataListener: () void;getData: () MicroMessage;dispatch: T extends MicroMessage MicroMessage, C extends Function(data:T, cb?: C) void;getGlobalData: () MicroMessage;setGlobalData: T extends MicroMessage MicroMessage, C extends Function(data:T, cb?: C) void;};/** 应用名称 */__MICRO_APP_NAME__: string;/** 判断应用是否在微前端环境中 */__MICRO_APP_ENVIRONMENT__: boolean;/** 子应用的静态资源前缀 */__MICRO_APP_PUBLIC_PATH__: string;/** 子应用的基础路径 */__MICRO_APP_BASE_ROUTE__: string;/** 判断当前应用是否是主应用 */__MICRO_APP_BASE_APPLICATION__: string;/** 获取真实window即主应用window */rawWindow: Window;/** 获取真实document即主应用document */rawDocument: Document;}
}export {}子应用跨域配置
如果我们直接像上述配置一样直接接入子应用由于浏览器的同源策略如果子应用不支持跨域则会报跨域错误。因此我们需要在子应用所在的 web server 进行跨域配置
vite配置
export default defineConfig({server: {headers: {Access-Control-Allow-Origin: *,}}
})nodejs配置我的 native app 是使用express搭建的静态资源服务因此这里以该技术栈举例 private setCors() {this.instance.use((req, res, next) {res.header(Access-Control-Allow-Origin, *);res.header(Access-Control-Allow-Headers, Origin, X-Requested-With,Content-Type, Accept);next();});}环境变量
Micro App提供了一下环境变量用于我们开发过程中的某些环境有关的逻辑判断这些环境变量大多都通过绑定为 window 对象的属性的方式来使用因此如果我们使用Typescript开发子应用的话就要进行这些全局变量的变量声明我们在我们子应用中的声明文件vite构建的应用的默认声明文件就是根目录下面的env.d.ts
/// reference typesvite/client /declare global {interface Window {/** 应用名称 */__MICRO_APP_NAME__: string;/** 判断应用是否在微前端环境中 */__MICRO_APP_ENVIRONMENT__: boolean;/** 子应用的静态资源前缀 */__MICRO_APP_PUBLIC_PATH__: string;/** 子应用的基础路径 */__MICRO_APP_BASE_ROUTE__: string;/** 判断当前应用是否是主应用 */__MICRO_APP_BASE_APPLICATION__: string;/** 获取真实window即主应用window */rawWindow: Window;/** 获取真实document即主应用document */rawDocument: Document;}
}export {}生命周期
micro-app通过CustomEvent定义生命周期在组件渲染过程中会触发相应的生命周期事件。
生命周期列表 created micro-app标签初始化后加载资源前触发。 beforemount 加载资源完成后开始渲染之前触发。 mounted 子应用渲染结束后触发。 unmount 子应用卸载时触发。 error 子应用加载出错时触发只有会导致渲染终止的错误才会触发此生命周期。
监听方式
Vue
micro-appnamexxurlxxonCreated{() console.log(micro-app元素被创建)}onBeforemount{() console.log(即将渲染)}onMounted{() console.log(已经渲染完成)}onUnmount{() console.log(已经卸载)}onError{() console.log(加载出错)}
/
React:
因为React不支持自定义事件所以我们需要引入一个polyfill。
在标签所在的文件顶部 添加polyfill注释也要复制。
/** jsxRuntime classic */
/** jsx jsxCustomEvent */
import jsxCustomEvent from micro-zoe/micro-app/polyfill/jsx-custom-eventmicro-appnamexxurlxxonCreated{() console.log(micro-app元素被创建)}onBeforemount{() console.log(即将渲染)}onMounted{() console.log(已经渲染完成)}onUnmount{() console.log(已经卸载)}onError{() console.log(加载出错)}
/
数据通信
数据通信这一节的内容在微前端的领域非常重要这关乎着各个子应用之间以及子应用与主应用之间如何进行数据通信。
数据通信主要分为以下几种
主应用向子应用发送数据子应用向主应用发送数据各个子应用之间的互相通信
主应用向子应用发送数据
主应用给子应用传递数据有两种方式
通过data属性发送数据通过方法手动发送数据
通过data属性发送数据
data作为 micro-app 标签的属性用该属性作为主应用向子应用传递数据的中介
micro-app :nameSubApps.REACT createdcreated :datadata keep-alive urlhttp://localhost:4003/ iframe datachangehandleChange/micro-appconst data refMicroMessage({type: MicroMessageType.TEXT_MSG,value: This is a initial TextMessage
})onMounted(() {setInterval(() {data.value.value new value}, 1000)
})这种方式类似于我们平时组件中的父子组件传参区别就是在子应用中需要通过getData方法区手动获取数据该数据不是全响应式的基座中绑定的数据如果发生变化会动态更改传给子应用的值但是子应用需要通过getData方法手动获取更改后的值。。
子应用
const data window.microApp.getData()通过microApp.setData方法发送数据
除了通过data属性传递数据还可以通过microApp.setData方法动态发送数据
microApp.setData(name, message)这两种方法是有区别的第一种方法只能通过getData方法去手动的获取数据数据更新时子应用是无感知的。而第二种方法类似于发布订阅机制子应用可以随时监听到数据变化。
子应用通过注册事件监听数据
子应用可以使用window.microApp.addDataListener方法监听来自主应用的事件消息
window.microApp.addDataListener((data: MicroMessage) {handleMessage(data)
})我们在收到消息后通过handleMessage方法来统一处理消息。
这里建议虽然microApp只要求我们的消息格式是 Object 就可以但是我这边建议我们需要对消息进行一个统一的格式管理方便维护。
比如我这边利用TS的特性对基座和子应用之间的消息进行枚举然后再定义接口来约束消息的格式这样基座和子应用之间处理消息的时候根据消息类型来去做对应的处理逻辑
// 对消息类型进行枚举
export enum MicroMessageType {CHANGE_THEME change_theme,SET_COUNT set_count,TEXT_MSG text_msg,
}// 约束来基座和子应用之间通信的消息格式
interface MicroMessageT any {type: MicroMessageType;value?: T;
}总的来说通过data属性传递数据和通过发布订阅的模式消息事件监听传递数据是有区别的在实际场景中根据自己需要选取使用。 子应用向主应用发送数据
在微前端种不仅有主应用向子应用发送消息的场景通常也可能会有子应用向主应用发送消息的场景在 micro-app 中子应用通过 window.microApp.dispatch方法发送数据这里同样为了约束子应用向主应用发送的数据的格式我们可以在声明文件中约定子应用推送消息的格式
dispatch: T extends MicroMessage MicroMessage, C extends Function(data:T, cb?: C) void然后我们就可以定义一个公用的方法用来向主应用发送数据
export const sendMessageToBase (message: MicroMessage) {window.microApp.dispatch(message)
}// 使用
const handleSend () {sendMessageToBase({type: MicroMessageType.TEXT_MSG,value: {value},});
};全局数据通信
全局数据通信会向主应用和所有子应用发送数据在跨应用通信的场景中适用。
主应用发送数据:
import microApp from micro-zoe/micro-app;export const sendGlobalData (message: MicroMessage) {microApp.setGlobalData(message)
}子应用发送数据:
// setGlobalData只接受对象作为参数
window.microApp.setGlobalData({type: 全局数据})主应用获取数据
microApp.addGlobalDataListener((msg) {Modal.info({title:BaseApp收到全局数据, content: JSON.stringify(msg), centered:true})mainStore.setGlobalMessages(msg)
}// 或者使用getGlobalData手动获取数据
const data microApp.getGlobalData()子应用获取数据
window.microApp.addGlobalDataListener((data) {handleGlobalMessage(data)
})// 或者使用getGlobalData手动获取数据
const data window.microApp.getGlobalData()虚拟路由系统
MicroApp通过拦截浏览器路由事件以及自定义的location、history实现了一套虚拟路由系统子应用运行在这套虚拟路由系统中和主应用的路由进行隔离避免相互影响。建议全局配置路由模式
microApp.start({router-mode:native
});MicroApp 提供一下这几种路由模式
search模式native模式native-scope模式pure模式state模式
这里就不详细说明这些路由模式了这里只说常用的两种
search模式路由
search是默认模式通常不需要特意设置search模式下子应用的路由信息会作为query参数同步到浏览器地址上。这种模式最简单也不需要去做其他的配置。
但是这种模式的路由在页面上看起来会很奇怪不建议使用。 native模式路由
native模式是指放开路由隔离子应用和主应用共同基于浏览器路由进行渲染它拥有更加直观和友好的路由体验但配置方式更加复杂。需要基于vue-router的base配置或者react-router的basename配置
Vue3中的配置方法
我们使用4.x版本的vue-router在生成路由的方法createWebHashHistory中传入base配置
history: createWebHashHistory(import.meta.env.VITE_BASE_URL)这里需要注意这里配置的base需要和主应用中的该子应用的routerPath保持一致因此推荐使用另一种方法来设置而非通过环境变量
micro-app :nameSubApps.VUE createdcreated urlhttp://192.168.8.125:4002/ baseroute/vue/ iframe datachangehandleChange/micro-app// router/index.ts
const router createRouter({..............history: createWebHashHistory(window.__MICRO_APP_BASE_ROUTE__ || /),..............
}React中使用
可以根据官方文档进行配置。
注意根据子应用和主应用不同的路由模式我们可能需要进行不同的配置或者不需要配置具体查阅官方文档。
native模式的路由看着就比较清晰了 总结
本次分享是对自己学习MicroApp的过程的一个分享本次demo也只是一个非常基础的demo微前端架构需要考虑的内容还很多需要再实战中遇到问题再积累总结。 最后本次demo的源码放在了https://github.com/rondout/micro-frontend个人认为这个demo还是有一定的参考价值不光是微前端还包含了一些前端工程化的内容大家有兴趣的话可以clone下来参考后续如果有时间我也会继续维护和补充优化该demo。
