基于软件开发框架衍生的多应用微前端实现方法技术

本发明专利技术涉及微前端开发技术领域，提供一种基于软件开发框架衍生的多应用微前端实现方法，包括：步骤A，根据工程管理的需要，对应用进行拆分，形成基盘应用和子应用；其中，所述基盘应用是系统的底层架构，所述基盘应用包含了基础功能的应用架构；所述子应用，可以按行业进行具体划分；步骤B，建立共通的UI组件库和工具类库；步骤C，使用模块扩展，重写N框架核心逻辑，以完成qiankun对于子应用的接入需求；步骤D，为各子应用创建脚手架工程。本发明专利技术能够实现基盘在项目之间的可复用性，降低维护成本，提高开发效率。高开发效率。高开发效率。

【技术实现步骤摘要】
基于软件开发框架衍生的多应用微前端实现方法


[0001]本专利技术涉及微前端开发
，尤其涉及一种基于软件开发框架衍生的多应用微前端实现方法。

技术介绍

[0002]微前端是一种多个团队通过独立发布功能的方式来共同构建现代化web应用的技术手段及方法策略。微前端借鉴了微服务的架构理念，将一个庞大的前端应用拆分为多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用联合为一个完整的应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活。
[0003]当前，基于vue、react、angular的单页应用开发模式已经成为业界主流。受益于它们丰富的生态，可以使用这些技术快速构建一个新的应用，迅速响应市场。随着业务的不断发展，由于各应用模块之间的强耦合性，导致应用开始变得庞大臃肿，逐渐成为一个巨石应用，难以维护不说，每次开发、上线新需求时还需要花费不少的时间来构建项目，对开发人员的开发效率和体验都造成了不好的影响。
[0004]目前普遍采用的开发方法，具有以下问题：
[0005]1、在新业务构建时，拷贝一份基盘代码作为脚手架工程，在此基础上进行些许修改，迎合新业务，然后才能进行业务开发。此模式长此以往下去，会导致基盘代码维护困难，一个地方有故障后，所有业务的基盘版本都得去做修改。且业务规模壮大以后会沦为巨石应用。因此，每次新建业务都需要重复以前的操作和修改，开发维护成本高。
[0006]2、通常从系统登录到组成一个系统的各个基本维护页面，其实是一套完整的业务流。任何业务都可以基于这套业务流做上层开发。但是，像vue这种模式的框架，在一个项目内做组件共通化是容易的，但在不同项目之间想实现一个共通化的模块比较困难。因此，基盘代码不可复用，基于vue框架的开发模式，项目之间很难实现共通模块的复用。
[0007]3、N框架不在开源微前端框架qiankun官方提供支持的范围内，无法很好的实现微前端思想。
[0008]所以需要通过引入微前端技术，解决开发过程中面临的问题。

技术实现思路

[0009]本专利技术主要解决现有技术开发成本高，代码维护困难，项目之间无法实现共享等问题，提出一种基于软件开发框架衍生的多应用微前端实现方法，以达到实现基盘在项目之间的可复用性，提高开发效率，降低维护成本的目的。
[0010]本专利技术提供了一种基于软件开发框架衍生的多应用微前端实现方法，包括以下过程：
[0011]步骤A，根据工程管理的需要，对应用进行拆分，形成基盘应用和子应用；其中，所述基盘应用是系统的底层架构，所述基盘应用包含了基础功能的应用架构；所述子应用，可
以按行业进行具体划分；
[0012]步骤B，建立共通的UI组件库和工具类库；
[0013]步骤C，使用模块扩展，重写N框架核心逻辑，以完成qiankun对于子应用的接入需求；
[0014]步骤D，为各子应用创建脚手架工程。
[0015]进一步的，所述步骤A，包括以下步骤A1至步骤A5：
[0016]步骤A1，创建基盘应用的基础功能；
[0017]步骤A2，进行路由管理；
[0018]步骤A3，分别建立基盘应用和子应用的通信机制；
[0019]步骤A4，使用标签页，对每一个页面进行管理；
[0020]步骤A5，建立组件缓存动态管理机制。
[0021]进一步的，所述步骤A2，包括以下步骤A2
‑
1至步骤A2
‑
2：
[0022]步骤A2
‑
1，进行系统的页面级改造；
[0023]步骤A2
‑1‑
1，主应用中增加对微应用的动态配置管理，可根据需要增加/修改/删除子应用的配置信息；
[0024]步骤A2
‑1‑
2，进行菜单定义配置；
[0025]步骤A2
‑
2，进行框架级改造；
[0026]步骤A2
‑2‑
1，增加路由插件；
[0027]步骤A2
‑2‑
2，针对基盘应用和子应用，进行加载和卸载处理。
[0028]进一步的，在步骤B中，所述UI组件库和工具类库使用npm公共包进行管理。
[0029]进一步的，所述步骤B中，包括以下步骤B1至步骤B2：
[0030]步骤B1，按照如下步骤B1
‑
1至步骤B1
‑
5创建UI组件库；
[0031]步骤B1
‑
1，基于脚手架搭建组件库项目，以及先实现并跑通一个测试程序组件；
[0032]步骤B1
‑
2，将所有UI组件抽出到这个工程中，完善组件api的设计、组件模板和样式；
[0033]步骤B1
‑
3，打包的组件库：使用webpack打包组件库的js代码、使用gulp打包样式代码；
[0034]步骤B1
‑
4，发布组件库到npm上，以供基盘应用和子应用安装使用；
[0035]步骤B1
‑
5，搭建组件库文档站点，包含了每个组件的接口定义，使用场景以及详细案例；
[0036]步骤B2，按照如下步骤B2
‑
1至步骤B2
‑
5创建工具类库；
[0037]步骤B2
‑
1，创建基于rollup的初始工程；
[0038]步骤B2
‑
2，将原系统中所有工具类库抽出到这个工程中，并对模块进行拆分；
[0039]步骤B2
‑
3，使用rollup打包工具类库。
[0040]步骤B2
‑
4，发布工具类库到npm上以供基盘应用和子应用安装使用；
[0041]步骤B2
‑
5，搭建工具类库文档站点。
[0042]进一步的，所述步骤C，包括步骤C1至步骤C3：
[0043]步骤C1，重写N框架下的客户端client.js模板文件；
[0044]步骤C2，定义实例，注册插件；
[0045]步骤C3，编写client.js模块文件。
[0046]进一步的，所述步骤C1，包括：
[0047]步骤C1
‑
1，在使用qiankun的场合下，暴露qiankun框架所需的bootstrap、mount、update、unmount生命周期函数，否则保留原始逻辑并进行画面渲染；
[0048]步骤C1
‑
2，在qiankun的场合下，不改变webpack_public_path的值；
[0049]步骤C1
‑
3，在qiankun模式下，创建app的时候，需要将基盘应用传过来的数据参数设置到全局的配置变量当中本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于软件开发框架衍生的多应用微前端实现方法，其特征在于，包括以下过程：步骤A，根据工程管理的需要，对应用进行拆分，形成基盘应用和子应用；其中，所述基盘应用是系统的底层架构，所述基盘应用包含了基础功能的应用架构；所述子应用，可以按行业进行具体划分；步骤B，建立共通的UI组件库和工具类库；步骤C，使用模块扩展，重写N框架核心逻辑，以完成qiankun对于子应用的接入需求；步骤D，为各子应用创建脚手架工程。2.根据权利要求1所述的基于软件开发框架衍生的多应用微前端实现方法，其特征在于，所述步骤A，包括以下步骤A1至步骤A5：步骤A1，创建基盘应用的基础功能；步骤A2，进行路由管理；步骤A3，分别建立基盘应用和子应用的通信机制；步骤A4，使用标签页，对每一个页面进行管理；步骤A5，建立组件缓存动态管理机制。3.根据权利要求2所述的基于软件开发框架衍生的多应用微前端实现方法，其特征在于，所述步骤A2，包括以下步骤A2
‑
1至步骤A2
‑
2：步骤A2
‑
1，进行系统的页面级改造；步骤A2
‑1‑
1，主应用中增加对微应用的动态配置管理，可根据需要增加/修改/删除子应用的配置信息；步骤A2
‑1‑
2，进行菜单定义配置；步骤A2
‑
2，进行框架级改造；步骤A2
‑2‑
1，增加路由插件；步骤A2
‑2‑
2，针对基盘应用和子应用，进行加载和卸载处理。4.根据权利要求1所述的基于软件开发框架衍生的多应用微前端实现方法，其特征在于，在步骤B中，所述UI组件库和工具类库使用npm公共包进行管理。5.根据权利要求4所述的基于软件开发框架衍生的多应用微前端实现方法，其特征在于，所述步骤B中，包括以下步骤B1至步骤B2：步骤B1，按照如下步骤B1
‑
1至步骤B1
‑
5创建UI组件库；步骤B1
‑
1，基于脚手架搭建组件库项目，以及先实现并跑通一个测试程序组件；步骤B1
‑
2，将所有UI组件抽出到这个工程中，完善组件api的设计、组件模板和样式；步骤B1
‑
3，打包的组件库：使用webpack打包组件库的js代码、使用gulp打包样式代码；步骤B1
‑
4，发布组件库到npm上，以供基盘应用和子应用安装使用；步骤B1
‑
5，搭建组件库文档站点，包含了每个组件的接口定义，使用场景以及详细案例；步骤B2，按照如下步骤B2
‑
1至步骤B2
‑
5创建工具类库；步骤B2
‑
1，创建基于rollup的初始工程；步骤B2
‑
2，将原系统中所有工具类库抽出到这个工程中，并对模块进行拆分；步骤B2
‑
3，使用rollup打包工具类库。步骤B2
‑
4，发布工具类库到npm上以供基盘应用和子应用安装使用；
步骤B2
‑
5，搭建工具类库文档站点。6.根据权利要求1所述的基于软件开发框架衍生的多应用微前端实现方法，其特征在于，所述步骤C，包括步骤C1至步骤C3：步骤C1，重写N框架下的客户端client.js模板文件；步骤C2，定义实例，注册插件；步骤C3，编写client.js模块文件。7.根据权利要求6所述的基于软件开发框架衍生的多应用微前端实现方法，其特征在于，所述步骤C1，包括：步骤C1
‑
1，在使用qiankun的场合下，暴露qiankun框架所需的bootstrap、mount、update、unmount生命周期函数，否则保留原始逻辑并进行画面渲染；步骤C1
‑
2，在qiankun的场合下，不改变webpack_public_path的值；步骤C1
‑
3，在qiankun模式下，创建app的时候，需要将基盘应用传过来的数据参数设置到全局的配置变量当中；步骤C1
‑
4，加载异步组件时，qiankun模式下，如果路由跳转先不是微应用的路径，不做任何处理，跳过继续执行后续路由跳转逻辑；步骤C1
‑
5，画面渲染时，qiankun模式下，如果路由跳...

【专利技术属性】
技术研发人员：徐泓昊，许宏达，黄志道，张仁庆，
申请(专利权)人：大连源动力科技有限公司，
类型：发明
国别省市：