摸鱼笔记 微前端——前言篇

leader口中的微前端

微前端 这个高大上的概念最初就是为了 攻破不同技术栈 的壁垒，融合 不同平台代码 而诞生的。那么，在这个如此宏伟的核心概念面前，领导心目中 又会对微前端有着怎样的憧憬呢？

对于摸鱼者的领导，我们就亲切的称他为“渔夫”。。。

由于项目需求些许停滞，渔夫就给我丢了条“鱼”（也就是任务），这鱼就是将 原本项目 进行 微前端改造 了。最主要是莫得限定时间，这不就是赤果果的摸鱼任务吗！？开摸~~~

目的： （整理了一下渔夫的改造用意）

1. 让项目库仓 快速分离 ，实现内部项目部署时可以 脱离大版本。
2. 将一些 多个项目接入 的模块实现独立 公共化 ，这些模块就类似登录校验、用户调研等
3. 有利于版本 灰度升级 ，最大限度保证 生产问题可控性

摸鱼前的准备---借助qiankun

看过qiankun官网的coder们应该都知道，这套框架已经对微前端方案 进行了封装 。这也就意味着，我们仅仅只是调用其暴露的API ，便可以轻易实现微服务的应用方案。

从根本上来说，qiankun也是通过识别代码文本 （打包后） 中的<script></script>标签，区分是 内嵌还是引入 的js代码，分别代入不同的实现库来实现子应用的引入。也就是说，我们只要通过 基座 准确地调用子应用的入口，便可以实现 跨服务、跨仓库 引入页面的操作。

OK，对qiankun实现由大概了解之后，就是开始规划如何应用以及适应到目前项目中去了。

基座模块规划

目前看来，最直观的切入点便是基座了，这也就意味着基座本身就可以定义为 一个项目 来开发。在开发的同时一定要整理出一套 开发规范 （定义的规范将在之后的篇章中穿插介绍），因为无法避免其他开发团队也会突发奇想掺和一脚，甚至出现 “团队制造” 的基座。

基座打包规划

• 开发环境

• • 可以直接配置调试入口，基座单独项目接入子应用入口
• • publicPath根据入口改变 （否则图片就全部识别不到了）

• 测试环境

• • 整理项目模块并形成一个对象列表，形成 部署位置+对象名称 （当然是有入口 js承接的） 的子应用 链接规则。
• • 开发 入口菜单 界面，仅仅只是 方便测试 人员，至于是否同步生产开发，全看业务诉求。

• 开发环境

• • 入口地址原理与测试环境相似，关键是要 分文件 开发
• • 入口的前置后置、loading、store变化以及路由回到基座，都需要埋入 监控埋点 （属于开发类埋点）。

子项目适应规划

俗话说蛇打七寸，而子应用的“七寸位”就在于对所有项目 入口文件整合 的位置。首先，需要适应基座的路由路径path，整合文件处方便对路由的path进行改造。

接下来就是qiankun的子应用需要的 钩子函数 。qiankun基座加载子应用会走对应的bootstrap、mount、unmount、update方法。

之后就是确保子应用引入 不影响原有逻辑 ，也就是生产上的项目运行。这一块便可以借助window.__POWERED_BY_QIANKUN__来区分是否接入了qiankun基座。

还有一个很重要的坑，qiankun基座对于子应用 内部error十分敏感 ，也许你本来业务的报错虽然单独跑安然无恙，但是基座却会因为这些报错跟你说应用dead。

所以，前人挖坑后人填，实在不行，删库跑路也是挺轻松的嘛~~~ （来自28岁coder的自述）

总的来说，子应用这块各位摸鱼coder根据自己的项目的情况来摸 （别摸我 T-T），具体框架灵活应用。

笔记展望

本篇章暂时没有代码相关的实现，主要是讲述了我一开始对于项目微前端化的规划，接下来的 实现篇 将会贴上代码以及实现。

主要还是想通过本篇章，认识更多为微前端化奋斗的coder，一同分享技术，攻克难关。技术小生，多多指教。