关于微前端(阿里QianKun)的那点事——上线一个“微前端”逼走了2位90后

「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」

• 📢欢迎点赞 ：👍 收藏 ⭐留言 📝 若有错误敬请指正，赐人玫瑰，手留余香！
• 📢本文做者：由webmote 原创，首发于 C🙉
• 📢做者格言： 生活在于折腾，当你不折腾生活时，生活就开始折腾你，让咱们一块儿加油！💪💪💪

🎏 序言

做为一个团队领导者，须要常常帮助组员解决各种阻塞问题。🎎🎎🎎

而我一直从过后端的开发，致使对前端的知识储备并无那么丰富（实际很简陋）。

鉴于当下流行的开发模式几乎都是先后端分离的，为了组建好团队，前端、后端几乎1比1配置好像有些不太对，所以稍微倾斜了下后端，按80%配置前端，这个比例究竟是不是合适，估计每一个人都有本身的看法，能够留言谈谈大家团队的人员配比问题。

咱们的新的产品，后端采用微服务，前端采用微前端，感受是绝配啊。没想到，悲剧就此拉开序幕.....

🎏 01.你好像不会哎...

为了组建团队，须要进行多轮次的面试，遴选人才历来不是一个轻松的活。

揣着一颗忐忑不安的心，在备足了前端的知识后，开始上岗面试了，碰到我这种半瓶子晃荡的面试官，诸位前端大佬们是否是很轻松的吊打面试官？

谈谈个人面试方式

个人通常步骤是：

• 🍄进入正题前，和他们聊聊经历、离职缘由以及以前的开发团队状况，聊完以为还合适的，就再深刻聊聊技术。
• 🍄通常会问下vue的生命周期、vue的路由分类、父子组件通讯方式以及对象的深度拷贝，甚至会让他写个递归函数，到此基本结束。

通常在聊对象深拷贝的时候，好多前端工程师就冒出来一句：你好像不会哎，你不了解前端吧。

哎呀，妈呀！这句话简直是晴天霹雳，震得老夫虎躯一阵摇晃！
复制代码

看来我恶补的vue知识、typescript基础以及当时上手的angular项目都是白来的了，好吧，我只好坦白，我不是很懂。

好像我终于找到了真正的前端工程师，你就是我想要的人才！

来吧，come on，baby!

这就是我被吊打的整个过程。🔥🔥🔥

🎏 02.看起来不错的90后前端

面试的一位前端90后，聊的还算愉快，会的也多（⚡吊打后的真实反应⚡），看项目经验也蛮不错，我但愿他来作前端组长。

毕竟对于疏于前端知识的我来讲，不必在不熟悉的领域花费太多时间。

让能干的人，把事情干好就好了。🤔🤔🤔

工资我还但愿能再给他多点，毕竟找个能干的人不容易，稳定的团队才可以持续发展。

也许灾难的起源就在于不了解，对前端的知识匮乏，致使了后续事件的发酵。

微前端的概念应该有好几年了，以前也和之前的同事聊过，都以为是不错的理念。刚好我看到有介绍阿里QianKun引擎的文章，讲的很是详细，我就转发给了这位90后小伙子。并屡次给他说咱们须要微前端架构搭设咱们的项目，采用阿里成熟的引擎，至少方向不会错。

不知道个人理解对不对：

微前端在个人理解是基于目前的框架，代替了iframe老式组织形式的变种而已。

若是没有淘汰iframe，那么使用iframe作微前端，简直简单的要死。 而微前端引擎就是采用新的技术替代iframe，所以须要作到子应用的加载，甚至动态加载，而且须要解决掉CSS、JS的冲突，隔离开其范围。

任务已经布置了，就耐心等待结果吧，一切就交给“前端组长”吧！😍😍😍

🎏 03.应接不暇的DEMO

团队的沟通永远是个问题，而日本人并不这么认为，他们有一套本身的方法。

一个问题，要想布置的很清晰，须要按五步法来进行。

1. 要有一个能胜任的人 🕺
2. 要有明确的完成时间 ⏱️
3. 要有明确的完成标准 🚩
4. 布置完任务，让员工复述一遍🗣️
5. 作好汇报要求，检查进展✅

而在此过程当中，我并无按照上述步骤实施，而我觉得和他觉得可能并未对齐。

固然我只是简单的跟踪下任务进度和看下最终结果，里面的代码我也没有去把控。

大概几天后，我亲爱的90后前端组长（手下有2为前端成员），就拿出来3个DEMO，说都是别人基于qiankun或是single-spa作的微前端，基座和子应用都有，支持vue、angule、react等等。

我感受随便一个都知足个人需求啊，这下我就更放心了。 “你来定一个”，反正咱们也不须要其余技术栈，只要支持vue就能够了。

另一个前端工程师去作子应用，配合基座完成子应用的改造。

分工感受很明晰了，这个迭代的目标也应该没问题了吧？天天的晨会，都有进展，就不提了。

🏃🏃🏃又过了大约1-2周，当我再去了解的时候，前端组长说基座和子应用通讯有些问题，我就大体看了下qiankun的介绍文档，并把文档贴到群里。

我感受我已经看懂了，采用引擎提供的api，就能够传递token过去，而后我决定和他当面沟通下。 对话以下：

我：我们这个通信采用我发的那篇文章介绍就能够，你看看。 他：嗯嗯，这个很简单，采用localstorage就能够。 我：不行吧，子应用可能部署在不一样的域下，那怎么可能呢？ 他：这样啊，那咱们就采用那个api，我再改改，改动比较大。 我：你用的是qiankun 几？ 他：别人集成的，不知道啊。 我：是否是版本过低，如今好像是2点几。 他：这个项目看不了使用的是啥版本。 我：看看包里有没，我再看看官方文档去。 ............. 我看文档后 ，发现只须要安装qiankun包便可。 我：yarn add qiankun 他：我这个项目好像不是qiankuan的，我再看看别的demo......

此时，另一位前端告诉我，他已经按照组长的吩咐，分别在3个demo上改了3版登陆了，而且用的都不是qiankun...

个人娘啊，发生了啥！

🎏 04. 闪人了

星星之火，已经燎原！🔥🔥🔥

前面的错误耽搁了咱们的选型时间，不过知错就改，赶快掉头仍来得及。

事情来了，稳住，别乱！🧺

我紧急通知前端组长，尽快采用qiankun包，构造项目，搭建基座。

恰好公司又来了一位前端，是个老手，这里就称呼他老A吧，让他和前端组长一块搞。

我本身也忙着查看官方文档，试图协助他们搞定基座容器项目，毕竟迭代任务须要按时完成。

花费了几个小时，大体原理我看了一遍，以为集成起来应该很简单，没有特别复杂的地方，固然做为技术经理，对其中的小坑仍是有必定预知的。

下班时间到了，和他们一块儿沟通了下，哎，下班前作事情真不是个人初衷。

老A说，没问题，特简单，交给我搞吧，明天搞定。

前端组长说：搞不定了，让我去作子应用吧。

@@@我就和他单独聊了下来龙去脉，应该没有特别重的话，只是告诉他应该采用qiankun，而不该该采用其余的引擎，除非他有把握作的更好。此次就这样吧，让老A去搞基座，咱们去作子应用的相关任务，并给他分了几个任务。

没想到在下班路上收到他的微信。

经理我想提离职，状态不行，平静一段时间再找工做

没适应过来

原本一号想说

状态不行，怕耽误进度

我试图挽留，毕竟仅仅遇到一个小坎坷呗，挺过去就没什么了。结果他只说了句：哎，状态没调整过来，去深圳我同窗那调整一段时间，提高下技术。

好似一片雪花从头上划过，我看好的，依赖的，没有检验就依赖的前端组长，就这样闪人了。 一个月，留下了 7个DEMO项目。

难道这就是，传说中的这个领导不听个人....

🎏 05. 救火还需队长

除了面临前端组长留下的烂摊子之外，我也备受组建团队的打击。

我突然明白了一我的的忽然离职，对他的上级来讲，也是一种额外的重击，固然，最终我又想通了，没啥大不了的，总结下教训就是了，不必上纲上线。

次日仍然是忙乱的一天，我一直跟踪着基座项目的进展，消息忽好忽坏。

下班的时候，前端老A告诉我，里面有许多问题搞不定，可能用不了，他下班了，明天再看。

虽然下班了，但我真的不能任事态发展下去了，我决心本身来试一下，看看到底卡在哪里了。

加班不分时间，好像作了领导就有了这觉悟！

我克隆下qiankun的官方Demo一、我发的那篇文章的Demo2，而后对比教程，一步步创建一个新的vue基座项目。

不会的就百度、谷歌。

1. 创建新的vue项目:宇宙飞船

vue create portal-spaceShip

2. 增长element-ui

yarn install element-ui

3. 增长qiankun

yarn add qiankun

4. 把demo2的ts程序翻译为js写到项目内
5. 启动

✨好像成功了，我怀疑我是否是没进入新的状态，这么顺利吗？

✨把demo1的子应用启动一个，个人神啊，就这么快吗，没问题啊。

❤️好像有信心了：增长登陆窗口、增长连接，没什么难点啊，登陆ok了。

应该好了70%吧,我内心想。

好像还有点小问题，加载的子应用并没渲染到指定的容器内，而是顶在了顶层容器上。一番折腾，我终于发现问题的根源。

5.1 阿里乾坤的坑1

子应用加载会加载到顶层，是由于子应用和基座应用都使用了相同的id，把基座的index.html内的id修改成不一样的id便可。

5.2 坑2 动态注册微服务

引擎注册因为生命周期缘故，须要在vue的周期先后启动，通常放在main.js，注册api registerMicroApps也在此时调用。但因为还没登陆，所以没法注册设定的服务。通过大量查询issue，发现其已经支持动态添加子应用。只需再次调用 registerMicroApps便可。

你能够在app.vue内合适的地方调用，便可渲染增长新的微服务。

5.3 坑3 子应用返回主应用

这个应该不能算是引擎的坑，应该是启用了根目录致使的，不能往上层弹出路由，仅须要使用便可。

//window.location.href = "/";
      window.history.pushState(null,'','/login');
复制代码

5.4 核心点 子应用无需qiankun包

最核心的一点是，子应用不须要关注qiankun框架，无需引用其包，只需按照标准实现导出接口便可。

一切妥妥的，并无那么难。

🎏 06. 绝杀技：有事不来了

固然晚上加班并无搞完全部的，几个坑也是在加班后次日解决的。

由于老A次日没来，问起来，说是请假了，哎，这个假批仍是不批...

其实既然已经开始搞了，那就搞得风生水起，固然也无需在乎这些细节。

“不来就不来吧，没什么大不了。” 我只能本身安慰本身。

职场生存技能：若是搞不定手头的紧急事情，就请假吧，拖到你的上级两眼冒金星✨✨✨，事情天然有进展！

看起来，有必要增强前端知识了~~~

看起来，我带队伍的能力有待提升 ~~~

🎏 07. 结语

关于此事情，我和老板详谈了下，要点记录以下。

固然是他得见解和建议，值得反思，其实也有点打击个人积极性，由于我没有获得他的支持。

• 识人问题，没搞清楚，就让人担大任
• 放权问题，检验与任务布置不清晰
• 职级差异，心离得太远，很难听到实话
• 沟通占用时间过长，每一个人都须要和我沟通
• 后台框架固有问题，某某的槽点
• 情商问题，情商不高🤕🤕🤕
• 须要考虑轮流组长，设定中间人，来承担任务

🤕🤕🤕玻璃心的我也受到1万点伤害，不过我须要挺过去，看到得朋友但愿能帮我分析分析！

谢谢，谢谢你们了。

这也是一场可贵得经历，记录下来，之后也是一串特别得足迹！

年少不识前端香，🕺🕺🕺 错把后端当个宝！

例行小结，理性看待！

结的是啥啊，结的是我想你点赞而不可得的寂寞。😳😳😳

👓都看到这了，还在意点个赞吗？

👓都点赞了，还在意一个收藏吗？

👓都收藏了，还在意一个评论吗？

还有系列前端文章，客官，你不瞧瞧？

👉前端项目，看我在这里管理全局后台初始化的数据，就问你飒不飒？

👉Vue中路由到一个公共组件，而后根据路径中是否存在文件动态加载组件

👉解放前端工程师——手把手教你开发本身的自定义列表和自定义表单系列之一缘起

👉解放前端工程师——手把手教你开发本身的自定义列表和自定义表单系列之二接口

👉解放前端工程师——手把手教你开发本身的自定义列表和自定义表单系列之三表格