基于微前端的软件开发方法、装置、电子设备及存储介质制造方法及图纸

本公开提供了一种基于微前端的软件开发方法、装置、电子设备及存储介质，该基于微前端的软件开发方法包括：响应针对目标微前端子工程的开发请求指令，从服务端加载与开发请求指令对应的目标页面模板；目标页面模板由存储于本地的与开发请求指令对应的目标微前端主工程的代码文件经打包后生成；读取目标页面模板中的数据列表，数据列表包括目标微前端子工程的名称、线上路径以及线上代码文件链接；根据目标微前端子工程存储在本地的项目配置，修改数据列表以将线上代码文件链接改成目标微前端子工程的本地代码文件链接；基于修改后的数据列表，启动网页服务，展示与修改后的目标页面模板对应的目标页面。

【技术实现步骤摘要】
基于微前端的软件开发方法、装置、电子设备及存储介质
本公开涉及计算机
，具体而言，涉及一种基于微前端的软件开发方法、装置、电子设备和存储介质。
技术介绍
微前端架构是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将网页(Web)应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。这些前端应用可以独立运行、独立开发、独立部署。在微前端架构下，通常包括微前端主工程和微前端子工程。其中，微前端主工程也称顶层的模块管理加载器，用于负责实时加载运行时的微前端子工程(也称子模块)，并注入相关依赖。因此使用微前端架构进行开发时，需要依赖微前端主工程，才能进行微前端子工程的开发。现有的微前端架构开发模式是，先启动微前端主工程服务，然后启动微前端子工程服务，将微前端主工程服务对应的微前端子工程加载代理到本地微前端子工程，来实现本地微前端子工程的调试开发。然而，上述方法在开发时由于在软件开发时需要本地同时启动两个服务(微前端主工程服务和微前端子工程服务)，导致流程繁琐且性能较低，进而影响开发效率。另外，该方法对微前端主工程代码有侵入性影响，容易带来不可预期的漏洞(bug)。
技术实现思路
本公开实施例至少提供一种基于微前端的软件开发方法、装置、电子设备及计算机可读存储介质。第一方面，本公开实施例提供了一种基于微前端的软件开发方法，包括：响应针对目标微前端子工程的开发请求指令，从服务端加载与所述开发请求指令对应的目标页面模板；所述目标页面模板由存储于本地的与所述开发请求指令对应的目标微前端主工程的代码文件经打包后生成，所述目标微前端主工程用于实时加载运行时的所述目标微前端子工程；读取所述目标页面模板中的数据列表；所述数据列表包括所述目标微前端子工程的名称、线上路径以及线上代码文件链接；根据所述目标微前端子工程存储在本地的项目配置，修改所述数据列表，以将所述线上代码文件链接改成所述目标微前端子工程的本地代码文件链接；基于修改后的数据列表，启动网页服务，展示与修改后的所述目标页面模板对应的目标页面。本公开实施例中，在接收到针对目标微前端子工程的开发请求指令时，直接从服务端加载与开发请求指令对应的目标微前端主工程页面模板，进而避免了现有技术中在本地启动目标微前端主工程项目，且不需要改动目标微前端主工程代码，仅需加载目标微前端主工程页面模板，即可实现目标微前端子工程的运行，流程更简单、提高了运行的性能，同时避免了因多人修改而产生bug的情况，提高了开发的稳定性。根据第一方面，在一种可能的实施方式中，所述读取所述目标页面模板中的数据列表，包括：通过访问所述目标页面模板中全局变量的方式读取所述数据列表；其中，所述全局变量存储有所述数据列表的相应赋值。根据第一方面，在一种可能的实施方式中，所述读取所述目标页面模板中的数据列表，还包括：在所述全局变量为空的情况下，通过调用所述数据列表接口的方式读取所述数据列表。根据第一方面，在一种可能的实施方式中，所述目标页面包括导航栏，展示所述目标页面之后，所述方法还包括：响应针对所述导航栏中的目标导航控件的触发操作，从本地加载所述目标微前端子工程的代码文件；所述目标导航控件与所述目标微前端子工程对应；响应用户的操作，对所述目标微前端子工程的代码文件进行开发和/或调试。根据第一方面，在一种可能的实施方式中，所述响应针对目标微前端子工程的开发请求指令，从服务端加载与所述开发请求指令对应的目标页面模板之前，所述方法还包括：将所述目标微前端主工程所对应的至少一个代码文件进行合并，生成目标代码文件；将所述目标代码文件与基础页面模板进行融合，得到初步页面模板；将所述数据列表渲染到所述初步页面模板中，得到所述目标页面模板。根据第一方面，在一种可能的实施方式中，所述将所述目标微前端主工程所对应的至少一个代码文件进行合并，生成目标代码文件，包括：在开发模式下，将所述微前端主工程所对应的至少一个代码文件进行合并，生成目标代码文件。第二方面，本公开实施例提供了一种基于微前端的软件开发装置，包括：加载模块，用于响应针对目标微前端子工程的开发请求指令，从服务端加载与所述开发请求指令对应的目标页面模板；所述目标页面模板由存储于本地的与所述开发请求指令对应的目标微前端主工程的代码文件经打包后生成，所述目标微前端主工程用于实时加载运行时的所述目标微前端子工程；读取模块，用于读取所述目标页面模板中的数据列表；所述数据列表包括所述目标微前端子工程的名称、线上路径以及线上代码文件链接；修改模块，用于根据所述目标微前端子工程存储在本地的项目配置，修改所述数据列表，以将所述线上代码文件链接改成所述目标微前端子工程的本地代码文件链接；展示模块，用于基于修改后的数据列表，启动网页服务，展示与修改后的所述目标页面模板对应的目标页面。根据第二方面，在一种可能的实施方式中，所述读取模块具体用于：通过访问所述微前端主工程页面模板中的全局变量的方式读取所述数据列表；其中，所述全局变量中存储有所述数据列表的相应赋值。根据第二方面，在一种可能的实施方式中，所述读取模块具体用于：在所述全局变量为空的情况下，通过调用所述数据列表接口的方式读取所述数据列表。根据第二方面，在一种可能的实施方式中，所述目标页面包括导航栏，所述装置还包括开发模块，所述开发模块用于：响应针对所述导航栏中的目标导航控件的触发操作，从本地加载所述目标微前端子工程的代码文件；所述目标导航控件与所述目标微前端子工程对应；响应用户的操作，对所述目标微前端子工程的代码文件进行开发和/或调试。根据第二方面，在一种可能的实施方式中，所述装置还包括打包模块，所述打包模块用于：将所述目标微前端主工程所对应的至少一个代码文件进行合并，生成目标代码文件；将所述目标代码文件与基础页面模板进行融合，得到初步页面模板；将所述数据列表渲染到所述初步页面模板中，得到所述目标页面模板。根据第二方面，在一种可能的实施方式中，所述打包模块具体用于：在开发模式下，将所述微前端主工程所对应的至少一个代码文件进行合并，生成目标代码文件。第三方面，本公开实施例提供了一种电子设备，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当电子设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行如第一方面所述的基于微前端的软件开发方法的步骤。第四方面，本公开实施例提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行如第一方面所述的基于微前端的软件开发方法的步骤。为使本公开的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。附图说明为了更清楚地说本文档来自技高网...

【技术保护点】
1.一种基于微前端的软件开发方法，其特征在于，包括：/n响应针对目标微前端子工程的开发请求指令，从服务端加载与所述开发请求指令对应的目标页面模板；所述目标页面模板由存储于本地的与所述开发请求指令对应的目标微前端主工程的代码文件经打包后生成，所述目标微前端主工程用于实时加载运行时的所述目标微前端子工程；/n读取所述目标页面模板中的数据列表；所述数据列表包括所述目标微前端子工程的名称、线上路径以及线上代码文件链接；/n根据所述目标微前端子工程存储在本地的项目配置，修改所述数据列表，以将所述线上代码文件链接改成所述目标微前端子工程的本地代码文件链接；/n基于修改后的数据列表，启动网页服务，展示与修改后的所述目标页面模板对应的目标页面。/n

【技术特征摘要】
1.一种基于微前端的软件开发方法，其特征在于，包括：
响应针对目标微前端子工程的开发请求指令，从服务端加载与所述开发请求指令对应的目标页面模板；所述目标页面模板由存储于本地的与所述开发请求指令对应的目标微前端主工程的代码文件经打包后生成，所述目标微前端主工程用于实时加载运行时的所述目标微前端子工程；
读取所述目标页面模板中的数据列表；所述数据列表包括所述目标微前端子工程的名称、线上路径以及线上代码文件链接；
根据所述目标微前端子工程存储在本地的项目配置，修改所述数据列表，以将所述线上代码文件链接改成所述目标微前端子工程的本地代码文件链接；
基于修改后的数据列表，启动网页服务，展示与修改后的所述目标页面模板对应的目标页面。


2.根据权利要求1所述的方法，其特征在于，所述读取所述目标页面模板中的数据列表，包括：
通过访问所述目标页面模板中全局变量的方式读取所述数据列表；其中，所述全局变量存储有所述数据列表的相应赋值。


3.根据权利要求2所述的方法，其特征在于，所述读取所述目标页面模板中的数据列表，还包括：
在所述全局变量为空的情况下，通过调用所述数据列表接口的方式读取所述数据列表。


4.根据权利要求1所述的方法，其特征在于，所述目标页面包括导航栏，展示所述目标页面之后，所述方法还包括：
响应针对所述导航栏中的目标导航控件的触发操作，从本地加载所述目标微前端子工程的代码文件；所述目标导航控件与所述目标微前端子工程对应；
响应用户的操作，对所述目标微前端子工程的代码文件进行开发和/或调试。


5.根据权利要求1所述的方法，其特征在于，所述响应针对目标微前端子工程的开发请求指令，从服务端加载与所述开发请求指令对应的目标页面模板之前，所述方法还包括：
将所述目标微前端主工程所对应的至少一个代码文件进行合并，生成目标代码文件；
将所述目标代码文件与基础页面模板进行融合，得到初步...

【专利技术属性】
技术研发人员：陈伟源，
申请(专利权)人：北京字节跳动网络技术有限公司，
类型：发明
国别省市：北京;11