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(<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="你真实的入口 main.js"></script> <script src="ant-design.js"></script> <script> // 打包后自动注入的静态资源 retry 逻辑 </script> <script> // 公司代码网关自动注入的 JS 逻辑 </script>
对于这样复杂的情况，qiankun 提供了 2 种定位入口的方式：
- 找 带有
entry属性的<script entry src="main.js"></script> - 如果找不到，那么把 最后一个
<script>作为入口
第一种方法是最稳妥的，可以使用 html-webpack-inject-attributes-plugin 这个 Webpack 插件，在打包的时候就给入口 main.js 添加 entry 属性：
plugins = [
new HtmlWebpackPlugin(),
new htmlWebpackInjectAttributesPlugin({
entry: "true",
})
]
不推荐大家使用最后一种方法来确定入口，这种方式很不可靠。 因为微应用 HTML 有可能在一些公司代理、网关层中被拦截，自动注入一些脚本。
这样最终拿到 HTML 里最后的一个 <script> 就不是原先的入口 main.js 文件了：
<script src="你真实的入口 main.js"></script> <script> // 自动注入的网关层的代理逻辑 </script>
兜底找入口
上面两种找入口方式并不能 100% 覆盖所有情况，比如我就遇到过这样的场景：
- 脚手架封装得太黑盒，导致添加插件不生效，无法在打包时注入
entry属性 - 测试环境中，代理工具会自动往 HTML 插入
<script>，无法将最后一个 JS 作为入口
这下 qiankun 彻底找不到我的入口了。你总不能说：手写一个 JS 脚本，然后每次打包后用正则去 replace HTML，以此来添加 entry 属性吧？？？
当然不行！
曾经我在 qiankun 的文档里看到过这段配置：
module.exports = {
webpack: (config) => {
config.output.library = `microApp`;
config.output.libraryTarget = 'umd';
config.output.jsonpFunction = `webpackJsonp_${name}`;
config.output.globalObject = 'window';
return config;
},
...
};
文档里说这是一个兜底找入口的逻辑：
但文档没有说这里的细节，下面就来一起研究一下。
微应用的 Webpack 配置
libraryTarget 指定打包成 umd 格式，也即最终模块会兼容 CommonJS 和 AMD 等多种格式来进行导出，最终 main.js 会是这样：
(function webpackUniversalModuleDefinition(root, factory) {
// CommonJS 导出
if (typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require('lodash'));
// AMD 导出
else if (typeof define === 'function' && define.amd)
define(['lodash'], factory);
// 另一种导出
else if (typeof exports === 'object')
exports['microApp'] = factory(require('lodash'));
// 关键点
else root['microApp'] = factory(root['_']);
})(this, function (__WEBPACK_EXTERNAL_MODULE_1__) {
// 入口文件的内容
// ...
return {
bootstrap() {},
mount() {},
// ...
}
});
直接看最后一种导出方式 root['microApp'] = factory(root['_'])。Webpack 配置的 globalObject 和 library 正好对应了里面的 root 以及 'microApp'。
而且上面的函数 factory 则是入口文件的执行函数，理论上当执行 factory() 后会返回模块的输出。
最终的效果是：Webpack 会把入口文件的输出内容挂在到 globalObject[library]/window['microApp'] 上：
window['microApp'] = {
// main.js 所 export 的内容
bootstrap() {},
mount() {},
unmount() {},
update() {},
// ...
}
主应用的兜底逻辑
把入口的内容挂载到 window 上有什么好处呢？我们来稍微看点源码：
// 发 Http 请求获取 HTML, JS 执行器
const { template, execScripts, assetPublicPath } = await importEntry(entry, importEntryOpts);
// 执行微应用的 JS，但这里不一定有入口
const scriptExports: any = await execScripts(global, sandbox && !useLooseSandbox);
// 获取入口导出的生命周期
const { bootstrap, mount, unmount, update } = getLifecyclesFromExports(
scriptExports,
appName,
global,
sandboxContainer?.instance?.latestSetProp,
);
上面的代码很简单，就是获取微应用 HTML 和 JS，试图从里面获取生命周期，所以下面我们来看看 getLifecyclesFromExports 做了什么：
function getLifecyclesFromExports(
scriptExports: LifeCycles<any>,
appName: string,
global: WindowProxy,
globalLatestSetProp?: PropertyKey | null,
) {
// 如果在获取微应用的 JS 时可以锁定入口文件，那么直接返回
if (validateExportLifecycle(scriptExports)) {
return scriptExports;
}
// 不用看
if (globalLatestSetProp) {
const lifecycles = (<any>global)[globalLatestSetProp];
if (validateExportLifecycle(lifecycles)) {
return lifecycles;
}
}
// 获取 globalObject[library] 里的内容
const globalVariableExports = (global as any)[appName];
// 判断 globalObject[library] 里的内容是否为生命周期
// 如果是合法生命周期，那么直接返回
if (validateExportLifecycle(globalVariableExports)) {
return globalVariableExports;
}
throw new QiankunError(`You need to export lifecycle functions in ${appName} entry`);
}
从上面可以看到，在 getLifecyclesFromExports 最后会试图从 windowProxy[微应用名] 中拿导出的生命周期。
这也是为什么兜底找入口操作需要微应用配置 Webpack，同时主应用指定的微应用名要和 library 名要一样。
注意：qiankun 会使用 JS 沙箱来隔离微应用的环境，所以这里的 globalObject 并不是 window 而是微应用对应的沙箱对象 windowProxy。
在微应用里写 console.log(window['microApp']) 或在主应用里输入 console.log(window.proxy['microApp']) 即可看到微应用导出的生命周期：
因此，在主应用中注册微应用的时候，微应用 name 最好要和 Webpack 的 output.library 一致，这样才能命中 qiankun 的兜底逻辑。
总结
最后总结一下，qiankun 要找入口是因为要从中拿到生命周期回调，把它们给 single-spa 做调度。
qiankun 支持 2 种找入口的方式：
- 正则匹配 带有
entry属性的<script>，找到就把这个 JS 作为入口 - 当找不到时，默认把 最后一个 JS 作为入口
如果这两种方法都无法帮你正确定位入口，那么你需要：
- 在微应用配置
library,libraryTarget以及globalObject，把入口导出的内容挂载到window上 - 加载微应用时，主应用会试着从
window[library]找微应用的生命周期回调，找到后依然能正常加载 - 在主应用注册微应用时，要把微应用的
name和 Webpack 的output.library设为一致，这样才能命中第二步的逻辑
最后还要注意的是，上面说到的 window 并不是全局对象，而是 qiankun 提供的 JS 沙箱对象 windowProxy。
以上就是qiankun 找不到入口问题彻底解决的详细内容，更多关于qiankun 找不到入口的资料请关注我们其它相关文章！
相关推荐
-
基于微前端qiankun的多页签缓存方案实践
目录 一.多页签是什么? 1.1 单页面应用实现多页签 1.2 使用qiankun进行微前端改造后,多页签缓存有什么不同 二.方案选择 2.1 方案一:多个子应用同时存在 2.2 方案二:同一时间仅加载一个子应用,同时保存其他应用的状态 2.3 最终选择 三.具体实现 3.1 从组件级别的缓存到应用级别的缓存 3.2 移花接木——将vnode重新挂载到一个新实例上 3.3 解决应用级缓存方案的问题 3.3.1 vue-router相关问题 3.3.2 父子组件通信 3.3.3 缓存管理,防止内存
-
微前端qiankun沙箱实现源码解读
目录 前言 LegacySandbox单实例沙箱 ProxySandbox多实例沙箱 SapshotSandbox 快照沙箱 结束语 前言 上篇我们介绍了微前端实现沙箱的几种方式,没看过的可以下看下JS沙箱这篇内容,扫盲一下.接下来我们通过源 码详细分析下qiankun沙箱实现,我们clone下qiankun代码,代码主要在sandbox文件夹下,目录结构为 ├── common.ts ├── index.ts // 入口文件 ├── legacy │ └── sandbox.ts // 代理沙
-
ant-design-pro使用qiankun微服务配置动态主题色的问题
使用微服务后,遇到一个问题,主应用和子应用的主题色不一致.希望可以通过主应用的颜色动态变换子应用的主题色ant-design-pro可以通过config.ts配置全局主题色所有最优的方法是可以通过改变主题色,来动态配置.官方最新版本的https://github.com/ant-design/ant-design-pro/releases/tag/v5.2.0已经支持了,通过<SettingDrawer>设置之前的版本不支持直接修改主题色.但是ant-design支持全局修改组件颜色跟着官方的
-
详解ant-design-pro使用qiankun微服务
目录 主应用配置 子应用配置 微服务现在挺火的,优点也很明显如果有多个应用都有相同页面时,就可以使用微服务,可以避免重复写代码 在网上搜了下,很多例子都是基于官方文档的例子,官方文档:https://umijs.org/zh-CN/plugins/plugin-qiankun.比较简单,实际使用场景会有特殊情况我根据自己项目的情况总结了一下使用方法 我们两个项目都是ant-design-pro的,我这里的例子也用的ant-design-pro项目生成的, githup地址:https://git
-
微前端qiankun改造日渐庞大的项目教程
项目背景 很多小伙伴在工作中都碰到过和我一样的场景,手上的某个项目越来越大,眼看着每次build时间越来越长,吐了.在杭州某独角兽我碰到了这样的一个项目,他叫运营后台,听名字就知道,他的主要用户是运营人员.问题就是随着公司业务的越来越多,这个运营后台承担的已经不是某一块业务了,而是所有业务的运营操作的中后台都在这上面.你可以这样理解,这个系统的每个一级菜单都是一块独立的业务,相互之间没有任何瓜葛:按常规的理解,这应该是单独的每一个project比较合理,但是正因为他的用户又都是公司的同一群人,他
-
qiankun 找不到入口问题彻底解决
目录 前言 为什么要找生命周期 如何找入口 兜底找入口 微应用的 Webpack 配置 主应用的兜底逻辑 总结 前言 嗨害嗨,好久不见,我是海怪. 有一阵子没写文章了,今天来更一期关于 qiankun 找不到生命周期的问题. 刚开始给项目接入 qiankun 的时候,时不时就会报 Application died in status LOADING_SOURCE_CODE: You need to export the functional lifecycles in xxx entry: 开发
-
使用Android studio创建的AIDL编译时找不到自定义类的解决办法
使用AS创建ADIL文件时AS会在main文件夹下给我们生成一个aidl文件夹和一个相同包名的包,通常我们会把所有和ADIL相关的类或文件放在这个包下,但是如果存在自定义的类时,程序编译时无法通过,提示找不到自定义的包.解决办法如下,在启动Module的build.gradle中加入如下代码: sourceSets { main { manifest.srcFile 'src/main/AndroidManifest.xml' java.srcDirs = ['src/main/java', '
-
PHP上传 找不到临时文件夹的解决方法
最近遇到这样的麻烦,找不到临时文件夹返回的错误代码为6 错误原因: 一.配置文件没有设置临时文件夹 二.临时文件夹没有或者上级文件夹没有相应的权限 处理方式: 找到PHP配置文件PHP.ini,找到以下代码 ;upload_tmp_dir = 改为: upload_tmp_dir = "C:/Windows/Temp" //后面的文件夹路径根据您的系统来设置 如果是权限不够的情况,可以根据不通的操作系统系统分别给其文件加上相应的权限 其他知识: $_FILES['file']['err
-
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
关于conda安装matplotlib报错 最近在师姐机器上跑实验的时候,想利用matplotlib包来绘制损失曲线图,安装过程中碰到了一些小麻烦,感觉之前好像也碰到过类似的问题,网上一搜什么numpy.matplotlib.pillow包版本冲突啊,然后就是各种尝试,直至重装Anaconda,当时特头疼,最后无意中解决了,今天又碰到了类似的问题,这次记录下来防止忘记 系统版本: Windows 10 python包管理工具:conda 4.7.11 python版本:3.7.4 从头开始,首先
-
eclipse配置Tomcat找不到server选项的解决办法
我们在配置Tomcat的时候,有时候因为我们安装的eclipse版本问题没有server这个选项, 图1 没有发现server选项 不用着急,可以按照以下方法来添加. 在主页选择helper,然后选择install new software(意思是安装新软件(插件)) 在work with上添加http://download.eclipse.org/releases/kepler地址,点击add,然后弹出一个框,点击确定即可 第二个步骤之后可能会等待比较久的时候(可能每个地区不一样).之后选择'
-
InterlliJ IDEA2020新建java web项目找不到Static Web的解决
由于IDEA版本更新,在新建工程的时候找不到Static Web,而且在插件里也找不到,没法下载. 如图:没有Static Web 新建项目的方法如下: File-->Project-->Java Enterprise-->Web Application--next 项目命名-->选择文件存放路径--Finish 在那个窗口新建由自己选择. 新建项目结构 运行效果 到这里就创建好了,根据自己的需求建文件就可以了. 到此这篇关于InterlliJ IDEA2020新建java web
-
安装sql server2008后再安装sql 2005找不到本地服务器的解决方法
最近在项目中安装sql server 2005,发现找不到本地服务器,因为此前我已经安装了sql server2008,打开2005数据库引擎后找不到本地服务器,在网上也找不到正确的解决办法,以为是组件没有安装,有重新安装一次问题依然存在,当时很是郁闷, 后来想想是不是组件没有安装,重装了一次还是这样,后来想想是不是2005的服务器实例与2008重合了,在重装的时候就在安装此步骤的实例没有选择默认实例 如下图,此处要注意:不能选择默认实例,单击"已安装的实例"会发现有2008的服务器名
-
关于pycharm找不到MySQLdb模块的解决方法
下载包地址:https://www.lfd.uci.edu/~gohlke/pythonlibs/#mysql-python 该页面下找到需要安装的包名 下载完成后,将下载好的MySQL-Python文件复制到Djangoproject(项目目录)>venv>Scripts下面 通过cmd命令行进入Djangoproject>venv>Scripts 执行命令pip install MySQL_python-1.2.5-cp27-none-win_amd64.whl 注:下载好
-
继承JpaRepository后,找不到findOne()方法的解决
目录 继承JpaRepository,找不到findOne()方法 问题: 分析: 解决: SpringDataJpa:消失的findOne() 进行思考 对jpa的思考 继承JpaRepository,找不到findOne()方法 问题: 以前一直使用findOne(ID id);,这次用SpringBoot构建新项目后,并没有找到这个findOne(ID id),只有另外的 分析: 看了下jpa的依赖,因为SpringBoot的版本是2.0.0的,所以spring-data-jpa的版本也是
-
SpringBoot开发项目,引入JPA找不到findOne方法的解决
引入JPA找不到findOne方法 开发SpringBoot的DAO层之后,去测试的时候,发现findOne()这个方法找不到了,查看了对应的表字段名和实体类的属性都一致 找了半天没找到是什么原因,最后发现是依赖的版本出问题了 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <ve