前言
嗨害嗨，好久不见，我是海怪。
有一阵子没写文章了，今天来更一期关于 qiankun 找不到生命周期的问题。
刚开始给项目接入 qiankun 的时候，时不时就会报 Application died in status LOADING_SOURCE_CODE: You need to export the functional lifecycles in xxx entry：
[图片上传失败...(image-794fd8-1661831773280)]
开发的时候一切正常，只有在打包发布后才会报这个 Bug，让人非常恼火。相信有不少同学也遇到过这个问题，今天就来分享一下这个问题的思考和解决方案吧。
为什么要找生命周期
首先，我们要知道为什么 qiankun 加载微应用时要找生命周期钩子。
早在 qiankun 出来前，已经有一个微前端框架 single-spa 了。
[图片上传失败...(image-c8e8-1661831773280)]
它的思想是：无论 React、Vue 还是 Angular，项目打包最终的产物都是 JS。如果在 合适的时机 以 某种执行方式 去执行微应用的 JS 代码，大概就能实现 主-微 结构的微前端开发了。
这里有两个关键词：合适的时机 和 执行方式。对于前者，single-spa 参考了单页应用（Single Page Application）的思路，也希望用生命周期来管理微应用的 bootstrap, mount, update, unmount。而对于后者，则需要开发者自己实现执行微应用 JS 的方式。
[图片上传失败...(image-bd622-1661831773280)]
总的来说，开发者需要在微应用的入口文件 main.js 里写好生命周期实现：
export async function bootstrap() {
// 启动微应用
}
export async function mount() {
// 加载微应用
}
export async function unmount() {
// 卸载微应用
}
export async function update() {
// 更新微应用
}
single-spa 会自动劫持和监听网页地址 URL 的变化，在命中路由规则后，执行这些生命周期钩子，从而实现微应用的加载、卸载和更新。
但这就有一个严重的问题了：一般我们项目的入口文件就只有：
React.render(这要如何和主应用交互呢？而且里面的样式、全局变量隔离又要怎么实现呢？Webpack 又该如何改造呢？然而，single-spa 只提供了生命周期的调度，并没有解决这一系列问题。
既然前人解决不了，后人则可以基于原有框架继续优化，这就是 qiankun。
qiankun 和 single-spa 最大的不同是：qiankun 是 HTML 入口。它的原理如图所示：
[图片上传失败...(image-f4f42-1661831773280)]
可以看到 qiankun 自己实现了一套通过 HTML 地址加载微应用的机制，但对于 “要在什么时候执行 JS” 依然用了 single-spa 的生命周期调度能力。这就是为什么微应用的入口文件 main.js 依然需要提供 single-spa 的生命周期回调。
如何找入口
现在我们来聊聊如何找入口的问题。
对于一个简单的 SPA 项目来说，一个 + 一个 main.js 就够了，入口很好找。但真实项目往往会做分包拆包、自动注入
...
对于这样复杂的情况，qiankun 提供了 2 种定位入口的方式：
- 找 带有
entry属性的 - 如果找不到，那么把 最后一个
兜底找入口
上面两种找入口方式并不能 100% 覆盖所有情况，比如我就遇到过这样的场景：
- 脚手架封装得太黑盒，导致添加插件不生效，无法在打包时注入
entry属性 - 测试环境中，代理工具会自动往 HTML 插入
- 脚手架封装得太黑盒，导致添加插件不生效，无法在打包时注入