前言
上个月在网易做测试的朋友，告诉我，他们有人在线在分享“微前端”的心得，说听起来很厉害。我直接给他指出，这东西没用，实用性不强，给他唬得一愣一愣的。结果现在，我直接痛苦面具戴了起来。
这篇文章可能主要是记录一下解决问题的过程，从开始调研，写demo，发现问题，查资料，解决问题。前前后后拖了快2个礼拜，简单来说就是在ionic1中嵌入ionic4编写的新app，可能对于大家看起来，帮助并不是很大。而且过程会比较长，因为我也是第一次实际来接触微前端（qiankun）的编写，谨慎阅读！
我们的app是使用17年初，使用ionic1（angular1）写的，就是那种连webpack都没有，纯纯地用script标签引入js文件的，然后使用cordova进行了打包。本来已经在重构的路上了，但是我们老板需要把其中一个模块单独拎出来重构，既可以作为单品（新的app）销售，也需要整合到现有的app中供原有的客户使用。我甚至怀疑老板是不是时刻关注着前端的发展，我听了听这个需求，感觉他就差没把“微前端”这几个字说出来了。
开始
问题既然出现了，总要解决的，由于这篇文章是边做边写的，可能最后也会失败，失败的话，可能接下来几个月，就去重构app了，要么直接就被ktv了。调研失败+ （重构 || ktv） = 双重痛苦面具。对于在我们项目上使用qiankun，初步觉得可能有几个问题： 1.微前端框架使用（qiankun） 2.应用之间的通信 3.能否把老的项目改造成能适用于微前端的项目 （ionic1能否跟ionic4兼容） 4.不同版本ionic native插件能否兼容或者有没有方案可以适配
一．框架使用
本来以为简简单单照个文档跑个demo应该是没啥问题的，果然还是太天真了。先建了个最简单的页面，引入js，在js里调用了乾坤的注册微应用，微应用的项目创建了2个，一个是带vue-router的vue项目，一个是不带vue-router的vue项目，先进行最简单的布局和展示。
简单的布局完成之后，我们现在本地把2个vue项目启动（vue-first是不带vue-router的，vue-second是带vue-router的），端口分别是8001和8002，然后在main.js中注册微应用，并且启动，微应用的里的配置官网也说得很明白了，点开首页的项目实践，选择vue，就能看到了，代码复制粘贴一下，应该没啥问题！
然后启动项目，就可以看见，我们中间app挂载了vue-second，从home切换到about也没有问题。
但是可以看到，现在的路由模式是history模式，需要服务器配合渲染才能在刷新之后正常显示路由，但是项目中需要的是hash模式的，所以还得改造一下。
先把main中的activeRule改为’#/vue-second’，接着把vue-router中的路由mode改成hash模式，在配置路由时，如果是qiankun运行的微应用，则加上vue-second的前缀
就成功地把路由改成了hash模式，刷新之后也没有问题，可以正常显示。第一个任务，项目的基本运行应该是没问题了。
不过中间遇到一个坑，在跳转about页面时候，js加载的路径错误导致404，并不是加载的vue项目路径中，而是直接在当前端口下，需要在webpack中配置一下。这个问题在qiankun的常见问题中也有被写出来。
二．应用间的通信
qiankun也提供了api供我们在应用间通信，所以这点应该对着文档抄一抄跑一跑demo就好了。
发现跟文档里也没有出入，只是主应用改变state时，也同样会触发回调函数。
三．在现有的app中使用微前端嵌入新的app
既然决定要引入微前端，就必须要有一个主应用，有两个方案，第一种是新建一个主应用，然后配置路由信息等等，把原来的app和新的模块嵌入，第二个方案是把原来的app作为主应用，将新的模块嵌入到原来的app中。我选的方案是第二种，因为如果用第一种，就需要对原有app进行比较大的改造，这和我们的初衷是完全不符合的，秉着改动量最小的原则，我决定将原来的app作为主应用。
确定完方案，剩下的就简单了。先建一个ionic的app，然后在本地把服务启动起来。很不幸的是，ionic都已经改成vue3版本了，完结了微前端，应该马不停蹄冲向vue3的怀抱了。
先本地创建一个ionic的app，在本地把服务启动，然后跟上面的vue项目一样，把配置项配置完成。具体过程就不赘述了，因为这个偏向于公司需求。
然后在之前的main.js中再加一个微前端的对象，并设置为默认对象，接着启动服务，本来以为一个是一帆风顺的，结果。
console里，出现了一堆报错，从sourcemap里点进去发现，并不能发现有什么问题。然后就开始了无休止地查资料，分析问题，因为是空余时间看的，前前后后加起来好多天，还是一无所获。这种事情就是最痛苦的，明明时间花下去了，结果什么都没有得到。
没办法，到引的依赖里面，一个个打log，看问题，看看到底是哪步出错了，最后还是定位到这个window. constructor的问题，确实是百思不得其解，查qiankun的常见问题也找不到。最后不知道怎么灵机一动，先看了看单独启动ionic中的window. constructor发现是一个函数，而在微应用中确实一个空的函数。于是，把两边的window对象打印出来，才发现了问题。
上面打印的是主应用中的window，而下面的则是微应用的window，发现微应用中的window使用了proxy代理，问题有了目标之后就很容易解决了。因为防止微应用中的操作，对全局的window进行影响，每个微应用的window都是使用proxy代理的对象。（具体的逻辑，只能说有缘再见了，首要的是先把demo实现了） 于是，在qiankun.start中配置了sandbox: false之后，app就能成功显示出来了。
但是由于没有使用sandbox了，对window的操作影响全局肯定是有隐患的，但是暂时还没有碰到，qiankun的文档里也没有具体提及，只能到时候具体问题具体分析。
在页面能正式显示之后，由于之前的app用的是hash路由，所以只需要改变一下路由配置，把当前微应用的路由也改成hash模式的。
上面只是在一个空白页面中嵌入了新的app，接下来才是真正的挑战！直接把古老的ionic1拿了出来，更改一下配置路由，引入qiankun，发现运行过程也是比较顺利，来回切换有短暂的白屏加载，可能需要优化一下。
四．插件使用
由于是在ionic1中嵌入的ionic4，插件的使用也出奇的顺利，因为原来的插件就是直接引入的，只需要的新的app中判断一下，在微前端的环境下，用cordova的插件，在独立运行的情况下用ionic4中的插件就行了。
总结
前前后后大概整了3个礼拜左右，真的是太痛苦痛苦痛苦了，重要的事情说三遍。还要被技术主管嘲讽，只是写个demo而已，真的有这么麻烦吗。还真有这么麻烦！中间真的很多次想过放弃，毕竟文档里只教了1+1=2，而要做的应该是1.1+1.1=2.2，hhh。不过，最终还是一步步走了下来，在demo出来的时候，还是挺有成就感的。不过，文章写成了这个鬼样子，也是没有想到的，写之前还信心满满地想研究下微前端的实现原理，然后一起写进来，只能后面补上了。学的东西是越来越多了，欠下的技术债也是越来越多了……一起加油吧，与君共勉。
微信公众号：懒狗小前端
