本发明专利技术公开了一种基于qiankun和Web Component的微前端架构及其构建方法，微前端架构的构建方法包括基于qiankun构建微服务架构和基于Web Component构建通用组件库；微服务架构包括主应用和若干子应用，各子应用注册到主应用中，主应用被配置作为入口实现对各子应用的访问；通用组件库被配置为Web Component组件库，为上层应用提供能够复用的组件，组件库不限制技术栈，web component存在技术栈无关特性，至少支持React组件、Vue组件和Angular组件。这种微前端模式通过分解复杂应用，使每个子应用的功能更简洁，子应用的依赖独立，可以将子应用分配给不同的开发人员去维护，相较于整个开发团队维护一个大型复杂应用而言，减小了开发时可能会产生的代码冲突，降低了开发和维护的难度。降低了开发和维护的难度。降低了开发和维护的难度。
【技术实现步骤摘要】
一种基于qiankun和Web Component的微前端架构及其构建方法
[0001]本专利技术属于前端开发应用领域，尤其涉一种基于qiankun和Web Component的微前端架构及其构建方法。
技术介绍
[0002]微服务是一种开发软件的架构和组织形式，可将应用拆分成多个小型模块，每个模块可以独立进行开发、构建、部署。微服务架构使功能独立的模块松散耦合，降低了软件的开发难度，提高了软件的可维护性和后期的可拓展性。
[0003]后端领域的微服务架构已经存在成熟的解决方案，而前端领域微服务架构近年来才逐渐兴起，各大团队都处于探索阶段。前端开发面临以下几点问题：（1） 前端技术日新月异，快速更迭的技术造成了前端项目中并存使用不同技术、开发框架的系统，给后期系统集成、维护造成困难。已有采用nginx代理到不同应用这种运维层面上的解决方案，但这种方式切换应用时会触发浏览器刷新，影响用户体验；（2） 随着业务量的不断增加，前端项目逐渐演变成复杂的巨石前端项目，协同开发时容易引发冲突，难以维护和扩展。
[0004]（3） 前端开发重复性工作较多，提高代码复用性是前端领域不断在探索的问题。在大型项目中实现组件化，必须确保组件与系统之间不会相互影响，目前的组件化方案依赖框架，且难以实现组件与系统完全隔离。
技术实现思路
[0005]本专利技术的目的在于，为克服现有技术缺陷，提供了一种基于qiankun和Web Component的微前端架构的构建方法，通过本专利技术微前端架构的构建方法中对前端应用的拆解设计，实现了对庞大的前端应用进行拆解形成独立子应用集成到主应用上的目的。
[0006]本专利技术目的通过下述技术方案来实现：一种基于qiankun和Web Component的微前端架构的构建方法，所述微前端架构的构建方法包括基于qiankun构建微服务架构和基于Web Component构建通用组件库；其中，所述微服务架构包括主应用和若干子应用，各子应用注册到主应用中，所述主应用被配置作为入口实现对各子应用的访问；所述通用组件库被配置为Web Component组件库，用于为上层应用提供能够复用的组件，组件库不限制技术栈，web component存在技术栈无关特性，至少支持React组件、Vue组件和Angular组件。
[0007]根据一个优选的实施方式，所述主应用被配置为按如下流程构建：创建主应用项目，搭建主应用HTML框架，创建子应用容器，注册子应用，并启动主应用服务。
[0008]根据一个优选的实施方式，用户在进入主应用以及主应用跳转到子应用时设有权限认证流程。
[0009]根据一个优选的实施方式，所述权限认证流程为：首先检查主应用是否获取到用
户信息，如果没有用户信息则跳转到登录子应用，如果获取到用户信息，则向后端发送鉴权请求，参数为用户ID，验证用户是否具有该应用的权限，如果有则跳转到对应应用，如果没有则前端展示没有权限提示框并返回登录子应用。
[0010]根据一个优选的实施方式，各子应用注册到主应用中过程中包括子应用的配置流程为：各子应用在子应用的入口文件中导出主应用需要的生命周期函数bootstrap、mount、unmount，供主应用调用；且在各子应用的打包配置中，各子应用输出的包名设置为在主应用注册的时的子应用名称。
[0011]根据一个优选的实施方式，基于Web Component构建通用组件库的构建流程为：a．构建组件库步骤，在服务器创建组件库目录，定义访问组件库的URL，通过nginx配置将URL代理到服务器组件库路径；b．构建组件模板步骤，创建组件项目，定义MyComponent继承HTMLElement,定义标签名，创建shadow root,创建组件挂载容器，createApp创建应用实例；c．开发、部署组件步骤，从gitlab拉取组件库代码到本地，在组件库中新增待开发组件目录，引入组件开发模板，在模板上进行组件开发；提交代码到gitlab，通过jenkins自动化部署工具配置相关命令，拉取仓库代码，使用Vite打包工具打包组件，发送到线上组件库目录中；d．在上层应用中应用组件库步骤，在上层应用中通过script标签引入组件库中对应组件的URL，系统发起XHR请求，服务端返回组件数据，按组件中定义的标签名在上层应用中进行引用。
[0012]根据一个优选的实施方式，步骤a，构建组件库步骤中还包括：创建组件库git仓库，使用git作为组件库的版本控制工具。
[0013]另一方面，本专利技术还公开了：一种基于qiankun和Web Component的微前端架构，所述微前端架构包括微服务架构和通用组件库，所述微前端架构按照如前述的微前端架构的构建方法构建得到。
[0014]前述本专利技术主方案及其各进一步选择方案可以自由组合以形成多个方案，均为本专利技术可采用并要求保护的方案。本领域技术人员在了解本专利技术方案后根据现有技术和公知常识可明了有多种组合，均为本专利技术所要保护的技术方案，在此不做穷举。
[0015]本专利技术的有益效果：本专利技术公开的基于qiankun和Web Component的微前端架构的构建方法，使用qiankun搭建微前端系统，对庞大的前端应用进行拆解形成独立子应用集成到主应用上。这种微前端模式通过分解复杂应用，使每个子应用的功能更简洁，子应用的依赖独立，可以将子应用分配给不同的开发人员去维护，相较于整个开发团队维护一个大型复杂应用而言，减小了开发时可能会产生的代码冲突，降低了开发和维护的难度。
[0016]子应用技术栈无关，因此，对于使用老技术的老应用，只需对其进行一些简单的配置改造，即可注册挂载到主应用上，完成新老应用集成；而对于使用新技术的新研发应用，也可以顺利挂载到主应用上。技术栈无关的特性，确保了在如今技术快速发展的环境下系统的平缓更迭。
[0017]使用Web Component技术构建组件库，利用Shadow DOM特性，保证元素的脚本、样
式为组件私有，组件独立运行时，组件依赖由组件维护，实现了组件间的隔离以及组件与上层应用之间的隔离，杜绝了组件与文档其他部分发生冲突、相互影响的情况。Web Component不依赖框架，组件代码体积小，通过自定义HTML标签进行引用，使用方式简单直观。不管是基础组件还是业务组件，甚至小型应用，都可以作为组件库的组件，并在上层系统中以自定义标签的方式引入，根据实际需求从不同粒度抽取组件，提高了代码的可复用性，解决了前端重复性工作多的问题。
附图说明
[0018]图1是本专利技术的基于qiankun和Web Component的微前端架构的结构示意图；图2是本专利技术的Web Component组件库的结构示意图；图3是本专利技术的基于qiankun的微前端系统主应用构建流程示意图；图4是本专利技术的基于qiankun的微前端系统权限验证流程示意图；图5是本专利技术的组件库中构建组件模板的流程示意图。
具体实施方式
[0019]以下通过特定的具体本文档来自技高网...
【技术保护点】
【技术特征摘要】
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、un...
【专利技术属性】
技术研发人员：胡瑞雪，曾曦，曾平，陈天莹，王效武，魏刚，
申请(专利权)人：深圳市网联安瑞网络科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。