qiankun 的根本目的
让主应用有能力将子应用嵌入到自身。
如何嵌入
要将子应用嵌入到主应用,首先需要拿到子应用的 html。然后将子应用 html 中的元素添加到主应用的容器中,并需要能单独处理子应用的 js(加沙箱隔离全局变量等)。
主要步骤如下:
- 通过fetch拿到子应用的html(需要在主应用里配置子应用的激活规则和子应用的index.html地址);
- 处理 html(去除html/body/script等标签);
- 主应用通过 fetch 去获取子应用的 js,包装 js(js沙箱)隔离全局变量;
- 执行包装完成后的 js 取出子应用导出的 mout 函数并执行(react/vue子项目中导出的实际上是子应用的渲染逻辑);
- 子应用渲染逻辑执行完成,dom 渲染到页面中。
流程图
跨域总结:
- 所有子应用前端服务器都需要处理跨域问题;
- 在子应用前端服务器没做代理的情况下,子应用后端服务器需要处理跨域请求问题。