阅读 53

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

leader口中的微前端

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

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

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

目的: (整理了一下渔夫的改造用意)

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

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

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

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

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

基座模块规划

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

基座打包规划

  • 开发环境

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

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

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

子项目适应规划

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

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

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

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

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

921f5936acaf2eddb76e1d8d801001e9380193c9.jpg

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

笔记展望

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

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

文章分类
前端
文章标签