CN113986226A - 一种基于qiankun和Web Component的微前端架构及其构建方法 - Google Patents

Abstract

本发明公开了一种基于qiankun和Web Component的微前端架构及其构建方法，微前端架构的构建方法包括基于qiankun构建微服务架构和基于Web Component构建通用组件库；微服务架构包括主应用和若干子应用，各子应用注册到主应用中，主应用被配置作为入口实现对各子应用的访问；通用组件库被配置为Web Component组件库，为上层应用提供能够复用的组件，组件库不限制技术栈，web component存在技术栈无关特性，至少支持React组件、Vue组件和Angular组件。这种微前端模式通过分解复杂应用，使每个子应用的功能更简洁，子应用的依赖独立，可以将子应用分配给不同的开发人员去维护，相较于整个开发团队维护一个大型复杂应用而言，减小了开发时可能会产生的代码冲突，降低了开发和维护的难度。

Description

一种基于qiankun和Web Component的微前端架构及其构建 方法

技术领域

本发明属于前端开发应用领域，尤其涉一种基于qiankun和Web Component的微前端架构及其构建方法。

背景技术

微服务是一种开发软件的架构和组织形式，可将应用拆分成多个小型模块，每个模块可以独立进行开发、构建、部署。微服务架构使功能独立的模块松散耦合，降低了软件的开发难度，提高了软件的可维护性和后期的可拓展性。

后端领域的微服务架构已经存在成熟的解决方案，而前端领域微服务架构近年来才逐渐兴起，各大团队都处于探索阶段。前端开发面临以下几点问题：

（1） 前端技术日新月异，快速更迭的技术造成了前端项目中并存使用不同技术、开发框架的系统，给后期系统集成、维护造成困难。已有采用nginx代理到不同应用这种运维层面上的解决方案，但这种方式切换应用时会触发浏览器刷新，影响用户体验；

（2） 随着业务量的不断增加，前端项目逐渐演变成复杂的巨石前端项目，协同开发时容易引发冲突，难以维护和扩展。

（3） 前端开发重复性工作较多，提高代码复用性是前端领域不断在探索的问题。在大型项目中实现组件化，必须确保组件与系统之间不会相互影响，目前的组件化方案依赖框架，且难以实现组件与系统完全隔离。

发明内容

本发明的目的在于，为克服现有技术缺陷，提供了一种基于qiankun和WebComponent的微前端架构的构建方法，通过本发明微前端架构的构建方法中对前端应用的拆解设计，实现了对庞大的前端应用进行拆解形成独立子应用集成到主应用上的目的。

本发明目的通过下述技术方案来实现：

一种基于qiankun和Web Component的微前端架构的构建方法，所述微前端架构的构建方法包括基于qiankun构建微服务架构和基于Web Component构建通用组件库；其中，所述微服务架构包括主应用和若干子应用，各子应用注册到主应用中，所述主应用被配置作为入口实现对各子应用的访问；所述通用组件库被配置为Web Component组件库，用于为上层应用提供能够复用的组件，组件库不限制技术栈，web component存在技术栈无关特性，至少支持React组件、Vue组件和Angular组件。

根据一个优选的实施方式，所述主应用被配置为按如下流程构建：创建主应用项目，搭建主应用HTML框架，创建子应用容器，注册子应用，并启动主应用服务。

根据一个优选的实施方式，用户在进入主应用以及主应用跳转到子应用时设有权限认证流程。

根据一个优选的实施方式，所述权限认证流程为：首先检查主应用是否获取到用户信息，如果没有用户信息则跳转到登录子应用，如果获取到用户信息，则向后端发送鉴权请求，参数为用户ID，验证用户是否具有该应用的权限，如果有则跳转到对应应用，如果没有则前端展示没有权限提示框并返回登录子应用。

根据一个优选的实施方式，各子应用注册到主应用中过程中包括子应用的配置流程为：

各子应用在子应用的入口文件中导出主应用需要的生命周期函数bootstrap、mount、unmount，供主应用调用；

且在各子应用的打包配置中，各子应用输出的包名设置为在主应用注册的时的子应用名称。

根据一个优选的实施方式，基于Web Component构建通用组件库的构建流程为：

a．构建组件库步骤，在服务器创建组件库目录，定义访问组件库的URL，通过nginx配置将URL代理到服务器组件库路径；

b．构建组件模板步骤，创建组件项目，定义MyComponent继承HTMLElement,定义标签名，创建shadow root,创建组件挂载容器，createApp创建应用实例；

c．开发、部署组件步骤，从gitlab拉取组件库代码到本地，在组件库中新增待开发组件目录，引入组件开发模板，在模板上进行组件开发；提交代码到gitlab，通过jenkins自动化部署工具配置相关命令，拉取仓库代码，使用Vite打包工具打包组件，发送到线上组件库目录中；

d．在上层应用中应用组件库步骤，在上层应用中通过script标签引入组件库中对应组件的URL，系统发起XHR请求，服务端返回组件数据，按组件中定义的标签名在上层应用中进行引用。

根据一个优选的实施方式，步骤a，构建组件库步骤中还包括：创建组件库git仓库，使用git作为组件库的版本控制工具。

另一方面，本发明还公开了：

一种基于qiankun和Web Component的微前端架构，所述微前端架构包括微服务架构和通用组件库，所述微前端架构按照如前述的微前端架构的构建方法构建得到。

前述本发明主方案及其各进一步选择方案可以自由组合以形成多个方案，均为本发明可采用并要求保护的方案。本领域技术人员在了解本发明方案后根据现有技术和公知常识可明了有多种组合，均为本发明所要保护的技术方案，在此不做穷举。

本发明的有益效果：本发明公开的基于qiankun和Web Component的微前端架构的构建方法，使用qiankun搭建微前端系统，对庞大的前端应用进行拆解形成独立子应用集成到主应用上。这种微前端模式通过分解复杂应用，使每个子应用的功能更简洁，子应用的依赖独立，可以将子应用分配给不同的开发人员去维护，相较于整个开发团队维护一个大型复杂应用而言，减小了开发时可能会产生的代码冲突，降低了开发和维护的难度。

子应用技术栈无关，因此，对于使用老技术的老应用，只需对其进行一些简单的配置改造，即可注册挂载到主应用上，完成新老应用集成；而对于使用新技术的新研发应用，也可以顺利挂载到主应用上。技术栈无关的特性，确保了在如今技术快速发展的环境下系统的平缓更迭。

使用Web Component技术构建组件库，利用Shadow DOM特性，保证元素的脚本、样式为组件私有，组件独立运行时，组件依赖由组件维护，实现了组件间的隔离以及组件与上层应用之间的隔离，杜绝了组件与文档其他部分发生冲突、相互影响的情况。WebComponent不依赖框架，组件代码体积小，通过自定义HTML标签进行引用，使用方式简单直观。不管是基础组件还是业务组件，甚至小型应用，都可以作为组件库的组件，并在上层系统中以自定义标签的方式引入，根据实际需求从不同粒度抽取组件，提高了代码的可复用性，解决了前端重复性工作多的问题。

附图说明

图1是本发明的基于qiankun和Web Component的微前端架构的结构示意图；

图2是本发明的Web Component组件库的结构示意图；

图3是本发明的基于qiankun的微前端系统主应用构建流程示意图；

图4是本发明的基于qiankun的微前端系统权限验证流程示意图；

图5是本发明的组件库中构建组件模板的流程示意图。

具体实施方式

以下通过特定的具体实例说明本发明的实施方式，本领域技术人员可由本说明书所揭露的内容轻易地了解本发明的其他优点与功效。本发明还可以通过另外不同的具体实施方式加以实施或应用，本说明书中的各项细节也可以基于不同观点与应用，在没有背离本发明的精神下进行各种修饰或改变。需说明的是，在不冲突的情况下，以下实施例及实施例中的特征可以相互组合。

需要说明的是，为使本发明实施例的目的、技术方案和优点更加清楚，下面对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。

实施例1：

参考图1所示，本发明公开了一种基于qiankun和Web Component的微前端架构的构建方法，所述微前端架构的构建方法包括基于qiankun构建微服务架构和基于WebComponent构建通用组件库。

qiankun是一个阿里巴巴UMI基于single-spa而对Micro Frontens的实现，为一个微前端框架。它在 single-spa 基础上添加更多的功能。以下是 qiankun 提供的特性：实现了子应用的加载，在原有 single-spa 的 JS Entry 基础上再提供了 HTML Entry；样式和 JS 隔离；更多的生命周期：beforeMount, afterMount, beforeUnmount,afterUnmount；子应用预加载；全局状态管理和全局错误处理。

所述微服务架构包括主应用和若干子应用，各子应用注册到主应用中，所述主应用被配置作为入口实现对各子应用的访问。所述通用组件库被配置为Web Component组件库，用于为上层应用提供能够复用的组件，组件库不限制技术栈，web component存在技术栈无关特性，可至少支持React组件、Vue组件和Angular组件，参考图2所示。

优选地，如图3所示，所述主应用被配置为按如下流程构建：创建主应用项目，搭建主应用HTML框架，创建子应用容器，注册子应用，并启动主应用服务。

具体地，应用技术栈无关，以主应用为Vue项目为例，创建一个Vue项目作为主应用项目。安装qiankun插件，搭建主应用HTML框架。在入口文件中创建子应用容器，即HTML文档中子应用挂载渲染的位置，利用registerMicroApp方法注册子应用，设置默认进入的子应用。在主应用中添加菜单栏，每一项菜单栏对应子应用，其值为子应用路由，启动主应用服务，在浏览器中渲染主应用。

优选地，用户在进入主应用以及主应用跳转到子应用时设有权限认证流程。

如图4所示，权限认证流程包括：首先检查主应用是否获取到用户信息，如果没有用户信息则跳转到登录子应用，如果获取到用户信息，则向后端发送鉴权请求，参数为用户ID，验证用户是否具有该应用的权限，如果有则跳转到对应应用，如果没有则前端展示没有权限提示框并返回登录子应用。

优选地，各子应用注册到主应用中过程中包括子应用的配置流程，包括：

各子应用在子应用的入口文件中导出主应用需要的生命周期函数bootstrap、mount、unmount，供主应用调用。从而不需要额外安装其他依赖。

且在各子应用的打包配置中，各子应用输出的包名设置为在主应用注册的时的子应用名称。

在本架构中，每个子应用独立维护依赖，独立开发部署，技术栈不受限制。只需将子应用打包部署到对应的目录中，即可通过主应用对其进行访问，同时，也可以单独访问子应用。

优选地，基于Web Component构建通用组件库的构建流程包括：

步骤a．构建组件库步骤，在服务器创建组件库目录，定义访问组件库的URL，通过nginx配置将URL代理到服务器组件库路径。

进一步地，步骤a，构建组件库步骤中还包括：创建组件库git仓库，使用git作为组件库的版本控制工具。

步骤b．构建组件模板步骤，如图5所示。具体包括：创建组件项目，定义MyComponent继承HTMLElement,定义标签名，创建shadow root,创建组件挂载容器，createApp创建应用实例；

例如，为简化开发流程，使用Vue框架、Vite脚手架为例构建组件开发框架。

首先使用Vite创建组件项目，定义组件类继承HTMLElement类，组件类类名如MyComponent，在MyComponent类中定义组件自定义标签名如my-component，为了避免与原生HTML标签冲突，自定义标签命名必须包含连词线。

使用this.attachShadow方法创建自定义元素的shadow root，将组件样式文件绑定在shadow root上，创建组件挂载容器，在组件入口文件中使用createApp函数创建应用实例并将组件挂载在shadow root下，完成自定义元素的创建以及组件在自定义元素上的注册。通过在上层系统代码中插入组件自定义标签如<my-component></my-component>进行组件的调用。

组件使用Object.defineProperty方法定义组件参数名，并绑定上层应用传入组件参数，上层应用通过组件定义的参数名对组件进行数据传输。组件内部通过addEventListener方法将自定义事件注册到组件中的目标上，通过事件侦听的方式对上层应用触发事件进行响应处理。

步骤c．开发、部署组件步骤，从gitlab拉取组件库代码到本地，在组件库中新增待开发组件目录，引入组件开发模板，在模板上进行组件开发；提交代码到gitlab，通过jenkins自动化部署工具配置相关命令，拉取仓库代码，使用Vite打包工具打包组件，发送到线上组件库目录中；

步骤d．在上层应用中应用组件库步骤，在上层应用中通过script标签引入组件库中对应组件的URL，系统发起XHR请求，服务端返回组件数据，按组件中定义的标签名在上层应用中进行引用。

本发明公开了一种基于qiankun和Web Component的微前端架构的构建方法。使用qiankun搭建微前端系统，对庞大的前端应用进行拆解形成独立子应用集成到主应用上。这种微前端模式通过分解复杂应用，使每个子应用的功能更简洁，子应用的依赖独立，可以将子应用分配给不同的开发人员去维护，相较于整个开发团队维护一个大型复杂应用而言，减小了开发时可能会产生的代码冲突，降低了开发和维护的难度。

子应用技术栈无关，因此，对于使用老技术的老应用，只需对其进行一些简单的配置改造，即可注册挂载到主应用上，完成新老应用集成；而对于使用新技术的新研发应用，也可以顺利挂载到主应用上。技术栈无关的特性，确保了在如今技术快速发展的环境下系统的平缓更迭。

使用Web Component技术构建组件库，利用Shadow DOM特性，保证元素的脚本、样式为组件私有，组件独立运行时，组件依赖由组件维护，实现了组件间的隔离以及组件与上层应用之间的隔离，杜绝了组件与文档其他部分发生冲突、相互影响的情况。WebComponent不依赖框架，组件代码体积小，通过自定义HTML标签进行引用，使用方式简单直观。不管是基础组件还是业务组件，甚至小型应用，都可以作为组件库的组件，并在上层系统中以自定义标签的方式引入，根据实际需求从不同粒度抽取组件，提高了代码的可复用性，解决了前端重复性工作多的问题。

实施例2

本发明还公开了一种基于qiankun和Web Component的微前端架构。所述微前端架构包括微服务架构和通用组件库。其中，所述微服务架构和通用组件库按照如实施例1的微前端架构的构建方法构建得到。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims (8)

1.一种基于qiankun和Web Component的微前端架构的构建方法，其特征在于，所述微前端架构的构建方法包括基于qiankun构建微服务架构和基于Web Component构建通用组件库；

其中，所述微服务架构包括主应用和若干子应用，各子应用注册到主应用中，所述主应用被配置作为入口实现对各子应用的访问；

所述通用组件库被配置为Web Component组件库，用于为上层应用提供能够复用的组件，组件库不限制技术栈，web component存在技术栈无关特性，至少支持React组件、Vue组件和Angular组件。

2.如权利要求1所述的微前端架构的构建方法，其特征在于，所述主应用被配置为按如下流程构建：创建主应用项目，搭建主应用HTML框架，创建子应用容器，注册子应用，并启动主应用服务。

3.如权利要求1所述的微前端架构的构建方法，其特征在于，用户在进入主应用以及主应用跳转到子应用时设有权限认证流程。

4.如权利要求3所述的微前端架构的构建方法，其特征在于，所述权限认证流程为：

首先检查主应用是否获取到用户信息，

如果没有用户信息则跳转到登录子应用，

如果获取到用户信息，则向后端发送鉴权请求，参数为用户ID，验证用户是否具有该应用的权限，如果有则跳转到对应应用，如果没有则前端展示没有权限提示框并返回登录子应用。

5.如权利要求1所述的微前端架构的构建方法，其特征在于，各子应用注册到主应用中过程中包括子应用的配置流程为：

各子应用在子应用的入口文件中导出主应用需要的生命周期函数bootstrap、mount、unmount，供主应用调用；

且在各子应用的打包配置中，各子应用输出的包名设置为在主应用注册的时的子应用名称。

6.如权利要求1所述的微前端架构的构建方法，其特征在于，基于Web Component构建通用组件库的构建流程为：

a．构建组件库步骤，在服务器创建组件库目录，定义访问组件库的URL，通过nginx配置将URL代理到服务器组件库路径；

b．构建组件模板步骤，创建组件项目，定义MyComponent继承HTMLElement,定义标签名，创建shadow root,创建组件挂载容器，createApp创建应用实例；

c．开发、部署组件步骤，从gitlab拉取组件库代码到本地，在组件库中新增待开发组件目录，引入组件开发模板，在模板上进行组件开发；提交代码到gitlab，通过jenkins自动化部署工具配置相关命令，拉取仓库代码，使用Vite打包工具打包组件，发送到线上组件库目录中；

d．在上层应用中应用组件库步骤，在上层应用中通过script标签引入组件库中对应组件的URL，系统发起XHR请求，服务端返回组件数据，按组件中定义的标签名在上层应用中进行引用。

7.如权利要求6所述的微前端架构的构建方法，其特征在于，步骤a，构建组件库步骤中还包括：创建组件库git仓库，使用git作为组件库的版本控制工具。

8.一种基于qiankun和Web Component的微前端架构，其特征在于，所述微前端架构包括微服务架构和通用组件库，所述微前端架构按照如权利要求1至7任一项所述的构建方法构建得到。

Images