专栏首页javascript艺术乾坤(qiankun)微前端初体验

乾坤(qiankun)微前端初体验

什么是微前端

通俗易懂的来说,微前端是可以将一个大应用的不同部分进行独立的部署,各个部分之间相互独立,独立部署的能力允许他们构建孤立或松散耦合的服务。即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。

微前端的核心设计理念

  • 技术栈无关 主框架不限制接入应用的技术栈,微应用具备完全自主权
  • 独立开发、独立部署 微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新
  • 增量升级 在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略
  • 独立运行时 每个微应用之间状态隔离,运行时状态不共享

微前端的核心目标是将巨石应用拆解成若干个可以独立的子应用

qiankun是一个基于single-spa的微前端实现库

qiankun快速上手

qiankun官网https://qiankun.umijs.org/zh/ 具体的代码示例 github上有一些qiankun的示例代码https://github.com/zhjing1019/QianKunDemo

主应用

主应用不限技术栈,只需要提供一个容器 DOM,然后注册微应用并 start 即可。

yarn add qiankun # 或者 npm i qiankun -S
import { registerMicroApps, start } from 'qiankun'; /**  * 在主应用中注册微应用  */ registerMicroApps([     {       name: 'vue sub-app1',       entry: '//localhost:7100/sub.html',       container: '#yourContainer',       activeRule: '/yourActiveRule',     },     {       name: 'vue sub-app2',       entry: '//localhost:7101',       container: '#yourContainer',       activeRule: '/yourActiveRule',     },   ],   {     beforeLoad: [       app => {         console.log('before load', app);       },     ],     beforeMount: [       app => {         console.log('before mount', app);       },     ],     afterMount: [       app => {         console.log('after mount', app);       },     ],     afterUnmount: [       app => {         console.log('after unload', app);         app.render({appContent: '', loading: false});       },     ],   } ); start();
注册微应用

当微应用信息注册完之后,一旦浏览器的 url 发生变化,便会自动触发 qiankun 的匹配逻辑,所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中,同时依次调用微应用暴露出的生命周期钩子 微应用需要在自己的入口 js (通常就是你配置的 webpack 的 entry js) 导出 bootstrap、mount、unmount 三个生命周期钩子,以供主应用在适当的时机调用。微应用不需要额外安装任何其他依赖即可接入 qiankun 主应用。

/**  * bootstrap 只会在微应用初始化的时候调用一次,下次微应用重新进入时会直接调用 mount 钩子,不会再重复触发 bootstrap。  * 通常我们可以在这里做一些全局变量的初始化,比如不会在 unmount 阶段被销毁的应用级别的缓存等。  */ export async function bootstrap() {   console.log('react app bootstraped'); } /**  * 应用每次进入都会调用 mount 方法,通常我们在这里触发应用的渲染方法  */ export async function mount(props) {   ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root')); } /**  * 应用每次 切出/卸载 会调用的方法,通常在这里我们会卸载微应用的应用实例  */ export async function unmount(props) {   ReactDOM.unmountComponentAtNode(     props.container ? props.container.querySelector('#root') : document.getElementById('root'),   ); } /**  * 可选生命周期钩子,仅使用 loadMicroApp 方式加载微应用时生效  */ export async function update(props) {   console.log('update props', props); }

主应用和子应用项目通信

initGloabalState(state) 定义全局状态,并返回通信方法,官方建议在主应用使用,微应用通过 props 获取通信方法。 MicroAppStateActions onGlobalStateChange: (callback: OnGlobalStateChangeCallback, fireImmediately?: boolean) => void, 在当前应用监听全局状态,有变更触发 callback,fireImmediately = true 立即触发 callback setGlobalState: (state: Record) => boolean, 按一级属性设置全局状态,微应用中只能修改已存在的一级属性 offGlobalStateChange: () => boolean,移除当前应用的状态监听,微应用 umount 时会默认调用

主应用:

import { initGlobalState, MicroAppStateActions } from 'qiankun'; // 初始化 state const actions: MicroAppStateActions = initGlobalState(state); actions.onGlobalStateChange((state, prev) => {   // state: 变更后的状态; prev 变更前的状态   console.log(state, prev); }); actions.setGlobalState(state); actions.offGlobalStateChange();

子应用

// 从生命周期 mount 中获取通信方法,使用方式和 master 一致 export function mount(props) {   props.onGlobalStateChange((state, prev) => {     // state: 变更后的状态; prev 变更前的状态     console.log(state, prev);   });   props.setGlobalState(state); }
js变量隔离

每个子应用都有相应的生命周期,同一时间内,只会有一个子应用的实例生效。js沙箱封装在qiankun的生命周期中。当一个子应用被销毁,其js沙箱也就被销毁。唯一不足的地方是,window的对象,无法隔离,最好不要绑定原型。

css污染

1、scoped(暂时解决方案:主应用的样式使用特殊class或者scoped) 2、主应用可以通过设置 prefixCls 的方式避免冲突 3、配置 webpack 修改 less 变量

{   loader: 'less-loader', + options: { +   modifyVars: { +     '@ant-prefix': 'yourPrefix', +   }, +   javascriptEnabled: true, + }, }

qiankun的具体详细解析源码 https://www.jianshu.com/p/db08174fa4fc?utm_campaign=shakespeare

本文分享自微信公众号 - javascript艺术(gh_4e5484fd6b52),作者:zhangjing

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-04-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue-qiankun公司微前端项稳定目落地后的总结(附github仓库demo,将会持续更新)

    微前端的讲解概念和理论的文章非常多,这里我就不谈了,我讲的肯定没有他们好。同样的github上的demo也非常多,然后我在公司项目引入时还是发现了许多问题,可能...

    aehyok
  • 【微前端】10分钟学会乾坤大挪移

    今天刚刚学习了一个微前端框架——乾坤,正着热乎劲,写一篇入门博客。这篇文章不会讨论太多的原理和实现,只是一个入门写 Hello World 的教程。

    童欧巴
  • 让前端走进微时代, 微微一弄很哇塞!

    微前端这个词这两年很频繁的出现在大家的视野中,主要是把微服务的概念引入到了前端,让前端的多个模块或者应用解耦,做到让前端的子模块独立仓储,独立运行,独立部署。

    yuanyi928
  • 前端微服务一站式解决方案-不是切页面就是微服务

         这件事有两个解决方案第一子应用请求全路径 第二前端对请求进行拦截主工程反向代理 还有一个突出的问题就去请求命名空间的问题,不能所有的请求都请求/a...

    吴文周
  • 微前端架构初探以及我的前端技术盘点

    最近几年微前端一直是前端界的热门议题, 它类似于微服务架构, 主要面向于浏览器端,能将一个复杂而庞大的单体应用拆分为多个功能模块清晰且独立的子应用,且共同服于务...

    徐小夕
  • 记一次 微前端 qiankun 项目 实践 !!! 防踩坑指南

    最近在做微前端的项目 , 过程中真是踩了不少坑 , 在有限的资料中不断试错 , 默默无语两行泪 哈哈.  在此次将采坑部分都记录下来, 让更多的人少走点弯路 ,...

    王小婷
  • 微前端 qiankun 项目实践 !!! 防踩坑指南

    最近在做微前端的项目 , 过程中真是踩了不少坑 , 在有限的资料中不断试错 , 默默无语两行泪 哈哈. 在此次将采坑部分都记录下来, 让更多的人少走点弯路 ,...

    小丑同学
  • qiankun + vue 中使用 keep-alive 维持微应用实例

    qiankun + vue2.6 + element-ui, 通过标签却换不同功能, 当前一个子应用下可以对应多个功能, 及 存在统一应用下切换,跨应用切换。 ...

    copy_left
  • 上线一个阿里 QianKun “微前端”,逼走了2 位 90后

    鉴于当下流行的开发模式几乎都是前后端分离的,为了组建好团队,前端、后端几乎1比1配置好像有些不太对,因此稍微倾斜了下后端,按80%配置前端,这个比例到底是不是合...

    winty
  • 2019 Java 全栈工程师进阶路线图,一定要收藏!

    技术更新日新月异,对于初入职场的同学来说,经常会困惑该往那个方向发展,这一点松哥是深有体会的。

    江南一点雨
  • 万字解析微前端、微前端框架qiankun以及源码

    本文将针对微前端框架 qiankun 的源码进行深入解析,在源码讲解之前,我们先来了解一下什么是 微前端。

    前端达人
  • 基于微前端的大型中台项目融合方案

    关于微前端是什么,以及微前端落地方案,社区遍地都是,本篇文章不会再赘述这些基础知识。当然如果你没了解过上述知识,也可以直接读下这篇文章,足够浅显易懂。 这篇文章...

    coder_koala
  • 用 Python 爬取小说

    Python 爬取网络的内容是非常方便的,但是在使用之前,要有一些前端的知识,比如: HTML、 CSS、XPath 等知识,再会一点点 Python 的内容就...

    zucchiniy
  • 独孤九剑与乾坤大挪移—uikiller插件系统

    上篇《雷神之锤》介绍了uikiller的基本用法,有人说长按功能可以取名为蓄力攻击、重击,我觉得还真是可以的,但就是感觉招数名字不够大气。在这里还要给大家道个歉...

    张晓衡
  • 博物馆里过大年!腾讯博物官联合中国文物报发起「百“牛”拜年」新春系列活动

    ? 牛年春节即将来临,为了适应疫情防控需要,2月1日,文化和旅游部办公厅发布《关于开展“云游合家欢 就地过大年”——全国旅游宣传推广活动的通知》,倡导春节期间...

    腾讯文旅
  • 前端求职初体验

    experience 先说下自己的经历吧,之前根本没有考虑过做这一行(天天宅在寝室打LOL),大三上结束的那个寒假还特意买了个微星游戏本(曾经的我有个王者的梦。...

    牧云云
  • 微前端框架 qiankun 项目实战(一)--本地开发篇

    公司使用技术栈是vue,最近遇到了一个需求,要把原有后台管理系统的功能模块搬迁到新的后台管理系统上面去。原本这没有多复杂的事,直接复制粘贴改改就可以,但是有这么...

    coder_koala
  • 微前端框架 qiankun 项目实战(一)--本地开发篇

    公司使用技术栈是vue,最近遇到了一个需求,要把原有后台管理系统的功能模块搬迁到新的后台管理系统上面去。原本这没有多复杂的事,直接复制粘贴改改就可以,但是有这么...

    落落落洛克
  • 了解一下微前端

    微前端不知道什么时候开始变得非常火,结合后台的微服务,可以把一个系统切分为一个个子模块。比如用户模块、权限模块、订单模块等,每一个模块可以单独开发、测试、部署,...

    wade

扫码关注云+社区

领取腾讯云代金券