最近光荣的成为了失业大军中的一员，趁着这段时间，将自己在公司中想要搭却没有搭成功的微前端架子搭起来了。
并且我还给他起了个简单易懂的名字，就是qiankun-admin
要说有什么特点，还真没有。只是将qiankun框架应用上，同时用上react18、vue3组成一个现成的架子，并希望能够有公司能应用上，只要想到某个没听过的公司用着自己的代码，就很有成就感，虽然不太可能hahaha~。（但是坏消息是qiankun 3.0 的 rc 版本又发布了，这用qiankun2搭的架子很快又要过期了哭死）
当然，如果能够给别人用作学习参考，也会让我感觉很开心。
虽然技术上没有什么太大特点，但是该有的功能我还是尽可能的都给加上了。
模块联邦
关于微前端，有个痛点必须要解决，那就是模块的复用。原先采用模块复用的方式大多数都是将这些模块封装起来，包装成一个依赖进行复用。但是现在时代变了，webpack5给我们带来了模块联邦。
所以在这个架子里面，我也实现了主子应用间的模块联邦的代码复用。当然，由于复杂度的原因，仅仅只复用了请求模块和多语言的模块。但是由于主应用使用的是webpack，而子应用使用的是vite。所以这又不是一般的模块联邦，而是跨编译工具的模块联邦，这对于老项目用webpack，却想体验一下vite的人来说，是个不错的参考。
首先，在webpack.config.js中使用webpack提供的插件ModuleFederationPlugin定义好需要使用模块联邦的模块，其实本质上是将其拆分成一个chunks。
然后在vite的子项目中，使用插件@originjs/vite-plugin-federation进行模块的引用。
模块联邦还有个缺点是，无法复用模块的类型定义，这也是对比抽离依赖库的缺点之一，所以在我们引入模块联邦的模块后，如果使用了typescript则还需要在子应用中声明对应的类型才能正常使用。
Tabs页面标签
tabs缓存也是我认为比较重要的一个业务性的功能，当一个人操作两个系统时，切换系统后，发现前一步操作的数据没了，这是很蛋疼的。这就是为了解决这类痛点，做页面数据持久化。
这里使用了Vue自带的KeepAlive就不说了，React用的是react-activation这个库，而标签组件是属于主应用的Layout组件的一部分，所以主应用与子应用这里用了自定义的DOM事件来进行通信。
多语言
不想成为一个跨国大企业的公司不是好公司，所以需要一个支持多语言的后台管理系统就成了必要条件了。
架子里使用i18n-js框架实现了多语言，然后借由模块联邦抽离出公共的多语言模块供所有系统使用。
全局的状态管理控制
qiankun实现的全局应用状态管理确实是太简陋了，就一个set方法，一个change的钩子，仿佛一切又回到了刀耕火种的时代。
所以只能自己强撸一个主子关联的状态同步管理流程了。其基本的逻辑是一切以主应用的状态为主，同时在子应用中实现同名状态store，所有更新都需要更新主应用状态，主应用状态变更后再由主应用通过监听发布的方式同步子应用的状态更新。
总体逻辑不难理解，实现起来也很简单。我甚至还做了一张示意图
基础功能
一些基础功能应有尽有，像父子应用的单独开发单独部署，登录注册，甚至为了让整个项目看上去更饱满，还特意为两个子项目都设计了一些内容，像是基础的图表展示，数据表格，表单弹窗操作。
结语
虽然一切都比较简单（这也是为什么我都没有放代码），但是只有真正实践过才知道里面也会有很多的坑。什么事情都不是一蹴而就的，虽然架子搭的简单，但是前前后后还是花了两周的事件，或多或少自己也获得了一些成长。
其中有很多的不足，这我当然知道，后续也会慢慢改。可能它并不能发挥什么作用，或者真正被使用上，但是对我的意义在于做了比不做好，期间的过程就是意义。
诸君共勉吧
