[发明专利]微前端在北银金融场景建设中的设计与实现方法

说明书

本发明涉及金融场景的技术领域，特别是涉及微前端在北银金融场景建设中的设计与实现方法，包括动态路由、路由配置信息设计、子工程接口设计模块、复用方案设计、流程方案设计和部署方案；动态路由：使用React‑Router；路由配置信息设计：在动态加载方案确定之后，基座工程需要知道子工程的资源路径，进而加载对应的JS和CSS资源，做一组映射信息，即业务线唯一标识为Key，相应的静态资源地址为Value，这样的话，当基座工程切换到子工程时就可以拉取这个配置信息，在路由切换时准确地找到对应的子工程，进而进行后续的资源加载过程。

技术领域

本发明涉及金融场景的技术领域，特别是涉及微前端在北银金融场景建设中的设计与实现方法。

背景技术

在北京银行金融场景建设中，涉及到了校园场景、医疗场景、园区场景、社区场景等，它们UI差异小，业务逻辑相似。在这种特殊的业务场景下，就会出现一个有关开发效率的抉择问题。即我们希望能复用的部分只开发一次，而不是多次。

微前端是一种利用微件拆分来达到工程拆分治理的方案，通过代码复用，可以解决工程膨胀、开发维护困难等问题。业内有多种方式实现业务逻辑的拆分解耦，如：Npm式、Iframe式、路由分发式，NPM式：子工程以NPM包的形式发布源码，打包构建发布还是由基座工程管理，打包时集成，缺点就是无法独立打包、独立部署，工程侵入性高、学习成本高；iframe式：子工程之间完全独立，无任何依赖，缺点是基座工程和子工程需要建立通信机制、无单页应用体验、路由地址管理困难、对现有工程侵入性高；路由分发式：子工程之间完全独立，无任何依赖，缺点是子工程切换速度慢、工程间通信难度大、学习成本高。

本发明需要解决的技术问题是：

·随着场景的增多，也为了保证多场景下复用效率的最大化，把文件放入同一仓库管理，导致文件数量增长极快，管理及协同开发难度也在不断加大；

·文件越来越多，文件结构越不受控制，业务开发寻址变得越来越困难；

·文件越来越多，开发、构建、部署速度变得越来越慢，开发体验在持续下降；

·不同场景业务线间没有物理隔离，出现了跨业务线互相引用混乱，例如校园场景业务线出现了医疗场景业务线名字的组件。

发明内容

为解决上述技术问题，本发明提供微前端在北银金融场景建设中的设计与实现方法。

本发明的微前端在北银金融场景建设中的设计与实现方法，包括动态路由、路由配置信息设计、子工程接口设计模块、复用方案设计、流程方案设计和部署方案；

动态路由：使用React-Router；

路由配置信息设计：在动态加载方案确定之后，基座工程需要知道子工程的资源路径，进而加载对应的JS和CSS资源，做一组映射信息，即业务线唯一标识为Key，相应的静态资源地址为Value，这样的话，当基座工程切换到子工程时就可以拉取这个配置信息，在路由切换时准确地找到对应的子工程，进而进行后续的资源加载过程；

子工程接口设计模块：子工程需要暴露它要注册给基座工程的对象，来进行基座工程加载子工程的过程，在子工程入口文件中定义registerApp来传递注册的对象；

复用方案设计：基座工程除了路由管理之外，还作为共享层共享全局的基建，把React相关库都以全局的方式导出，而子工程加载的时候就会以external的形式加载这些库；

流程方案设计：在确定了程序拆分运行的整体衔接之后，确定开发方案，包括开发流程、热更新、Mock数据；

部署方案：最后是部署方案，达成了独立部署上线的目的，即子工程发布不需要基座工程的参与，子工程部署只需要把子工程打包，并在上传CDN之后，把配置信息更新即可，因为配置信息中有子工程新的资源地址，这样就达到了发布上线的目的。