微前端之qiankun的使用(一)

397 阅读3分钟

关于 qiankun

qiankun 是基于 single-spa 二次封装的微前端框架,做了 js 数据隔离和 css 样式隔离。

single-spa 是 JS Entry,qiankun 是 HTML Entry。就是 single-spa 的子应用的入口文件是一个 .js 文件,而 qiankun 的子应用入口是一个 .html 文件。

主应用

qiankun 里主应用的配置非常简单,根据官网介绍进行配置即可。

子应用

接入 qiankun 的子应用一般需要作出以下改造,特殊情况根据 qiankun 实现原理再进行特殊改造。

允许跨域

接入 qiankun 的子应用需要进行跨域配置。如果是生产环境下已经发布的子应用,只需要在服务端进行跨域的配置即可。如果是开发环境下运行的子应用,需要进行对应 dev-server 的配置。

至于子应用为什么需要允许跨域,这是由 qiankun 的实现方式决定的。qiankun 在加载子应用的时候,会用 fetch 的方式去获取子应用的 .html 文件及后续的 .js 等资源,因为浏览器的同源策略,子应用不允许跨域的话,主应用就无法 fetch 成功。

导出生命周期

接入 qiankun 的子应用需要导出对应的生命周期函数(即 bootstrap / mount / unmount 等)供 qiankun 主应用调度。这里需要先了解到 qiankun 是如何拿到子应用导出的生命周期函数的。

  1. 寻找导出生命周期的 js 文件

子应用 .html 入口文件中,如果有设置了 entry 属性的 script 标签,则从设置了 entry 属性的 script 标签对应的的 js 文件获取导出的生命周期。如果没有设置了 entry 属性的 script 标签,则从最后一个 script 标签对应的 js 文件获取导出的生命周期。

  1. 获取生命周期

找到导出生命周期的 js 文件后,qiankun 会去 fetch 这个 js 文件,然后用 eval + with 对其进行包裹执行。执行完后,qiankun 会先找最后一个挂在 window 上的属性,如果该属性是一个对象,且包含了 bootstrap / mount / unmount 等生命周期函数,则会从该对象里获取生命周期。如果最后一个挂在 window 上的属性不是生命周期对象,qiankun 则再去找该子应用在主应用中注册的对应的 appName ,并从 window[appName]去获取生命周期。若没有,则会报找不到生命周期函数的报错。

处理动态加载的资源路径

qiankun 在加载子应用的动态资源时,如果资源的路径是相对路径,qiankun 默认会将子应用资源的相对路径和主应用的域名拼接,从而导致子应用动态资源获取 404 的错误❌。因此子应用需要正确处理动态获取的资源的路径。

qiankun 提供了 window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ 这个变量供子应用读取,该变量为激活的子应用的域名。因此子应用可以根据该变量进行动态资源的路径设置,将其设置为绝对路径。