本文共 4854 字，大约阅读时间需要 16 分钟。

序

 这才2月中旬，广州就已经渐渐地进入了夏季，——夏天总是让人焦虑的。过年闲暇时间写下了微前端这系列的终章，欢迎拍砖。如果你习惯直接上手代码，不妨跳到实践一节，直接上代码教程玩一玩。

如果你还没有看过前面几章 这里是链接：

qiankun原理和API介绍

qiankun是基于singlespa框架的一个上层应用，它提供了完整的生命周期，和一些钩子函数，通过路由匹配来动态加载注册微应用，同时提供了一系列api对微应用做管理和预加载等，它相对singlespa来说进步是比较大的。

所以---qiankun实质上是singlespa的一个封装，基于我们在上一节看到的，singlespa是通过输出一个manifest.json 通过标识入口信息动态构造script渲染实现的微前端应用，类似下面的图：

回顾一下singlespa在渲染过程中的核心逻辑

3、然后，在我们的child上，我们要用webpack插件，生成一个带有所有需要加载的依赖文件的manifest.json

4、主应用去加载这个manifest.json，获取到具体的js，使用script标签把它放到主应用上，进行渲染

在qiankun中对这套逻辑做了基本的封装, 让我们只需要经过简单的几个api就可以控制singlespa中比较复杂的配置和概念。

注册

import { registerMicroApps, start } from 'qiankun';registerMicroApps([  {    name: 'react app', // 应用名称    entry: '//localhost:7100', // 应用入口，应用需要增加cors选项    container: '#yourContainer', // 应用单独的appid的div    activeRule: '/yourActiveRule', // 匹配路由  },  {    name: 'vue app',    entry: { scripts: ['//localhost:7100/main.js'] },    container: '#yourContainer2',    activeRule: '/yourActiveRule2',  },]);start();

main

main是一个qiankun的主体部分，它也是不限制框架种类的，可以用react也可以用vue和angular，只需要在entry.js里面注册它就可以了。

一般情况下main的作用是存放公共代码，例如：

你也可以把站点的首页写在这里，可以加快主体加载速度

生命周期

bootstrap

boostrap相当于init，子应用在第一次加载的时候会调用这个方法， 一般可以在里面做一些项目的初始化操作，例如

mount

每次在加载到子应用的时候都会调用它，就像是componentDidMount,一般情况下我们要把ReactDOM.render这样的初始化函数写在里面，每次mount时调用render

unmount

这个跟mount正好相反，每一次注销/切换子应用的时候会调用它，一般我们在这里 ReactDOM.unmountComponentAtNode 注销这个应用，然后把整个项目的容器让出来

update

这是个可选的生命周期，子应用发生变化的时候会调用。

路由匹配

路由规则有两种，需要手动调用对应的子应用渲染就行了，通过一个叫loadMicroApp的方法挂载一个子应用组件，这样就可以在main中像配置一个正常的应用那样配置子应用的view了。

import { loadMicroApp } from 'qiankun';import React from 'react';class App extends React.Component {  containerRef = React.createRef();  microApp = null;  componentDidMount() {    this.microApp = loadMicroApp(      { name: 'app1', entry: '//localhost:1234', container: this.containerRef.current, props: { name: 'qiankun' } },    );  }  componentWillUnmount() {    this.microApp.unmount();  }  componentDidUpdate() {    this.microApp.update({ name: 'kuitos' });  }  render() {    return 
    
;  }}

处理样式

沙箱

qiankun的沙箱模式是在start的api配置项里面开启的

sandbox 选项可选

start({  sandbox: true // true | false | { strictStyleIsolation?: boolean, experimentalStyleIsolation?: boolean }})

默认情况下沙箱可以确保单实例场景子应用之间的样式隔离，但是无法确保主应用跟子应用、或者多实例场景的子应用样式隔离。当配置为 { strictStyleIsolation: true } 时表示开启严格的样式隔离模式。这种模式下 qiankun 会为每个微应用的容器包裹上一个 shadow dom 节点，从而确保微应用的样式不会对全局造成影响。

样式冲突解决方案

qiankun 会自动隔离微应用之间的样式（开启沙箱的情况下），你可以通过手动的方式确保主应用与微应用之间的样式隔离。比如给主应用的所有样式添加一个前缀，或者假如你使用了 ant-design 这样的组件库，你可以通过这篇文档中的配置方式给主应用样式自动添加指定的前缀。

以 antd 为例：

配置 webpack 修改 less 变量

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

配置 antd ConfigProvider

import { ConfigProvider } from 'antd';export const MyApp = () => (  
        
       
    );

webpack配置的问题

微应用的打包工具还需要增加如下配置：

const packageName = require('./package.json').name;  module.exports = {    output: {      library: `${packageName}-[name]`,      libraryTarget: 'umd',      jsonpFunction: `webpackJsonp_${packageName}`,    },  };

qiankun实践-react微前端应用

起始，准备2个react应用

直接用create-react-app创建两个app应用

npx create-react-app main-appnpx create-react-app micro-app

可以得到一个文件夹里有两个项目

npm run eject

这样项目的准备工作就做好了。

子应用配置

配置子应用两个步骤，一个是生命周期的配置。 我们把生命周期函数写好放到main.js中:

然后我们把reactDom.render放到mount生命周期里调用，让qiankun在准备好加载mount的时候再去初始化应用：

unmount的注销操作也不能忘记:

我们更改一下子应用的根节点id，在父应用中再去引用它(不要忘了html里也需要更改):

最后再把webpack中的配置修改一下：

父应用配置

然后我们就可以去在main应用中，注册了首先要

npm install qiankun --save

然后在main文件index.js中注册子应用：

然后我们就可以开始运行看一看了:

运行成功，随便改一下micro的样式看看效果：

路由的处理实践

前文有提到，在react中使用qiankun可以使用apiloadMicroApp,这里我们也用它来处理路由的跳转。

然后使用react-router直接配置：

npm install react-router react-router-dom --save

改完index.js长这样：

大功告成！ 

结论和源码

相比较上一次我们看见的 singlespa的配置要简单了很多，而且更加直白，新增子应用更加无缝。

应用场景和坑

坑-静态资源问题解决

微应用打包之后 css 中的字体文件和图片加载如果使用的加载路径是相对路径，会导致css 中的字体文件和图片加载 404。

而 css 文件一旦打包完成，就无法通过动态修改 publicPath 来修正其中的字体文件和背景图片的路径。

主要有三个解决方案：

• 所有图片等静态资源上传至 cdn，css 中直接引用 cdn 地址（推荐）
• 借助 webpack 的 url-loader 将字体文件和图片打包成 base64（适用于字体文件和图片体积小的项目）（推荐）
• 使用绝对地址，nginx中设置静态目录

结束语

qiankun整体的思路是比较ok的，它大大简化了singlespa的使用逻辑，让微前端的门槛变得更低，但它仍然有一些缺点，例如部分api总是会有莫名其妙的问题，例如api文档不是特别的直观等，这些都是待改进的地方。而对于微前端来说，做到能够技术栈无关、渐进升级旧项目、分离不同业务等功能就已经能发挥它的最大价值了。

转载地址：https://www.cnblogs.com/ztfjs/p/qiankun.html 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！