CN114035786A - 一种基于依赖的微前端兼容迁移方法及系统 - Google Patents

Abstract

本发明涉及一种基于依赖的微前端兼容迁移方法及系统，包括配置目标模板集合并根据微前端迁移命令将待迁移微前端的代码填充至对应的模板目录和安装对应的模板依赖，构建为对应迁移目标框架的目标环境代码，通过匹配预先建立的代码模板目录实现微前端应用源代码的自动化转换，允许微前端应用在多个平台进行集成，而无需关心平台具体的环境，降低业务系统的维护成本，开发人员只需关心业务逻辑，减少了应对兼容性的所需工作量，提高了工作效率。

Description

一种基于依赖的微前端兼容迁移方法及系统

技术领域

本发明涉及微前端开发技术领域，尤其涉及一种基于依赖的微前端兼容迁移方法及系统。

背景技术

在Web开发技术领域，为了更好的支持日渐复杂的业务需求和系统集成需求，涌现出了微服务、微前端等前沿概念和具体的落地实践。微服务是指将一个大型系统服务端程序拆分为若干个小的服务端程序，并使用具体技术进行统一开发、集成和部署；微前端对应将一个大型系统客户端程序拆分为若干个小的客户端程序，由于客户端程序执行在客户机上，因此服务器向客户仅暴露一个入口(即底座)，由底座控制其他小程序的加载、执行、回收。通常一个业务系统不仅仅需要能够独立作为一个面向客户的系统使用，也应该具备快速集成到任意平台的能力，对于微服务有Springboot这样的集成框架，而对于微前端则没有成熟的集成工具，大部分微前端框架仅仅是实现了底座，对子应用的技术迁移却缺乏支持，这对前端的整体架构和业务应用的技术方案提出了挑战。

例如，对于金融领域的业务系统应用，在服务端使用Springboot技术栈进行开发已经相对完善，使业务系统既可以作为单体应用进行独立部署、独立运行，也可以方便的集成到各种微服务框架中，并使用K8S等技术进行容器化管理，在服务端开发领域形成了一套非常成熟的技术实践方案。而在前端领域，尽管如qiankun等开源微前端框架迅速兴起，但其对照服务端技术体系的微服务方案，仍然没有解决金融业务系统如何集成到多个平台，以及系统如何在平台之间迁移。

对于这一问题，当前很多微前端方案已经实现了独立业务系统的快速集成，业务系统很容易集成到某一种微前端框架中，但难以在多个微前端方案之间迁移；另一方面，当部分框架随版本更新后容易出现接口不稳定的问题，使业务开发人员需要经常耗费大量经历处理环境兼容问题。因此，除了对所有业务系统统一使用一个唯一的微前端方案之外，如果能够在技术上实现业务系统在不同微前端框架之间通过较小的工作量进行平滑迁移，就可以实现业务系统在多种不同微前端框架的对应适配集成，并更加易于应对微前端框架版本迭代引起的兼容性问题。

发明内容

为解决现有技术的不足，本发明提出一种基于依赖的微前端兼容迁移方法及系统，通过匹配预先建立的代码模板目录实现微前端应用源代码的自动化转换，允许微前端应用在多个平台进行集成，而无需关心平台具体的环境，降低业务系统的维护成本，开发人员只需关心业务逻辑，减少了应对兼容性的所需工作量，提高了工作效率。

为实现以上目的，本发明所采用的技术方案包括：

一种基于依赖的微前端兼容迁移方法，其特征在于，包括：

S1、配置目标模板集合，所述目标模板集合包括至少一组对应迁移目标框架的框架信息、模板目录和模板依赖；

S2、接收微前端迁移命令，从微前端迁移命令中提取目标参数；

S3、使用目标参数匹配目标模板集合中的框架信息，验证目标模板集合是否支持微前端迁移命令所需要的迁移目标框架；

S4、当目标模板集合不支持微前端迁移命令所需要的迁移目标框架时，停止迁移过程并反馈第一错误信息；

S5、当目标模板集合支持微前端迁移命令所需要的迁移目标框架时，将待迁移微前端的代码填充至对应的模板目录并安装对应的模板依赖形成临时代码；

S6、将临时代码构建为对应迁移目标框架的目标环境代码。

进一步地，所述步骤S5包括子步骤：

S51、依据模板目录创建临时目录；

S52、提取待迁移微前端的代码的必要代码项；

S53、将必要代码项填入临时目录；

S54、安装对应的模板依赖，形成临时代码，所述模板依赖包括对应迁移目标框架的环境依赖库。

进一步地，所述子步骤S53还包括：

判断必要代码项和临时目录的待填写项目的对应关系是否匹配；

当判断必要代码项和临时目录的待填写项目的对应关系匹配时，将必要代码项填入临时目录；

当判断必要代码项和临时目录的待填写项目的对应关系不匹配时，停止迁移过程并反馈第二错误信息。

进一步地，所述第一错误信息包括目标参数和缺少目标框架支持信息。

进一步地，所述第二错误信息包括第一错误信息和模板目录错误信息。

进一步地，所述子步骤S53还包括：

当反馈第二错误信息时，停止第二错误信息对应的框架信息和模板目录使用。

进一步地，所述模板目录为对应迁移目标框架的demo示例。

本发明还涉及一种基于依赖的微前端兼容迁移系统，其特征在于，包括：

模板管理模块，用于配置目标模板集合；

参数接收模板，用于接收微前端迁移命令，并从微前端迁移命令中提取目标参数；

代码填充模块，用于将待迁移微前端的代码填充至对应的模板目录；

依赖安装模块，用于安装对应的模板依赖；

应用构建模块，用于将临时代码构建为对应迁移目标框架的目标环境代码。

本发明还涉及一种计算机可读存储介质，其特征在于，所述存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述的方法。

本发明还涉及一种电子设备，其特征在于，包括处理器和存储器；

所述存储器，用于存储目标模板集合；

所述处理器，用于通过调用目标模板集合，执行上述的方法。

本发明的有益效果为：

采用本发明所述基于依赖的微前端兼容迁移方法及系统，通过匹配预先建立的代码模板目录实现微前端应用源代码的自动化转换，而无需关心平台具体的环境，允许微前端应用在多个平台进行集成，解决不同平台的微应用之间迁移代码的问题，降低开发人员一套代码要兼容不同平台的维护成本，降低业务系统的维护成本，开发人员只需关心业务逻辑，减少了应对兼容性的所需工作量，提高了工作效率。

附图说明

图1为本发明基于依赖的微前端兼容迁移方法流程示意图。

图2为本发明基于依赖的微前端兼容迁移系统结构示意图。

具体实施方式

为了更清楚的理解本发明的内容，将结合附图和实施例详细说明。

本发明第一方面涉及一种步骤流程如图1所示的方法，包括：

S1、配置目标模板集合，所述目标模板集合包括至少一组对应迁移目标框架的框架信息、模板目录和模板依赖。

其中，框架信息对应迁移目标框架的标示性信息，例如可以包括框架的通用名称、组织内部一般规定使用的框架简称以及框架的版本信息等内容，通过框架信息标记现有目标模板集合内所支持的各目标框架。

模板目录是对应框架所使用的一般代码编写规则，特别是包含了对应框架所采用的API，优选的，模板目录可以采用对应迁移目标框架的demo示例，使模板目录能够实现最佳的兼容性。对于各类框架的demo示例，一般均包含了对应该框架的API，因此使用demo示例可以直接作为模板目录。

模板依赖包括对应迁移目标框架的环境依赖库，由于现有的前端技术体系几乎都使用NPM管理，因此设置一个公共的NPM依赖，使得各个项目引入该依赖后就可以将项目构建成对应平台的可部署代码。

S2、接收微前端迁移命令，从微前端迁移命令中提取目标参数。

优选的使用NodeJS的标准库，process.argv完成命令行的参数接收，可以支持使用chalk、figlet等三方库进行用户界面的输入输出。

S3、使用目标参数匹配目标模板集合中的框架信息，验证目标模板集合是否支持微前端迁移命令所需要的迁移目标框架。

目标参数通过提取微前端迁移命令中的关键信息获取，可以要求其必须对应框架信息的全部项目进行精确匹配，以确保迁移的精确性；也可以采用非对立的匹配方式，设定部分要求完全一致的匹配项，并将剩余匹配项设置为验证不冲突即可通过，适合目标参数不能包含框架信息中全部项目的情况。

S4、当目标模板集合不支持微前端迁移命令所需要的迁移目标框架时，停止迁移过程并反馈第一错误信息。

第一错误信息包括目标参数和缺少目标框架支持信息，即第一错误信息需要向使用者反馈微前端迁移命令中提取目标参数和目标参数匹配目标模板集合中的框架信息两个操作步骤的执行情况，供使用者判断错误并进行针对性处理。对于目标参数提取错误的，需要针对性调整步骤S2的执行方式和对应提取策略；对于目标参数和框架信息不能完成匹配的，一方面需要检查目标模板集合是否保存有该特定的框架，如没有保存则需要针对性的进行添加，另一方面需要检查是否框架信息的内容或匹配方式存在问题，造成不能与目标参数进行正确的匹配。

S5、当目标模板集合支持微前端迁移命令所需要的迁移目标框架时，将待迁移微前端的代码填充至对应的模板目录并安装对应的模板依赖形成临时代码。具体的，包括子步骤：S51、依据模板目录创建临时目录；S52、提取待迁移微前端的代码的必要代码项；S53、判断必要代码项和临时目录的待填写项目的对应关系是否匹配，当判断必要代码项和临时目录的待填写项目的对应关系匹配时，将必要代码项填入临时目录，当判断必要代码项和临时目录的待填写项目的对应关系不匹配时，停止迁移过程并反馈第二错误信息，且当反馈第二错误信息时，停止第二错误信息对应的框架信息和模板目录使用；S54、安装对应的模板依赖，形成临时代码，所述模板依赖包括对应迁移目标框架的环境依赖库。

临时目录是根据模板目录的结构、项目复制而来的对应目录，其中的代码位置留空并标识需要填入的内容形成待填写项目，必要代码项与待填写项目比对后依照预设的规则填入临时目录，从而将原有的代码转化为适应目标框架的新的代码。第二错误信息包括第一错误信息和模板目录错误信息，即通过第二错误信息的反馈需要提醒使用者在检查所有第一错误信息相关项目的同时还要对模板目录的配置错误进行检查，例如项目设置或项目解释以及与代码的对应填入关系设置错误的问题。

优选的，对于转换后的新代码(临时代码)还可以依据目标框架的要求进行相应的兼容性测试。由于临时代码采用基于demo示例设置的模板目录制作，所以可以较容易的执行框架的标准兼容性测试而无需使用者进行过多的额外设置。

S6、将临时代码构建为对应迁移目标框架的目标环境代码。

在实际应用中，以NPM依赖为例，在完成模板目录和模板依赖配置后将该依赖命名为micro-env(或任意适合的名称，此处仅为示例作用)，安装micro-env，需要执行npm imicro-env-g。业务系统使用micro-env，需要在package.json中在scripts字段中添加一项”micro-env build–target cool-front”，--target表示即将构建的环境，此处可以选择cool-front微前端方案，那么编译出的静态资源应该可以直接部署到cool-front底座上，而无需关心该框架使用什么API来加载业务系统。

对于特定微前端迁移命令的执行可以执行如下操作(以伪代码展示)：

形成临时代码后，通过执行以下操作构建目标环境代码：

vue-cli-service build

本发明另一方面还涉及一种系统，其结构如图2所示，包括：

模板管理模块，用于配置目标模板集合，包括至少一组对应迁移目标框架的框架信息、模板目录和模板依赖，并适时的根据管理员配置进行变更操作。

参数接收模板，用于接收微前端迁移命令，并从微前端迁移命令中提取目标参数，目标参数需要与框架信息相匹配，因此需要参考框架信息的内容设定对微前端迁移命令的提取操作执行。

代码填充模块，用于将待迁移微前端的代码填充至对应的模板目录，特别是提取待迁移微前端的代码的必要代码项并将必要代码项填入依据模板目录创建的临时目录。在执行填入时，还需要判断必要代码项和临时目录的待填写项目的对应关系是否匹配，并及时反馈不匹配的异常情况。

依赖安装模块，用于安装对应的模板依赖，安装的依赖优选的为公共的NPM依赖，使其具有较好的适用性。

应用构建模块，用于将临时代码构建为对应迁移目标框架的目标环境代码。

通过使用该系统，能够执行上述的处理方法并实现对应的技术效果。

本发明的实施例还提供能够实现上述实施例中的方法中全部步骤的一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现上述实施例中的方法的全部步骤。

本发明的实施例还提供一种用于执行上述方法的电子设备，作为该方法的实现装置，所述电子设备至少具备有处理器和存储器，特别是该存储器上存储有执行方法所需的数据和相关的计算机程序，例如目标模板集合等，并通过由处理器调用存储器中的数据、程序执行实现方法的全部步骤，并获得对应的技术效果。

优选的，该电子设备可以包含有总线架构，总线可以包括任意数量的互联的总线和桥，总线将包括由一个或多个处理器和存储器的各种电路链接在一起。总线还可以将诸如外围设备、稳压器和功率管理电路等之类的各种其他电路链接在一起，这些都是本领域所公知的，因此，本文不再对其进行进一步描述。总线接口在总线和接收器和发送器之间提供接口。接收器和发送器可以是同一个元件，即收发机，提供用于在传输介质上与各种其他系统通信的单元。处理器负责管理总线和通常的处理，而存储器可以被用于存储处理器在执行操作时所使用的数据。

额外的，所述电子设备还可以进一步包括通信模块、输入单元、音频处理器、显示器、电源等部件。其所采用的处理器(或称为控制器、操作控件)可以包括微处理器或其他处理器装置和/或逻辑装置，该处理器接收输入并控制电子设备的各个部件的操作；存储器可以是缓存器、闪存、硬驱、可移动介质、易失性存储器、非易失性存储器或其它合适装置中的一种或更多种，可储存上述有关的数据信息，此外还可存储执行有关信息的程序，并且处理器可执行该存储器存储的该程序，以实现信息存储或处理等；输入单元用于向处理器提供输入，例如可以为按键或触摸输入装置；电源用于向电子设备提供电力；显示器用于进行图像和文字等显示对象的显示，例如可为LCD显示器。通信模块即为经由天线发送和接收信号的发送机/接收机。通信模块(发送机/接收机)耦合到处理器，以提供输入信号和接收输出信号，这可以和常规移动通信终端的情况相同。基于不同的通信技术，在同一电子设备中，可以设置有多个通信模块，如蜂窝网络模块、蓝牙模块和/或无线局域网模块等。通信模块(发送机/接收机)还经由音频处理器耦合到扬声器和麦克风，以经由扬声器提供音频输出，并接收来自麦克风的音频输入，从而实现通常的电信功能。音频处理器可以包括任何合适的缓冲器、解码器、放大器等。另外，音频处理器还耦合到中央处理器，从而使得可以通过麦克风能够在本机上录音，且使得可以通过扬声器来播放本机上存储的声音。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的系统。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令系统的制造品，该指令系统实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。

以上所述仅为本发明较佳的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换等都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应该以权利要求书的保护范围为准。

Claims (10)

1.一种基于依赖的微前端兼容迁移方法，其特征在于，包括：

S1、配置目标模板集合，所述目标模板集合包括至少一组对应迁移目标框架的框架信息、模板目录和模板依赖；

S2、接收微前端迁移命令，从微前端迁移命令中提取目标参数；

S3、使用目标参数匹配目标模板集合中的框架信息，验证目标模板集合是否支持微前端迁移命令所需要的迁移目标框架；

S4、当目标模板集合不支持微前端迁移命令所需要的迁移目标框架时，停止迁移过程并反馈第一错误信息；

S5、当目标模板集合支持微前端迁移命令所需要的迁移目标框架时，将待迁移微前端的代码填充至对应的模板目录并安装对应的模板依赖形成临时代码；

S6、将临时代码构建为对应迁移目标框架的目标环境代码。

2.如权利要求1所述的方法，其特征在于，所述步骤S5包括子步骤：

S51、依据模板目录创建临时目录；

S52、提取待迁移微前端的代码的必要代码项；

S53、将必要代码项填入临时目录；

S54、安装对应的模板依赖，形成临时代码，所述模板依赖包括对应迁移目标框架的环境依赖库。

3.如权利要求2所述的方法，其特征在于，所述子步骤S53还包括：

判断必要代码项和临时目录的待填写项目的对应关系是否匹配；

当判断必要代码项和临时目录的待填写项目的对应关系匹配时，将必要代码项填入临时目录；

当判断必要代码项和临时目录的待填写项目的对应关系不匹配时，停止迁移过程并反馈第二错误信息。

4.如权利要求3所述的方法，其特征在于，所述第一错误信息包括目标参数和缺少目标框架支持信息。

5.如权利要求4所述的方法，其特征在于，所述第二错误信息包括第一错误信息和模板目录错误信息。

6.如权利要求5所述的方法，其特征在于，所述子步骤S53还包括：

当反馈第二错误信息时，停止第二错误信息对应的框架信息和模板目录使用。

7.如权利要求2所述的方法，其特征在于，所述模板目录为对应迁移目标框架的demo示例。

8.一种基于依赖的微前端兼容迁移系统，其特征在于，包括：

模板管理模块，用于配置目标模板集合；

参数接收模板，用于接收微前端迁移命令，并从微前端迁移命令中提取目标参数；

代码填充模块，用于将待迁移微前端的代码填充至对应的模板目录；

依赖安装模块，用于安装对应的模板依赖；

应用构建模块，用于将临时代码构建为对应迁移目标框架的目标环境代码。

9.一种计算机可读存储介质，其特征在于，所述存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法。

10.一种电子设备，其特征在于，包括处理器和存储器；

所述存储器，用于存储目标模板集合；

所述处理器，用于通过调用目标模板集合，执行权利要求1至7中任一项所述的方法。

Images