qiankun的接入及使用 | XavierShi's Blog

微前端框架 qiankun 的接入及使用

qiankun的接入

父应用

安装qiankun $ yarn add qiankun # 或者 npm i qiankun -S

在主应用中注册微应用

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
{
    name: 'react app', // app name registered
    entry: '//localhost:7100',
    container: '#yourContainer',
    activeRule: '/yourActiveRule',
},
{
    name: 'vue app',
    entry: { scripts: ['//localhost:7100/main.js'] },
    container: '#yourContainer2',
    activeRule: '/yourActiveRule2',
},
]);

start();

微应用

微应用不需要额外安装任何其他依赖即可接入 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);
}

配置微应用的打包工具 webpack：

const packageName = require('./package.json').name;

module.exports = {
    output: {
        library: `${packageName}-[name]`,
        libraryTarget: 'umd',
        jsonpFunction: `webpackJsonp_${packageName}`,
    },
};

主入口导入一个js文件例如 public-path.js 内容为：

if (window.__POWERED_BY_QIANKUN__) {
    // eslint-disable-next-line no-undef
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

子应用修改 index.html 挂载根节点id名称，改成子应用独有名称，同时修改主入口如 main.js 挂载的结点和前面id名称一致。

qiankun 注意事项

qiankun 要挂载的子应用节点，注意 id 或者 class 名称要唯一。qiankun 采用的是 querySelector 查询 DOM 节点，然后直接进行 innerHtml，这里需要注意，如果你要挂载的子应用节点的 id 或者 class 已经出现过，那么就会对第一个节点进行替换。
子应用项目挂载的节点注意 id 或者 class 名称唯一。比如 vue 项目，父应用根 div 的 id 是 app，子应用默认$mount 的 id 名称也是 app，那么子应用就会把父应用 div id=app 的节点进行替换，最终结果就是相当于子应用替换掉了包括父应用在内的全部 DOM。
父子应用通信使用 setGlobalState 传递的数据需要深拷贝。 qiankun 的 Api 并不多，不过这仅有的几个 Api 就足以完成大部分功能。这里需要注意下，使用 setGlobalState 等方式传递的数据，其引用并没有清除，因此若传入的是 Object 或者数组，会对原先的数据造成影响。建议在入口对没有同步需求的数据深拷贝一份。
qiankun 提供了两种方式确保父子应用样式隔离。qiankun 提供了两种方式确保父子应用、多实例应用之间进行样式隔离，但是需要注意的一点是他们都不支持 IE，如果要用的话建议最低从 Edge 开始。

参考资料

qiankun 官方文档
 微前端框架 qiankun 之原理与实战
 万字长文+图文并茂+全面解析微前端框架 qiankun 源码 - qiankun 篇
 微前端-最容易看懂的微前端知识
 iframe 框架及优缺点
 iframe 有那些优缺点？