微前端系统、生成方法及服务器系统技术方案

本说明书实施例提供微前端系统、生成方法及服务器系统，其中一个微前端系统包括：主工程模块；以及部署到主工程模块的至少一个插件池，其中，每个插件池包括多个插件，每个插件池被单独部署，以及每个插件池中的插件共同使用一个微服务以实现相应的微前端应用。一个微服务以实现相应的微前端应用。一个微服务以实现相应的微前端应用。

【技术实现步骤摘要】
微前端系统、生成方法及服务器系统


[0001]本说明书涉及微前端
，更具体地，涉及一种微前端系统、生成微前端系统的方法及微前端服务器系统。

技术介绍

[0002]前端是Web系统中与用户直接交互的部分。前端开发可以包括网页的页面开发等。网站的前端是网站中用户可见的部分，例如，网页上的特效、网页的布局、图片、视频等内容。后端是与服务器、数据库等进行交互以及对它们进行控制的处理逻辑。前端和后端配合以在网页上向用户显示数据、内容以及与用户进行交互。
[0003]微前端架构是一种类似于微服务的架构。
[0004]微服务技术允许开发人员为后端服务器平台的不同部分进行独立部署各个微服务，而不会损害其他部分。微服务技术的独立部署能力允许开发人员构建孤立或松散耦合的微服务。前端应用可以调用这些微服务，以获取所需的资源。一个微服务通常包括一组接口，接口地址可以是URL地址。为了使微服务体系结构更稳定，可以使得每个微服务仅承担一个很小的任务。这样，负责这项微服务的团队规模也可以很小。
[0005]随着技术发展，微前端越来越复杂。最常见的一个场景是，一个大型的系统往往需要数个团队来开发与维护。不同的团队有着不同的代码规约、开发习惯、提交代码模式、发布模式等等。因此，不同团队之间的工作结果可能产生冲突，从而降低工作效率。
[0006]需要提供一种有效产生微前端产品的方案。

技术实现思路

[0007]本说明书的实施例提供微前端系统的新技术方案。
[0008]根据本说明书的第一方面，提供了一种微前端系统，包括：主工程模块；以及部署到主工程模块的至少一个插件池，其中，每个插件池包括多个插件，每个插件池被单独部署，以及每个插件池中的插件共同使用一个微服务以实现相应的微前端应用。
[0009]根据本说明书的第二方面，提供了一种生成微前端系统的方法，包括：生成至少一个插件池，其中，每个插件池包括多个插件，以及每个插件池中的插件共同使用一个微服务以实现相应的微前端应用；以及将每个插件池单独部署到主工程模块。
[0010]根据本说明书的第三方面，提供了一种微前端服务器系统，包括一个或多个服务器，其中，在所述服务器中部署根据实施例的微前端系统。
[0011]在不同实施例中，可以基于插件池来单独部署插件，从而至少在一定程度上增加不同插件池之间的隔离度。通过这种方式，在系统开发以及维护时，可以避免不同开发团队之间的工作结果产生冲突。由此，通过这种方式，可以提升工作效率。
[0012]通过以下参照附图对本说明书的示例性实施例的详细描述，本说明书的实施例的其它特征及其优点将会变得清楚。
附图说明
[0013]被结合在说明书中并构成说明书的一部分的附图示出了的实施例，并且连同其说明一起用于解释各个实施例的原理。
[0014]图1示出了根据一个实施例的微前端系统的示意性框图。
[0015]图2示出了根据另一个实施例的微前端系统的示意性框图。
[0016]图3示出了根据一个实施例的生成微前端系统的方法的示意性流程图。
[0017]图4示出了包括根据一个实施例的微前端服务器系统的网络的示意图。
[0018]图5示出了微前端系统的一个应用场景。
[0019]图6示出了微前端系统的一个应用例子。
具体实施方式
[0020]以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作为对本专利技术及其应用或使用的任何限制。
[0021]下面，参照附图描述本说明书的不同实施例和例子。
[0022]图1示出了根据一个实施例的微前端系统的示意性框图。
[0023]微前端技术将微服务的理念应用于浏览器端，即，将Web应用由单一的单页应用转变为多个小型前端应用聚合为一的应用。这里，每一个小型前端应用被称为一个微前端。各个微前端可以独立运行、独立开发并独立部署。在开发时，微应用是以单一、微小应用的形式存在的；而在运行时，通过构建微前端系统将这些微应用合并起来，组合成一个新的应用。
[0024]如图1所示，微前端系统包括：主工程模块10和部署到主工程模块的至少一个插件池12a、12b、
……
12n。
[0025]每个插件池12a、12b、
……
12n包括多个插件。每个插件池被单独部署。每个插件池中的插件共同使用一个微服务以实现相应的微前端应用。例如，每个插件池12a、12b、
……
12n中要部署的插件被打包在一起，以被部署到主工程模块10中。
[0026]通过这种方式，不同的插件池可以是相互隔离的。可以单独部署各个插件池。各个插件池的部署可以相互独立。例如，第一组设计人员开发完成第一插件池，而第二组设计人员尚未完成第二组插件池的设计工作。在这种情况下，可以将第一插件池首先部署到主工程中，而不必等待第二插件池的完成。用户可以使用主工程中的部分功能。
[0027]例如，在某些情况下，用户仅部分插件功能。这种架构的系统也可以提供这种便利。例如，通过这种方式，可以很容易设置为用户提供哪些插件池以及可以向用户提供哪些插件池的代码，等等。这为微前端系统的配置提供了更多的灵活性。
[0028]此外，当系统出现故障时，可以逐插件池进行检查。这可以更容易地定位错误。
[0029]本领域技术人员应当理解，主工程模块是相对于微前端的插件池而言的。主工程模块可以包括多个插件池。一个应用系统可以包括一个主工程模块，也可以包括多个主工程模块。这里的主工程模块包括至少一个插件池。但是，主工程模块还可以包括其他组件或者其他单独的插件，例如，主工程模块的整体框架或外观、公共的头部栏目、导航栏等。
[0030]在使用插件池的方式来部署主工程的情况下，相对于主工程模块的全部插件来说，每个插件池的插件数量较少。因此，针对每个插件池的处理时间较短，处理效率较高。因
此，使用插件池的方式可以实现分布式的部署方式，提升部署插件的效率。
[0031]图2示出了根据另一个实施例的微前端系统的示意性框图。
[0032]如图2所示，微前端系统还可以包括代理服务器26。插件池12a、12b、
……
12n可以通过代理服务器26访问对应微服务28a、28b
……
28n的资源。每个插件池12a、12b、
……
12n可以被分配一个微服务标识。微服务标识可以是数字、字符或者数字和字符的组合等。每个插件池12a、12b、
……
12n可以使用微服务标识来获取对应的微服务的资源。代理服务器28基于所述微服务标识为插件池12a、12b、
……
12n确定所要访问的微服务28a、28b
……
28n的资源。例如，微服务28a、28b
……
28n的资源可以分布在不同的服务器中，并且可以根据情况变化而被调整。在访问微服务的资源时，插件池12a、12b、
本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种微前端系统，包括：主工程模块；以及部署到主工程模块的至少一个插件池，其中，每个插件池包括多个插件，每个插件池被单独部署，以及每个插件池中的插件共同使用一个微服务以实现相应的微前端应用。2.根据权利要求1所述的微前端系统，其中，每个插件池中要部署的插件被打包在一起，以被部署到主工程模块中。3.根据权利要求1所述的微前端系统，还包括代理服务器，其中，所述插件池通过代理服务器访问对应微服务的资源，每个插件池被分配一个微服务标识，代理服务器基于所述微服务标识为插件池确定所要访问的微服务的资源。4.根据权利要求3所述的微前端系统，其中，在访问微服务的资源时，所述插件池中的插件将所述微服务标识传递给所述代理服务器，其中，所述代理服务器基于所述微服务标识确定与微服务对应的不同后端服务器地址，从所确定的后端服务器地址获取相应的微服务的资源，并将所获取的资源传递给所述插件。5.根据权利要求4所述的微前端系统，其中，当微服务的资源发生变化时，所述代理服务器调整相应的微服务标识与变化的资源的映射关系。6.根据权利要求1所述的微前端系统，还包括版本控制模块，其中，所述版本控制模块为每个插件池分别设置版本控制，以便在主工程模块中针对不同插件池单独设置插件池的版本。7.根据权利要求4所述的微前端系统，其中，所述主工程模块还包括适配模块，所述适配模块将公共信息传递给多个插件池。8.根据权利要求7所述的微前端系统，其中，所述适配模块将单例信息传递给单个目标插件池。9.根据权利要求8所述的微前端系统，其中，所述主工程模块还包括分发配置文件，所述适配模块基于所述分发配置文件确定公共信息和单例信息，以便分别将公共信息传递给多个插件池以及将单例信息传递给单个目标插件池。10.根据权利要求7所述的微前端系统，其中，所述主工程模块接收用户对于插件池入口项的选择，并将所选择的插件池入口项发送给所述适配模块，以动态调用相应的插件池。11.根据权利要求1所述的微前端系统，其中，所述插件池包括初始化模块，其中，在插件池的初始化阶段，所述适配模块将主工程模块中的共用组件传递给所述初始化模块，其中，所述初始化模块利用局部单例变量初始化所述共用组件，以供插件池中的插件使用。12.根据权利要求1所述的微前端系统，...

【专利技术属性】
技术研发人员：郑欣，吴宗翰，段家玮，翁忠杰，刘东奇，刘天骐，
申请(专利权)人：阿里巴巴集团控股有限公司，
类型：发明
国别省市：