qiankun 找不到入口问题彻底解决

目录

• 前言
• 为什么要找生命周期
• 如何找入口
• 兜底找入口
• 微应用的 Webpack 配置
• 主应用的兜底逻辑
• 总结

前言

嗨害嗨，好久不见，我是海怪。

有一阵子没写文章了，今天来更一期关于 qiankun 找不到生命周期的问题。

刚开始给项目接入 qiankun 的时候，时不时就会报

Application died in status LOADING_SOURCE_CODE: You need to export the functional lifecycles in xxx entry：

开发的时候一切正常，只有在打包发布后才会报这个 Bug，让人非常恼火。相信有不少同学也遇到过这个问题，今天就来分享一下这个问题的思考和解决方案吧。

为什么要找生命周期

首先，我们要知道为什么 qiankun 加载微应用时要找生命周期钩子。

早在 qiankun 出来前，已经有一个微前端框架 single-spa 了。

它的思想是：无论 React、Vue 还是 Angular，项目打包最终的产物都是 JS。如果在 合适的时机 以 某种执行方式 去执行微应用的 JS 代码，大概就能实现 主-微 结构的微前端开发了。

这里有两个关键词：合适的时机 和 执行方式。对于前者，single-spa 参考了单页应用（Single Page Application）的思路，也希望用生命周期来管理微应用的 bootstrap, mount, update, unmount。而对于后者，则需要开发者自己实现执行微应用 JS 的方式。

总的来说，开发者需要在微应用的入口文件 main.js 里写好生命周期实现：

export async function bootstrap() {
  // 启动微应用
}
export async function mount() {
  // 加载微应用
}
export async function unmount() {
  // 卸载微应用
}
export async function update() {
  // 更新微应用
}

single-spa 会自动劫持和监听网页地址 URL 的变化，在命中路由规则后，执行这些生命周期钩子，从而实现微应用的加载、卸载和更新。

但这就有一个严重的问题了：一般我们项目的入口文件就只有：

React.render(, document.querySelector('#root'))

这要如何和主应用交互呢？而且里面的样式、全局变量隔离又要怎么实现呢？Webpack 又该如何改造呢？然而，single-spa 只提供了生命周期的调度，并没有解决这一系列问题。

既然前人解决不了，后人则可以基于原有框架继续优化，这就是 qiankun。

qiankun 和 single-spa 最大的不同是：qiankun 是 HTML 入口。它的原理如图所示：

可以看到 qiankun 自己实现了一套通过 HTML 地址加载微应用的机制，但对于 “要在什么时候执行 JS” 依然用了 single-spa 的生命周期调度能力。

这就是为什么微应用的入口文件 main.js 依然需要提供 single-spa 的生命周期回调。

如何找入口

现在我们来聊聊如何找入口的问题。

对于一个简单的 SPA 项目来说，一个

+ 一个 main.js 就够了，入口很好找。

但真实项目往往会做分包拆包、自动注入 ...

对于这样复杂的情况，qiankun 提供了 2 种定位入口的方式：

• 找 带有 entry 属性的
• 如果找不到，那么把 最后一个

兜底找入口

上面两种找入口方式并不能 100% 覆盖所有情况，比如我就遇到过这样的场景：

• 脚手架封装得太黑盒，导致添加插件不生效，无法在打包时注入 entry 属性
• 测试环境中，代理工具会自动往 HTML 插入