基于modulefederation的插件化架构设计方法技术

本发明专利技术公开了一种基于module federation的插件化架构设计方法，本方法通过获取Web应用项目中的多个前端插件，并在多个前端插件中任选一个前端插件为host，其他前端插件为remote，前端插件包括多个模块；根据Web应用项目，构建共享依赖库；在前端插件host启动时，将共享依赖库注入至其他前端插件remote的模块中；通过webpack配置文件导出供前端插件host使用的其他前端插件remote的模块。本发明专利技术基于module federation实现插件化架构设计，能够解决依赖库共享的问题，实现资源共享，能够使插件的加载速度更快，处理逻辑更简单。处理逻辑更简单。处理逻辑更简单。

【技术实现步骤摘要】
基于module federation的插件化架构设计方法


[0001]本专利技术涉及软件系统设计
，尤其是涉及基于module federation的插件化架构设计方法。

技术介绍

[0002]软件系统往往是要面向持续性的迭代，在开发之初很难把所有需要支持的功能都想清楚，这就需要软件系统具备一定的可扩展性。为了避免在系统中“过度设计”，需要引入插件化的设计理念，这在toB的web应用中很常见，插件化不是一门具体的技术，而是整合了技术、策略和方法，甚至包括脚手架、规范约束等辅助工具，是一种项目架构的实现方案，从输出的产物来看是由原来的单体应用转变为多个聚合为一的小型前端插件。
[0003]Iframe是html提供的标签，能加载其他web应用的内容，并且它能兼容所有的浏览器，可以用它来加载任何你想要加载的web应用。而iframe的最大弊端就是插件之间数据状态共享以及开发效率、产品体验的问题。插件之间数据状态共享很麻烦，比如各个插件之间共享登录状态的问题；每次切换插件都会进行一次浏览器的重建、资源重新加载的过程，比较耗费时间。
[0004]Qiankun是真正意义上可以实现插件化的技术工具，底层基于single
‑
spa，几乎能满足大部分项目实现插件化的目标，与技术栈无关，每个插件都可以基于任何的前端框架开发，具有沙箱隔离及资源预加载的特点。但是对于融合通信中台的项目而言，如果使用qiankun来实现插件化的改造，会存在如下问题，融合通信中台所有插件都是基于angular框架和antd UI库开发，antd本身是不支持提前一次性导入所有的UI组件。single
‑
spa的路由重载方式与angular router的路由重载方式是存在冲突的，所以会偶发性出现路由跳转不正确的问题；antd不支持一次性提前导入，这也决定了所有基于angular环境的第三方库以及部门内部实现的公共库都没法共享，这样必然导致每个插件打包体积都过大；因为qiankun的数据状态交互是通过总线的方式来传递，十分麻烦；而且在项目入口要做一些逻辑处理来判断是作为插件接入，还是作为单个独立应用存在，必然存在程序流程处理逻辑比较复杂，开发调试成本大的问题。

技术实现思路

[0005]本专利技术旨在至少解决现有技术中存在的技术问题之一。为此，本专利技术提出基于module federation的插件化架构设计方法，能够解决依赖库共享的问题，实现资源共享，能够使插件的加载速度更快，处理逻辑更简单。
[0006]第一方面，本专利技术实施例提供了一种基于module federation的插件化架构设计方法，所述基于module federation的插件化架构设计方法包括：
[0007]获取Web应用项目中的多个前端插件，并在所述多个前端插件中任选一个前端插件为host，其他前端插件为remote，所述前端插件包括多个模块；
[0008]根据所述Web应用项目，构建共享依赖库；
[0009]在前端插件host启动时，将所述共享依赖库注入至所述其他前端插件remote的模块中；
[0010]通过webpack配置文件导出供所述前端插件host使用的所述其他前端插件remote的模块。
[0011]与现有技术相比，本专利技术第一方面具有以下有益效果：
[0012]本方法为了实现资源共享，使插件的加载速度更快，处理逻辑更简单，通过获取Web应用项目中的多个前端插件，并在多个前端插件中任选一个前端插件为host，其他前端插件为remote，前端插件包括多个模块；根据Web应用项目，构建共享依赖库；在前端插件host启动时，将共享依赖库注入至其他前端插件remote的模块中；通过webpack配置文件导出供前端插件host使用的其他前端插件remote的模块。本方法基于module federation实现插件化架构设计，能够将所述共享依赖库注入至所述其他前端插件remote的模块中；通过webpack配置文件导出供所述前端插件host使用的其他前端插件remote的模块，因此，能够解决依赖库共享的问题，实现资源共享，使插件的加载速度更快，处理逻辑更简单。
[0013]根据本专利技术的一些实施例，所述根据所述Web应用项目，构建共享依赖库，包括：
[0014]根据所述Web应用项目，在每个前端插件的tsconfig.json文件中配置每个所述前端插件的业务相关功能的公共库的别名；
[0015]创建一个share
‑
lib.js文件导入所有前端插件之间需要共享的node_modules下的npm依赖包；
[0016]根据所述公共库和所述npm依赖包，构建所述共享依赖库。
[0017]根据本专利技术的一些实施例，所述将所述共享依赖库注入至所述其他前端插件remote的模块中之前，所述基于module federation的插件化架构设计方法还包括：
[0018]安装可以实现插件化的工具库@angular
‑
architects/module
‑
federation，所述工具库在每个前端插件的根目录下生成一个webpack.config.js的配置文件；
[0019]根据所述Web应用项目，在所述webpack.config.js的配置文件中配置每个前端插件对应的模块。
[0020]根据本专利技术的一些实施例，所述在前端插件host启动时，将所述共享依赖库注入至所述其他前端插件remote的模块中，包括：
[0021]在每个前端插件的webpack.config.js配置文件中定义所述共享依赖库；
[0022]在每个前端插件的webpack.config.js配置文件中的ModuleFederationPlugin插件中配置shared字段，并在所述前端插件host启动时，通过配置shared字段的ModuleFederatio nPlugin插件将所述共享依赖库注入至所述其他前端插件remote的模块中。
[0023]根据本专利技术的一些实施例，所述通过webpack配置文件导出供所述前端插件host使用的所述其他前端插件remote的模块，包括：
[0024]在每个前端插件的webpack.config.js配置文件中的ModuleFederationPlugin插件中导出供所述前端插件host使用的所述其他前端插件remote的模块。
[0025]根据本专利技术的一些实施例，所述通过webpack配置文件导出供所述前端插件host使用的所述其他前端插件remote的模块之后，所述基于module federation的插件化架构设计方法还包括：
[0026]在webpack.config.js配置文件的ModuleFederationPlugin插件中配置所述其他前端插件remote的模块的路径；
[0027]通过懒加载的形式加载切换来自所述本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于module federation的插件化架构设计方法，其特征在于，所述基于module federation的插件化架构设计方法包括：获取Web应用项目中的多个前端插件，并在所述多个前端插件中任选一个前端插件为ho st，其他前端插件为remote，所述前端插件包括多个模块；根据所述Web应用项目，构建共享依赖库；在前端插件host启动时，将所述共享依赖库注入至所述其他前端插件remote的模块中；通过webpack配置文件导出供所述前端插件host使用的所述其他前端插件remote的模块。2.根据权利要求1所述的基于module federation的插件化架构设计方法，其特征在于，所述根据所述Web应用项目，构建共享依赖库，包括：根据所述Web应用项目，在每个前端插件的tsconfig.json文件中配置每个所述前端插件的业务相关功能的公共库的别名；创建一个share
‑
lib.js文件导入所有前端插件之间需要共享的node_modules下的npm依赖包；根据所述公共库和所述npm依赖包，构建所述共享依赖库。3.根据权利要求1所述的基于module federation的插件化架构设计方法，其特征在于，所述将所述共享依赖库注入至所述其他前端插件remote的模块中之前，所述基于module fe deration的插件化架构设计方法还包括：安装可以实现插件化的工具库@angular
‑
architects/module
‑
federation，所述工具库在每个前端插件的根目录下生成一个webpack.config.js的配置文件；根据所述Web应用项目，在所述webpack.config.js的配置文件中配置每个前端插件对应的模块。4.根据权利要求1所述的基于module federation的插件化架构设计方法，其特征在于，所述在前端插件host启动时，将所述共享依赖库注入至所述其他前端插件remote的模块中，包括：在每个前端插件的webpack.config.js配置文件中定义所述共享依赖库；在每个前端插件的webpack.config.js配置文件中的ModuleFederationPlugin插件中配置shared字段，并在所述前端插件host启动时，通过配置shared字段的ModuleFederatio nPlugin插件将所述共享依赖库注入至所述其他前端插件remote的模块中。5.根据权利要求1所述的基于module federation的插件化架构设计方法，其特征在于，所述通过webpack配置文件导出供所述前端插件host使用的所述其他前端插件remote的模块，包括：在每个前端插件的webpack.config.js配置文件中的ModuleFederationPlugin插件中导出供所述前端插件host使用的其他前端插件rem...

【专利技术属性】
技术研发人员：范伟梅，刘佳文，刘帅英，
申请(专利权)人：广州市玄武无线科技股份有限公司，
类型：发明
国别省市：