前言
嗨害嗨，好久不见，我是海怪。
有一阵子没写文章了，今天来更一期关于 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(<App/>, document.querySelector('#root'))
这要如何和主应用交互呢？而且里面的样式、全局变量隔离又要怎么实现呢？Webpack 又该如何改造呢？然而，single-spa 只提供了生命周期的调度，并没有解决这一系列问题。
既然前人解决不了，后人则可以基于原有框架继续优化，这就是 qiankun。
qiankun 和 single-spa 最大的不同是：qiankun 是 HTML 入口。它的原理如图所示：
可以看到 qiankun 自己实现了一套通过 HTML 地址加载微应用的机制，但对于 “要在什么时候执行 JS” 依然用了 single-spa 的生命周期调度能力。这就是为什么微应用的入口文件 main.js 依然需要提供 single-spa 的生命周期回调。
如何找入口
现在我们来聊聊如何找入口的问题。
对于一个简单的 SPA 项目来说，一个 <div id="app"></div> + 一个 main.js 就够了，入口很好找。但真实项目往往会做分包拆包、自动注入 <script> 脚本等操作，使得最终访问的 HTML 会有多个 <script> 标签：
<script>
// 初始化 XX SDK
</script>
<body>
...
</body>
<script src=
最低0.47元/天 解锁文章
499
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
