插件体系结构插件体系结构（插入式体系结构），也称为Microkernel Architecture，是一个可扩展性体系结构，分为分类。在今天的许多主流框架中可以看到它。到达图。我们主要是UMI框架，以查看插件架构的实现，同时比较插件实现的相似之处和差异 -在不同框架中的实施中。
每个主流框架插头与同一单词相同。
UMI基于Tapable的10个核心方法，50种扩展方法，路由方面的9个核心属性，生成文件，构建包装，HTML操作，命令和其他方面。对于AST的操作，汇总是钩子，输出挂钩，输出钩，监视基于汇总的回调模式的挂钩自定义构造和包装阶段。WebPack基于Tapable的Release订阅模型。VUE-CLI基于基于挂钩的调整模式。Genator API是Genator API，主要基于WebPack配置（例如Chainwebpack），API提供了具有功能强大的插件系统的完整插件系统：完整的插件系统：完整的插件系统：
插件 - In内核（Plugicore）：用于管理插件-in;
插头-in接口（插件）：用于提供用于插头的API；
插件（插件）：功能模块，不同函数的不同插件-in实现。
因此，我们还从这三个部分开始分析UMI的插头。
umi插件（插件），让我们首先从最简单的启动开始，知道UMI插件的外观。我们使用内置的插件插件Umiinfo（packages/packages/preset-in/src/src/plugins/feats/feateuginfo。TS）在内置插件插件（@umijs/预设构建）中为例。
可以看出，UMI插头 - 导出功能。内部功能是调用被动API上的两个方法属性。它主要实现两个函数。essenceamong，预设是一系列插头的集合。代码非常简单，这是一系列插件。index.ts）如下：如下：
这些插件主要包括注册方法插件（packages/preset-built-in/src/plugins/registermethods.ts），一个路由插件（packages/preset-built-in-in-in/src/plugins.ts））。相关插件（packages/puilt-in/src/plugins/generateFiles/），某些包装配置相关的插件构建/src/src/plugins/figners/html/）和一些与命令相关的插件-built-in/src/plugins/commands/）。
在注册的方法插件寄存器methods（软件包/预设构建/src/plugins/registermethods.ts）中，UMI集中注册数十个方法。这些方法是UMI文档中插件API的扩展方法。
当我们在控制台的UMI路径下单击命令NPX UMI DEV时，我们将使用DEV参数启动UMI命令，该命令使用一系列操作（路径：packages/umi/src/servicewithbuiltin.ts）实例化。
在服务的构造函数中，上述预设提到的默认插件集（@umijs/preset-built-in）用于UMI。在这一点上，我们介绍了由默认插件代表的UMI插件。
pluginapi（pluginapi）服务/core/src/service/service.ts）方法（packages/core/src/service/service.ts）方法为插件-in提供插件-in接口。GETPLUGINAPI接口是该接口的桥梁整个插件-in系统。它使用代理模式来组织UMI插件的核心方法，初始化过程挂钩节点API，服务方法属性以及通过@umijs/Prest-Buyl-built在服务对象上注册的扩展方法- 用于插件通话。
插件内核（插件）1。在上面的配置初始化配置，它将通过服务（路径：packages/umi/src/servicewithbuiltin.ts）来实例化，然后将其传递到预设插件集中（@umijs/preset -in -in -in）.ESSENCETHE对象从Coreserveice继承（packages/core/src/service/service.ts）.coreserveice在实例化期间构造函数中的插件和插件 - 插件：
转换处理后，插件-in最终将在UMI系统中代表一个对象，如下所示：
2.初始化插件 - IN UMI实例化服务，调用服务对象的运行方法。初始化插件的过程。
在这里，我们需要关注第一个注册方法插件中第一个注册方法插件中注册扩展方法时提到的寄存器方法方法。
因此，当执行插件代码时，如果是核心方法，则直接执行。如果它是一种扩展方法，除WritetMpfile外，其余部分将在HooksbyPluginId下注册。在这一点上，服务已完成插件的初始化，并执行了插件呼叫的核心方法和扩展。
3.通过以下代码初始化钩子。该服务将用插件名称作为维尺寸配置转换钩子，并将其转换为带有钩名作为维度的恢复集。
在转换之前，在AddHtmlheadScripts扩展方法下：
转换后：
此时，插头系统已准备好到达插件状态。
4.触发钩子后，程序到达插件状态后，该服务立即执行了触发钩操作。
那么如何触发？让我们看一下Applaplugins的代码实现：
在这一点上，引入了UMI的整体插头 - 工作流程。随后的代码是，UMI继续根据该过程触发各种钩子，以完成整个UMI的功能。在UMI中，其他一些框架还应用了插件模式。让我们简要介绍下面的比较。
通用插头机构的主要作用是Babel的语法转换。Babel的整个过程分为三个部分：解析，将代码转换为抽象语法树（AST）；转换，遍历AST中的节点进行语法转换操作；根据最新的最新产品生成目标代码。在转换过程中，它根据每个插件配置配置完成。
通用插件
您可以看到，Babel插件还返回一个功能，该功能与UMI非常相似。但是，Babel插件的操作不是基于事件驱动的发行订阅模式，而是访问者模式。BABEL将统一节点。通过访问者访问者提供方法并维护节点关系。插件 - 仅需要注册他们在访问者中关心的节点类型。
webpack插件机制WebPack基于两个支柱功能：一个是加载程序，用于基于管道模式，用于转换模块的源代码；另一个是插件，用于解决加载程序无法解决的问题。顾名思义，插件基于典型的webpack插件上的插件-in机制。
初始化时，webpack将统一执行插件的应用方法。插件-in可以通过注册编译器的挂钩函数访问编译器对象，并通过整个编译生命周期来完成插件函数。整个事件的功能基于WebPack的核心工具Tapable.tabable也是UMI事件驱动工具。可以看出，UMI和WebPack的总体想法非常相似。
滚动插头机制汇总也是一个模块包装工具。与webpack相比，汇总更适合包装纯JS库。同一汇总还具有插头-in机构。
卷插插头保持一组同步/异步，串行/平行，熔化/生化案例回调机制，但该部分不单独绘制类库，但在汇总项目中维护。插件控制器（SRC）（SRC）/utils/plugindriver.ts），插件-in上下文（src/utils/pluginContext.ts），插件-in缓存（src/utils/plugincache.ts）已经完成了插件API和插件的能力插入。
VUE-CLI插件机制Vue-CLI的插件比其他插件稍微稍微稍微稍微略有特征，也就是说，将插件划分为多种情况，一个项目生成阶段，未安装插件，插件在需要;;运行VUE UI时，还有一个UI插头 - 可以使用。
VUE-CLI插件的包装目录结构
在生成阶段，在安装插头时执行生成器。JS和提示。在操作阶段中执行索引。产生器示例：
提示将在安装过程中与用户交互，获取插头的选项配置，并在generator.js调用时作为参数作为参数。
在项目生成阶段，插件API通过packages/@vue/cli/lib/genratorapi.js提供。初始化packages/@vue/cli/lib/generator.js中的插件-in，在插件中执行api，in packages/@vue/cli/lib/creator.js在插头-in，最后完成插件函数的调用。
在操作阶段，VUE-CLI运行阶段插件：
项目操作阶段期间的插件主要用于修改webpack的配置，并创建或修改command.pluginapi，packages/@vue/cli/cli/cli-service/service.js完成插件的初始化和操作/@vue/@vue/@vue/@vue/cli-service/service.js。vue-cli插件的操作主要基于回调函数的方式管理。
通过上述介绍，可以发现插头机制是现代前端项目工程框架中必不可少的一部分。插头的实现是多种多样的，但总结构通常是一致的。在完成插头的初始化和操作中。插头API是插头和系统之间的桥梁，因此插头 - 以完成特定功能，然后再组合不同的插头 - 系统。
原始：https：//juejin.cn/post/70985888886532534564