qiankun 使用笔记
qiankun 是一个基于 single-spa 的微前端实现库，借助于它可以快速搭建一个微前端架构系统。
使用微前端结构后可以：
- 在同一个页面可以使用多个前端框架（React, AngularJS, Vue 等）
- 用新框架编写新代码，无需重写已有的 app
- 代码的延迟加载可以缩减初次加载时长
主要解决的问题：
- 在一个 app 中不同的模块由不同的团队维护，而每个团队所用的技术栈可能不同，而且发版周期不同。
- 所使用的前端框架升级负担，新版本可能存在不兼容的更新，升级后可能对已有的业务产生 bug，造成难以升级。限制了前端框架新版本的使用。
为什么用 qiankun？
- 国内工程师维护，提供中文文档
- 已经在阿里众多项目中使用，比较健壮。
qiankun 的特性
- HTML Entry 接入方式，让接入微应用像使用 iframe 一样简单
- 样式隔离
- JS 沙箱
- 资源预加载
- 提供了 umi 插件，供 umi 应用一键切换成微前端架构系统。
项目实践
主应用
主应用不限技术栈，只需要提供一个容器 DOM，然后注册微应用并 start 即可。
这里以 create-react-app 脚手架为例：
npx create-react-app my-app
cd my-app
npm start然后安装 qiankun:
$ yarn add qiankun # 或者 npm i qiankun -S编辑 src/index.js ，注册微应用并启动：
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
{
name: 'reactApp',
entry: '//localhost:7100',
container: '#container',
activeRule: '/app-react',
},
{
name: 'vueApp',
entry: '//localhost:8080',
container: '#container',
activeRule: '/app-vue',
},
{
name: 'angularApp',
entry: '//localhost:4200',
container: '#container',
activeRule: '/app-angular',
},
]);
// 启动 qiankun
start();
当微应用信息注册完之后，一旦浏览器的 url 发生变化，便会自动触发 qiankun 的匹配逻辑，所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中，同时依次调用微应用暴露出的生命周期钩子。
例如点击主应用的某个菜单后路由变更为 /app-react，则 qiankun 会找到匹配的微应用 reactApp，发起网络请求，把 //localhost:7100 的内容插入到当前页面 id 为 container 的容器中。
上述是自动模式，如果微应用不是直接跟路由关联的时候，你也可以选择手动加载微应用的方式：
import { loadMicroApp } from 'qiankun';
loadMicroApp({
name: 'reactApp',
entry: '//localhost:7100',
container: '#container',
});
微应用
1.导出相应的生命周期钩子函数
微应用需要在自己的入口 js (通常就是你配置的 webpack 的 entry js) 导出 bootstrap、mount、unmount 三个生命周期钩子，以供主应用在适当的时机调用。
/**
* 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);
}
qiankun 基于 single-spa，所以你可以在这里找到更多关于微应用生命周期相关的文档说明。
无 webpack 等构建工具的应用接入方式请见这里
2.配置微应用的打包工具
为了让主应用能正确识别微应用暴露出来的一些信息，微应用的打包工具需要增加如下配置：
webpack:
const packageName = require('./package.json').name;
module.exports = {
output: {
library: `${packageName}-[name]`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${packageName}`,
},
};
注意事项
- 手动加载微应用时在 qiankun 2.4.5 版本之后有 bug，至 2.4.9 版本依然存在。主要表现为多个微应用切换时会失败，解决办法是暂时使用 2.4.4 版本。详见 同一个页面手动加载多个微应用报错 · Issue #1654 · umijs/qiankun (github.com)
网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。
赞同 0
评论 0 条
- 上周热门
- 银河麒麟添加网络打印机时，出现“client-error-not-possible”错误提示 1448
- 银河麒麟打印带有图像的文档时出错 1365
- 银河麒麟添加打印机时，出现“server-error-internal-error” 1151
- 统信桌面专业版【如何查询系统安装时间】 1073
- 统信操作系统各版本介绍 1070
- 统信桌面专业版【全盘安装UOS系统】介绍 1028
- 麒麟系统也能完整体验微信啦！ 984
- 统信【启动盘制作工具】使用介绍 627
- 统信桌面专业版【一个U盘做多个系统启动盘】的方法 575
- 信刻全自动档案蓝光光盘检测一体机 484
- 本周热议
- 我的信创开放社区兼职赚钱历程 40
- 今天你签到了吗？ 27
- 信创开放社区邀请他人注册的具体步骤如下 15
- 如何玩转信创开放社区—从小白进阶到专家 15
- 方德桌面操作系统 14
- 我有15积分有什么用? 13
- 用抖音玩法闯信创开放社区——用平台宣传企业产品服务 13
- 如何让你先人一步获得悬赏问题信息？（创作者必看） 12
- 2024中国信创产业发展大会暨中国信息科技创新与应用博览会 9
- 中央国家机关政府采购中心：应当将CPU、操作系统符合安全可靠测评要求纳入采购需求 8
热门标签更多
