介绍
qiankun 是基于 single-spa 做了二次封装的微前端框架，通过解决了 single-spa 的一些弊端和不足，来帮助大家实现更简单、无痛的构建一个生产可用的微前端架构系统。
因为 qiankun 是基于 single-spa 做的二次封装，主要解决了 single-spa 的一些痛点和不足，所以最好对 single-spa 有一个全面的了解和认识，明白其原理、了解它的不足和缺陷，然后带着问题和目的去阅读 qiankun 源码，可以达到事半功倍的效果，整个阅读过程的思路也会更加清晰明了。
qiankun 解决了以下几个问题：
- HTML Entry
qiankun 通过 HTML Entry 的方式来解决 JS Entry 带来的问题，让你接入微应用像使用 iframe 一样简单。 - 样式隔离
qiankun 实现了两种样式隔离
- 严格的样式隔离模式，为每个微应用的容器包裹上一个 shadow dom 节点，从而确保微应用的样式不会对全局造成影响
- 实验性的方式，通过动态改写 css 选择器来实现，可以理解为 css scoped 的方式
运行时沙箱
qiankun 的运行时沙箱分为JS沙箱和样式沙箱
JS 沙箱为每个微应用生成单独的window proxy对象，配合HTML Entry提供的 JS 脚本执行器 (execScripts) 来实现 JS 隔离；
样式沙箱通过重写DOM操作方法，来劫持动态样式和 JS 脚本的添加，让样式和脚本添加到正确的地方，即主应用的插入到主应用模版内，微应用的插入到微应用模版，并且为劫持的动态样式做了scoped css的处理，为劫持的脚本做了 JS 隔离的处理，更加具体的内容可继续往下阅读或者直接阅读 微前端专栏 中的qiankun 2.x 运行时沙箱 源码分析资源预加载
qiankun 实现预加载的思路有两种，一种是当主应用执行start方法启动 qiankun 以后立即去预加载微应用的静态资源，另一种是在第一个微应用挂载以后预加载其它微应用的静态资源，这个是利用 single-spa 提供的single-spa:first-mount事件来实现的应用间通信
qiankun 通过发布订阅模式来实现应用间通信，状态由框架来统一维护，每个应用在初始化时由框架生成一套通信方法，应用通过这些方法来更改全局状态和注册回调函数，全局状态发生改变时触发各个应用注册的回调函数执行，将新旧状态传递到所有应用
框架目录结构
从 github 克隆项目以后，执行一下命令：
安装
qiankun框架所需的包
yarn install安装示例项目的包
yarn examples:install
以上命令执行结束以后：
npm-run-all
一个 CLI 工具，用于并行或顺序执行多个 npm 脚本father-build
基于 rollup 的库构建工具，father 更加强大多项目的目录组织以及 scripts 部分的编写
main 和 module 字段
标识组件库的入口，当两者同时存在时，module 字段的优先级高于 main
示例项目中的主应用
这里需要更改一下示例项目中主应用的 webpack 配置
{
...
devServer: {
// 从 package.json 中可以看出，启动示例项目时，主应用执行了两条命令，其实就是启动了两个主应用，但是却只配置了一个端口，浏览器打开 localhost:7099 和你预想的有一些出入，这时显示的是 loadMicroApp(手动加载微应用) 方式的主应用，基于路由配置的主应用没起来，因为端口被占用了
// port: '7099'
// 这样配置，手动加载微应用的主应用在 7099 端口，基于路由配置的主应用在 7088 端口
port: process.env.MODE === 'multiple' ? '7099' : '7088'
}
...
}
启动示例项目
yarn examples:start
示例项目
官方为我们准备了两种主应用的实现方式，五种微应用的接入示例，覆盖面可以说是比较广了，足以满足大家的普遍需要了
主应用
主应用在 examples/main 目录下，提供了两种实现方式，基于路由配置的 registerMicroApps 和 手动加载微应用的 loadMicroApp。主应用很简单，就是一个从 0 通过 webpack 配置的一个同时支持 react 和 vue 的项目，至于为什么同时支持 react 和 vue，继续往下看
webpack.config.js
就是一个普通的 webpack 配置，配置了一个开发服务器 devServer、两个 loader (babel-loader、css loader)、一个插件 HtmlWebpackPlugin (告诉 webpack html 模版文件是哪个)
通过 webpack 配置文件的 entry 字段得知入口文件分别为 index.js 和 multiple.js
基于路由配置
通用将微应用关联到一些 url 规则的方式，实现当浏览器 url 发生变化时，自动加载相应的微应用的功能
