CN116680003A - 前端插件化系统 - Google Patents

Abstract

本申请实施例提供一种前端插件化系统，该前端插件化系统包括插件加载和安装模块，所述插件加载和安装模块包括：插件管理模块，用于获取第一插件以及所述第一插件的基本信息，并向插件加载模块发送所述第一插件以及所述第一插件的基本信息；所述插件加载模块，用于全局挂载第一对象，并将所述第一插件的基本信息传入第一对象的register方法，并基于预设的模块化规范调用所述第一对象的register方法，以对所述第一插件进行注册安装。本申请实施例，能够避免在每次更新插件之后需要重新编译的情况。

Description

前端插件化系统

技术领域

本申请属于前端技术领域，尤其涉及一种前端插件化系统。

背景技术

现有的插件化实现方法需要涉及到源码层面，具体来说，一般是通过复制插件的相关文件到项目中，将项目编译之后完成插件的安装。由于现有技术中存在每次更新插件之后都需要重新编译的问题，以致于项目的管理与维护变得更加困难。

发明内容

本申请实施例提供一种前端插件化系统，能够避免在每次更新插件之后需要重新编译的情况。

第一方面，本申请实施例提供一种前端插件化系统，所述前端插件化系统包括插件加载和安装模块，所述插件加载和安装模块包括：

插件管理模块，用于获取第一插件以及所述第一插件的基本信息，并向插件加载模块发送所述第一插件以及所述第一插件的基本信息；

插件加载模块，用于全局挂载第一对象，并将所述第一插件的基本信息传入第一对象的register方法，并基于预设的模块化规范调用所述第一对象的register方法，以对所述第一插件进行注册安装。

在第一方面的一种可选的实施方式中，所述第一插件的基本信息包括第一插件标识、第一插件的初始化函数，以及所述第一插件需要依赖的至少一个第二插件的第二插件标识。

在第一方面的一种可选的实施方式中，所述插件加载模块，还用于调用所述第一插件的初始化函数，以得到所述第一插件的初始化函数返回的第二对象，并以所述第一插件标识为关键字、所述第二对象为值的形式，保存所述第二对象至系统地图。

在第一方面的一种可选的实施方式中，所述插件加载模块，还用于根据所述第一插件标识在所述系统地图中查询所述第二对象，并调用所述第二对象的生命周期函数，以将通信总线注入所述第一插件中，以使得所述第一插件与所述至少一个第二插件进行消息通信。

在第一方面的一种可选的实施方式中，所述第二对象的生命周期函数包括创建created函数。

在第一方面的一种可选的实施方式中，所述插件加载和安装模块还包括：

初始化模块，用于加载基本依赖并初始化预设参数，以基于所述基本依赖和初始化后的预设参数向所述插件管理模块发送插件列表请求，所述插件列表请求用于获取插件列表，所述插件列表包括第一插件标识。

在第一方面的一种可选的实施方式中，所述插件管理模块，用于基于所述插件列表请求，向所述插件加载模块发送与所述插件列表请求对应的插件列表；

所述插件加载模块，用于基于所述第一插件地址，向所述插件管理模块发送插件加载请求，以用于所述插件管理模块根据所述插件加载请求，向插件加载模块发送与第一插件地址对应的第一插件。

在第一方面的一种可选的实施方式中，所述插件加载和安装模块，用于将所述至少一个第二插件的第二插件标识以数组形式传入注册函数中，以用于所述第一插件可以在系统地图中根据所述至少一个第二插件的第二插件标识查询到所述至少一个第二插件，并将所述至少一个第二插件反向注入所述第一插件中。

在第一方面的一种可选的实施方式中，所述插件加载和安装模块，利用webpack编译工具对第一插件进行定制化编译。

在第一方面的一种可选的实施方式中，所述插件加载和安装模块，还用于所述在所述第一插件在注册时，基于所述第一插件地址生成局部变量，并根据所述局部变量，获取动态公共路径，并解析所述第一插件在项目中的依赖路径，并将所述依赖路径更新为动态公共路径。

在本申请实施例中，前端插件化系统可以包括插件加载和安装模块，该插件加载和安装模块可以包括插件管理模块和插件记载模块。基于该结构，插件管理模块，用于获取第一插件以及第一插件的基本信息，并向插件加载模块发送第一插件以及第一插件的基本信息，插件记载模块可以全局挂载第一对象，并将第一插件的基本信息传入第一对象的register方法，并基于预设的模块化规划调用第一对象的register方法，以对第一插件进行注册安装。如此，能够避免在每次更新插件之后需要重新编译的情况。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对本申请实施例中所需要使用的附图作简单的介绍，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本申请实施例提供的一种前端插件化系统的结构示意图；

图2是本申请实施例提供的一种插件加载和安装模块内部的交互流程示意图；

图3是本申请实施例提供的一种前端插件化方法的流程示意图。

具体实施方式

下面将详细描述本申请的各个方面的特征和示例性实施例，为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及具体实施例，对本申请进行进一步详细描述。应理解，此处所描述的具体实施例仅意在解释本申请，而不是限定本申请。对于本领域技术人员来说，本申请可以在不需要这些具体细节中的一些细节的情况下实施。下面对实施例的描述仅仅是为了通过示出本申请的示例来提供对本申请更好的理解。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括……”限定的要素，并不排除在包括要素的过程、方法、物品或者设备中还存在另外的相同要素。

本文中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。

为了避免现有技术中存在的存在每次更新插件之后都需要重新编译的问题，以致于项目的管理与维护变得更加困难的问题，本申请实施例提供一种前端插件化系统，前端插件化系统可以包括插件加载和安装模块，该插件加载和安装模块可以包括插件管理模块和插件记载模块。基于该结构，插件管理模块，用于获取第一插件以及第一插件的基本信息，并向插件加载模块发送第一插件以及第一插件的基本信息，插件记载模块可以全局挂载第一对象，并将第一插件的基本信息传入第一对象的register方法，并基于预设的模块化规划调用第一对象的register方法，以对第一插件进行注册安装。如此，能够避免在每次更新插件之后需要重新编译的情况，进而便于管理和维护相关项目。

下面结合附图，通过具体的实施例对本申请实施例提供的前端插件化系统进行详细说明。

图1是本申请实施例提供的前端插件化系统的结构示意图。

如图1所示，该前端插件化系统100可以包括插件加载和安装模块10，该插件加载和安装模块10可以包括插件管理模块11和插件加载模块12。

其中，

插件管理模块11，用于获取第一插件以及所述第一插件的基本信息，并向插件加载模块发送所述第一插件以及所述第一插件的基本信息；

所述插件加载模块12，用于全局挂载第一对象，并将所述第一插件的基本信息传入第一对象的register方法，并基于预设的模块化规范调用所述第一对象的register方法，以对所述第一插件进行注册安装。

在一些实施例中，上述涉及到的第一插件的基本信息可以包括第一插件标识、第一插件的初始化函数，以及第一插件需要依赖的至少一个第二插件的第二插件标识，其中，第一插件标识可以是第一插件的身份标识(Identity document，id)。上述涉及到的预设的模块化规范可以是基于实际经验或情况设置的模块化规范，在此不作具体限定。

具体地，由于本申请实施例提供的前端插件化系统可以包括插件加载和安装模块，并且该插件加载和安装模块可以包括插件管理模块和插件加载模块。基于此，可以通过插件管理模块获取第一插件以及第一插件的基本信息，并向插件加载管理模块发送第一插件以及第一插件的基本信息，插件加载模块在获取到第一插件以及第一插件的基本信息之后，可以全局挂载第一对象，并将第一插件的基本信息传入第一对象的register方法，并基于预设的模块化规范调用第一对象的register方法，以对第一插件进行注册安装。

在一个示例中，由于预设的模块化规范要求在第一插件执行后，需要自动调用插件加载模块的register方法，插件加载模块在初始化时会自动在全局挂载一个名为System的对象，第一插件可以通过调用该System对象的register方法，以实现对第一插件的注册安装。由于该方法要求传入三个参数，即第一插件标识、第一插件的初始化函数以及第一插件需要依赖的至少一个第二插件的第二插件标识。所以需要插件加载和安装模块中的插件管理模块获取第一插件以及第一插件的基本信息，并将第一插件和第一插件的基本信息发送至插件加载模块。

在本申请实施例中，前端插件化系统可以包括插件加载和安装模块，该插件加载和安装模块可以包括插件管理模块和插件记载模块。基于该结构，插件管理模块，用于获取第一插件以及第一插件的基本信息，并向插件加载模块发送第一插件以及第一插件的基本信息，插件记载模块可以全局挂载第一对象，并将第一插件的基本信息传入第一对象的register方法，并基于预设的模块化规划调用第一对象的register方法，以对第一插件进行注册安装。如此，能够避免在每次更新插件之后需要重新编译的情况，进而便于管理和维护相关项目。

为了更加准确地描述本申请实施例提供的前端插件化系统，在一个实施例中，上述涉及到的插件加载模块，还用于调用所述第一插件的初始化函数，以得到所述第一插件的初始化函数返回的第二对象，并以所述第一插件标识为关键字、所述第二对象为值的形式，保存所述第二对象至系统地图。

具体地，在第一插件被上述register方法注册的同时，插件记载模块就可以调用第一插件的初始化函数，由于上述涉及到的预设的模块化规范要求初始化函数返回一个对象，所以插件记载模块还可以得到第一插件的初始化函数返回的第二对象，进而可以第一插件标识为关键字、第二对象为值的形式，将第二对象保存至系统地图中。其中，上述涉及到的初始化函数会在插件编译时由插件项目的入口文件经由webpeck工具自动生成。需要说明的是，上述涉及到的第二对象包括三个生命周期函数的实现，三个生命周期函数包括创建created函数，安装mounted函数和销毁destroyed函数。

基于此，在一个实施例中，上述涉及到的插件加载模块，还用于根据所述第一插件标识在所述系统地图中查询所述第二对象，并调用所述第二对象的生命周期函数，以将通信总线注入所述第一插件中，以使得所述第一插件与所述至少一个第二插件进行消息通信。

具体地，在将第二对象保存至系统地图之后由于第二对象是以第一插件标识为关键字、第二对象为值的形式被保存至系统地图的，所以上述涉及到的插件加载模块，可以根据第一插件标识在系统地图中查询第二对象，并调用第二对象的生命周期函数，以将通信总线注入第一插件中，以使得第一插件与至少一个第二插件进行消息通信。

在该实施例中，在将第二对象保存至系统地图之后，插件加载模块可以根据第一插件标识，查询到第二对象，并且可以通过调用第二对象的生命周期函数，将通信总线注入进插件中，以使得第一插件与至少一个第二插件进行消息通信。如此，实现了存在依赖关系的插件之间的消息通信。

在一些实施例中，上述涉及到的生命周期函数可以包括创建created函数。

在该实施例中，由于第二对象是以第一插件标识为关键字、第二对象为值的形式，被保存系统地图的，所以插件加载模块可以根据第一插件标识查询到第二对象，并且可以通过调用第二对象的created函数，以将通信总线注入第一插件中，以使得第一插件与至少一个第二插件进行消息通信。如此，实现了存在依赖关系的插件之间的消息通信。

为了更加准确全面地描述本申请实施例提供的前端插件化系统，继续如图1所示，在一个实施例中，上述涉及到的插件加载和安装模块10还可以包括：

初始化模块13，用于加载基本依赖并初始化预设参数，以基于所述基本依赖和初始化后的预设参数向所述插件管理模块发送插件列表请求。

在一些实施例中，上述涉及到的插件列表请求用于获取插件列表，该插件列表可以包括第一插件标识。

另外，上述涉及到的基本依赖可以是使得与第一插件相关的项目可以运转的第三库，该基本依赖可以包括Express、ORM、SystemJS、公共依赖和插件调度等基本依赖。并且需要说明的是，初始化模块获取的基本依赖以及初始化的参数可以是用于请求插件列表的相关信息，此处不作过多限定。

具体地，由于插件加载和安装模块还可以包括初始化模块。基于此，初始化模块可以用于加载基本依赖并初始化预设参数，以便基于该基本依赖和初始化后的预设参数向插件管理模块发送插件列表请求，由于该插件列表请求可以用于获取插件列表，并且该插件列表可以包括第一插件标识，所以基于此便于后续插件管理模块和插件加载模块可以基于该插件列表请求，获取第一插件。

基于此，在一个实施例中，上述涉及到的所述插件管理模块，还用于基于所述插件列表请求，向所述插件加载模块发送与所述插件列表请求对应的插件列表；

所述插件加载模块，用于基于所述第一插件地址，向所述插件管理模块发送插件加载请求，以用于所述插件管理模块根据所述插件加载请求，向插件加载模块发送与第一插件地址对应的第一插件。

其中，插件加载请求可以包括第一插件地址等用于请求加载相应插件的相关信息。

具体地，在初始化模块向插件管理模块发送插件列表请求之后，插件管理模块可以向插件加载模块发送与插件列表请求对应的插件列表，由于该插件列表可以包括第一插件地址，所以插件加载模块可以基于该第一插件地址面向插件管理模块发送插件加载请求，以用于插件管理模块根据该插件加载请求，向插件加载模块发送与第一插件地址对应的第一插件。

在一个示例中，在第一次加载页面的时候，插件加载和安装模块可以通过接口获取插件列表，然后根据获取到的插件列表，通过fetch api获取第一插件地址，进而可以在获取到与第一插件地址对应插件文件，进而可以会执行获取到的文件内容。其中，fetchapi可以理解为提供了一个获取资源的接口。

为了便于更加清楚地了解本申请实施例所提供的前端插件化系统，需要说明的是，上述涉及到的插件加载和安装模块主要负责插件的安装与加载，通过服务器运行起来之后，可以通过界面查看插件列表并管理插件的安装与卸载，同时插件加载和安装模块还集成了后端功能，可以完成各个插件数据的持久化。除此之外，上述涉及到的前端插件化系统还可以包括插件模块，该插件模块即为具体业务的实现模块。

还需要说明的是，插件加载和安装模块与插件模块均基于vue实现，区别在于插件加载和安装模块需要有后端支持，而插件在打包之后只是一个或者多个文件。并且插件加载和安装模块所包括的结构可以大致分为后端模块和前端模块。其中，后端模块可以是逻辑的实现模块，主要提供rest api与数据持久化功能，前端模块承担主要的业务逻辑。

基于上述内容，为了更加准确详细地描述本申请实施例提供的前端插件化系统所包括的插件加载和安装模块，在一个示例中，如图2所示，插件加载和安装模块所包括的初始化模块可以先加载基本依赖，并对预设参数进行初始化，进而可以向插件管理模块发送插件列表请求，以请求得到插件列表。接着，插件管理模块可以向插件加载模块发送插件列表。然后，插件加载模块可以根据插件列表，向插件管理模块请求加载相应的插件，再接着，插件管理模块可以向插件加载模块返回第一插件文件，以便于插件加载模块注册并初始化与第一插件文件对应的第一插件。

还需要说明的是，上述涉及到的插件加载和安装模块还可以包括用户界面，以便于查看插件列表并管理插件的安装与卸载。还可以包括路由，以支持插件加载和安装模块所包括的各个模块之间的交互过程，例如，发送请求等过程。

在该实施例中，在初始化模块向插件管理模块发送插件列表请求之后，插件管理模块可以向插件加载模块发送与插件列表请求对应的插件列表，由于该插件列表可以包括第一插件地址，所以插件加载模块可以基于该第一插件地址面向插件管理模块发送插件加载请求，以用于插件管理模块根据该插件加载请求，向插件加载模块发送与第一插件地址对应的第一插件。如此，以便于后续实现对第一插件的注册和安装。

为了更加准确地描述本申请实施例提供的前端插件化系统，一个实施例中，上述涉及到的插件加载和安装模块，还用于将所述至少一个第二插件的第二插件标识以数组形式传入注册函数中，以用于所述第一插件在系统地图中根据所述至少一个第二插件的第二插件标识查询到所述至少一个第二插件，并将所述至少一个第二插件反向注入所述第一插件中。

在一个示例中，插件加载和安装模块提供了插件之间互相调用的方法，第一插件需要在构建时申明需要依赖的其他插件的id，即上述涉及到第一插件的基本信息中所包括的第一插件需要依赖的至少一个第二插件的第二插件标识。基于此，插件加载和安装模块在第一插件注册的同时，将所需的至少一个第二插件的第二插件标识将以数组的形式传入注册函数(register(id，[dep]，callback))的第二个参数，这样就使得第一插件可以在全局对象的系统地图中依据第二插件标识找到所需要的依赖并将依赖反向注入进第一插件中使第一插件可以保证功能正常运行。

需要说明的是，依赖注入的功能，是通过在编译的前期声明的插件依赖数组，在编译时将所有项目中需要用到依赖的对象进行替换，将其换为调用System对象的import函数，该函数将会返回注册map中保存的对象，以此实现根据id反向依赖注入的功能，将插件从各种依赖的强关联中解耦出来，并且还能实现多插件共用同一个依赖，降低了系统的复杂度，提高了更高的可维护性。

另外，由于插件加载和安装模块加载插件需要特定的文件结构，所以需要在编译时就完成对生成产物的改造，其实现依赖于webpack的插件功能，webpack为现代最主流的前端编译工具，支持在编译时通过插件对编译进行定制化。因此该规范的实现是通过插件在webpack编译的同时，依据规则对代码进行改造完成的

基于此，在一些实施例中，插件加载和安装模块，利用webpack编译工具对第一插件进行定制化编译。

基于此，在一些实施例中，插件加载和安装模块，还用于在第一插件在注册时，基于第一插件地址生成局部变量，并根据局部变量，获取动态公共路径，并解析第一插件在项目中的依赖路径，并将依赖路径更新为动态公共路径。

具体地，在编译时解析插件项目中的依赖路径，如图片，请求地址等，将其替换为动态公共路径，目的时为了保证在插件加载和安装模块加载插件之后，插件依赖可以正常地找到相应地路径。动态路径的功能需要核心组件配合完成，在插件注册的同时会依据插件的加载地址生成一个局部变量_WEBPCK_PUBLIC_PATH_，动态公共路径就是通过读取这个变量获得。

在一些实施例中，插件加载和安装模块，用于通过对项目入口文件添加代理函数，以用于将项目入口文件改造为预设形式的文件。

具体地，对项目入口文件进行包装，为入口文件添加一层代理函数，将入口文件改造成核心组件加载需要的形式。

除此之外，还可以解析依赖插件声明，被声明的依赖插件不会在编译时被当作项目依赖被加载，并且同时在项目的入口文件中将这些依赖插件的id作为第二个参数传入注册函数中。

基于上述内容，为了更加全面地描述本申请实施例所提供的前端插件化系统，本申请实施例提供了一种应用于前端插件化系统的前端插件化方法，如图3所示，该方法具体包括如下步骤：

S301，获取插件文件。

S302，解析插件文件。

S303，执行插件文件调用插件加载和安装模块注册应用程序接口完成注册。

S304，解析插件依赖，完成依赖注入。

S305，调用插件文件的created函数，并注入全局通信总线。

S306，待所有插件文件完成加载后，正式启用插件文件，并调用插件文件的mounted函数。

S307，页面重载或者手动调用插件文件的销毁应用程序接口。

S308，执行destroy函数并注销插件文件。

在该实施例中，该前端插件化系统可以获取插件文件，并对该插件文件进行解析，进而可以通过执行解析后的插件文件调用插件加载和安装模块注册接口完成注册，进而可以解析该插件文件的插件依赖，完成插件注入，以便于调用插件文件的created函数，并注入全局通信总线，待所有插件文件完成加载后启用该插件文件，并调用插件文件的mounted函数，进而可以在页面重载或者手动调用插件文件的销毁应用程序接口，并执行destroy函数并注销插件文件。

本申请实施例提供的前端插件化系统，可以目前流行的微服务思想，将前端的插件转化为微前端的方式，使前端单页面应用项目变得高度可定制化，同时以插件化形式构建的项目可以更加有益于项目的维护以及重构，减少开发成本以及提高开发效率。

还需要说明的是，本发明中提及的示例性实施例，基于一系列的步骤或者装置描述一些系统。但是，本发明不局限于上述步骤的顺序，也就是说，可以按照实施例中提及的顺序执行步骤，也可以不同于实施例中的顺序，或者若干步骤同时执行。

以上，仅为本发明的具体实施方式，所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的系统、模块和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。应理解，本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本发明的保护范围之内。

Claims (10)

1.一种前端插件化系统，其特征在于，所述前端插件化系统包括插件加载和安装模块，所述插件加载和安装模块包括：

插件管理模块，用于获取第一插件以及所述第一插件的基本信息，并向插件加载模块发送所述第一插件以及所述第一插件的基本信息；

所述插件加载模块，用于全局挂载第一对象，并将所述第一插件的基本信息传入第一对象的register方法，并基于预设的模块化规范调用所述第一对象的register方法，以对所述第一插件进行注册安装。

2.根据权利要求1所述的前端插件化系统，其特征在于，所述第一插件的基本信息包括第一插件标识、第一插件的初始化函数，以及所述第一插件需要依赖的至少一个第二插件的第二插件标识。

3.根据权利要求2所述的前端插件化系统，其特征在于，

所述插件加载模块，还用于调用所述第一插件的初始化函数，以得到所述第一插件的初始化函数返回的第二对象，并以所述第一插件标识为关键字、所述第二对象为值的形式，保存所述第二对象至系统地图。

4.根据权利要求3所述的前端插件化系统，其特征在于，

所述插件加载模块，还用于根据所述第一插件标识在所述系统地图中查询所述第二对象，并调用所述第二对象的生命周期函数，以将通信总线注入所述第一插件中，以使得所述第一插件与所述至少一个第二插件进行消息通信。

5.根据权利要求3所述的前端插件化系统，其特征在于，所述第二对象的生命周期函数包括创建created函数。

6.根据权利要求1所述的前端插件化系统，其特征在于，所述插件加载和安装模块还包括：

初始化模块，用于加载基本依赖并初始化预设参数，以基于所述基本依赖和初始化后的预设参数向所述插件管理模块发送插件列表请求，所述插件列表请求用于获取插件列表，所述插件列表包括第一插件标识。

7.根据权利要求6所述的前端插件化系统，其特征在于，

所述插件管理模块，用于基于所述插件列表请求，向所述插件加载模块发送与所述插件列表请求对应的插件列表；

所述插件加载模块，用于基于所述第一插件地址，向所述插件管理模块发送插件加载请求，以用于所述插件管理模块根据所述插件加载请求，向插件加载模块发送与第一插件地址对应的第一插件。

8.根据权利要求2所述的前端插件化系统，其特征在于，

所述插件加载和安装模块，还用于将所述至少一个第二插件的第二插件标识以数组形式传入注册函数中，以用于所述第一插件在系统地图中根据所述至少一个第二插件的第二插件标识查询到所述至少一个第二插件，并将所述至少一个第二插件反向注入所述第一插件中。

9.根据权利要求1所述的系统，其特征在于，

所述插件加载和安装模块，利用webpack编译工具对第一插件进行定制化编译。

10.根据权利要求8所述的系统，其特征在于，

所述插件加载和安装模块，还用于在所述第一插件在注册时，基于所述第一插件地址生成局部变量，并根据所述局部变量，获取动态公共路径，并解析所述第一插件在项目中的依赖路径，并将所述依赖路径更新为动态公共路径。