qiankun 是一个基于 single-spa 的微前端实现库
umi 插件，提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统。
搭建主应用
yarn create umi
yarn add @umijs/plugin-qiankun -D
注册qiankun
config.js 添加qiankun配置项
qiankun: {
master: {
// 注册子应用信息
apps: [
{
name: 'app1', // 唯一 id
entry: '//localhost:8081', // html entry
},
],
// jsSandbox: true, // 是否启用 js 沙箱，默认为 false
// prefetch: true, // 是否启用 prefetch 特性，默认为 true
},
},
引用子应用
- 使用路由的方式
config.js 的 router 配置中添加
{
name: 'app1',
path: '/app1',
microApp: 'app1', // 对应上一步注册中的name
},
- 使用组件的方式
在组件中
import { MicroApp } from 'umi';
export function MyPage() {
return (
<div>
<div>
<MicroApp name="app1" />
</div>
</div>
)
}
搭建子应用
yarn create umi
yarn add @umijs/plugin-qiankun -D
注册qiankun
config.js 添加qiankun配置项
qiankun: {
slave: {}
}
注册钩子 src/app.ts
export const qiankun = {
// 应用加载之前
async bootstrap(props) {
console.log('app1 bootstrap', props);
},
// 应用 render 之前触发
async mount(props) {
console.log('app1 mount', props);
},
// 应用卸载之后触发
async unmount(props) {
console.log('app1 unmount', props);
},
};
排坑
在config.js 中注册qiankun后运行项目，观察到react项目被渲染到了id为root-master/root-slave 的DOM节点，而非antdpro默认的id为root的DOM节点，然而在最新版本的antdpro中，#root节点已经被写了一些预设样式，如height:100% ，会将开启qiankun后的真正的应用试图“挤”到视窗下方，影响体验。
DOM结构
所以需要将相关的预设样式清除，需要调整的地方有src/document.ejs，src/global.less
然后便可以继续愉快的玩耍了。
通信
主项目
- 使用路由方式引用的
主项目新建 src/app.ts
// src/app.ts
export function useQiankunStateForSlave() {
const [masterState, setMasterState] = useState({});
return {
masterState,
setMasterState,
}
}
其中state的值可以自己定义。但是，由于app.ts 没有在<Provider> 内部，所以无法通过useSelector和useDispatch来获取主应用model中的值和dispatch方法。
- 使用组件方式引用的
通过props传值
function MyPage() {
const [name, setName] = useState(null);
return <MicroApp name={name} onNameChange={newName => setName(newName)} />
}
子项目
import { connectMaster } from 'umi';
function MyPage(props) {
return <div>{ JSON.strigify(props) }</div>;
}
export default connectMaster(MyPage);
思考
- 在实际业务中，子项目承担什么角色？ 一整套应用 or 仅展示层？
- 基础配置如何共享（如鉴权/用户信息）
for umi2
使用上个版本的qiankun插件
https://github.com/umijs/umi-plugin-qiankun
