babel插件、webpack插件、vue-cli插件，为啥这么多的优良框架都是应用插件零碎？插件化架构是什么？带来了什么益处？能够利用到什么场景呢？

1. 插件化架构定义

插件化架构又称微核架构，指的是软件的内核绝对较小，次要性能和业务逻辑都通过插件实现。插件化架构个别有两个外围的概念：内核和插件。

  • 内核（pluginCore）通常只蕴含零碎运行的最小性能；
  • 插件（plugin）则是相互独立的模块，个别会提供繁多的性能。

内核个别会将要实现的所有业务进行形象，形象出最小粒度的根底接口，供插件方来调用。这样，插件开发的效率将会极大的进步。比方说，浏览器就是一个典型的插件化架构，浏览器是内核，页面是插件，这样通过不同的URL地址加载不同的页面，来提供十分丰盛的性能。而且，咱们开发网页时候，浏览器会提供很多API和能力，这些接口通过 window来挂载， 比方，DOM、BOM、Event、Location等等。

设计一个欠缺的插件化架构的零碎，蕴含三要素：

  • plugCore：插件内核，提供插件运行时，治理插件的加载、运行、卸载等生命周期（类比浏览器）；
  • pluginAPI：插件运行时须要的根底接口（类比浏览器例子，相当于window）；
  • plugin：一系列特定性能的独立模块（类比浏览器例子，相当于不同的网页）。

2. 插件化架构的实际

咱们将从plugCore、 pluginAPI和plugin三要素，来解析jQuery、Babel和Vue CLI这三大优良的开源库其插件化架构的实际。

2.1 jQuery的插件化架构

jQuery 是一个 JavaScript 库，极大地简化了JavaScript 编程，用更少的代码实现更多工作。晚期浏览器的规范不对立，开发网页须要兼容不同浏览器的用户应用是一件非常苦楚的事件。jQuery在适配了不同浏览器的差别的根底上提供了更加欠缺易用API，供前端开发人员实现网页编程，应用jQuery编写的网页，在一套代码下也能够在不同厂商的浏览器上失常运行。在 MV* 框架风行之前，jQuery是相对的扛霸子。jQuery是可扩大的，其领有欠缺的插件体系，网页开发所须要的各种插件在其生态都能够找到。咱们解析一下jQuery插件体系。

插件定义：

特地阐明：$.fn = jQuery.protype(插件精华)。jQuery的插件机制通过原型链来挂载。

插件机制执行过程

demo 示例

$app便能够在原型链上查找到myPlugin：

从三要素来总结：

  • pluginCore：通过原型链赋值来扩大不同的插件，再取得jQuery实例后能够被调用。
  • pluginAPI：jQuery包的外围接口，（jQuery依附其优异的Api取胜）
  • plugin：无限度，能够是JavaScript的类型，个别是实现具体性能的模块，比方，日期选择器等。

2.2 Babel的插件化架构

Babel 是一个工具链，次要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便可能运行在以后和旧版本的浏览器或其余环境中。在代码转换的过程中会波及许多个性和语法的转换，而且ECMAScript的提案总是一直地更新。如何组织大量（一直减少）的转换规则呢？咱们来看看 Babel的工作原理。

Babel转换源码，分为三个步骤：

  • 解析（parse）：进行词法剖析（Lexical Analysis）和语法分析（Syntactic Analysis）以生成形象语法树（AST）；
  • 转换 (transform)：遍历AST中每个节点并进行相应的转换操作，该过程通过应用不同的插件来实现各种个性和语法的转换；
  • 生成 (generate)：依据AST生成指标代码。

Babel在AST转换的过程（即上图的第2步），便应用插件化架构，上面将会具体解说这个转换过程的插件化架构的应用。

插件定义：

插件是一个函数，返回值是一个蕴含visitor的对象。插件定义的局部概念阐明：

  • name：插件名
  • pluginAPI: 插件运行时传入的API
  • visitor: 是一个对象，对象的key是AST的每节点的类型，对象的值是一个函数，AST转换的过程便在这里产生的。
  • nodePath：是一个AST的节点的实例对象，具体能够参考：@babel/parser/src/parser/node.js [1]，其中， type字段 : 该节点的类型，常见类型：VariableDeclaration（变量申明）、VariableDeclarator（变量申明表达式）、ArrowFunctionExpression（箭头函数表达式）等等，具体能够参考@babel/types [2]。

（笔者认为pluginAPI还应包含nodePath，因为，每个节点实例除了语法和词法形容，还蕴含需要语法间的转换方法）

插件示例

箭头函数转换成一般函数的插件：@babel/plugin-transform-arrow-functions [3]源码：

插件的执行思路：

  • 第一步，执行该插件，获取到蕴含visitor对象；
  • 第二步，ATS遍历节点，检测nodePath的type === 'ArrowFunctionExpression'，寻找到vistor对象的中key为 ArrowFunctionExpression的函数；
  • 第三步，将nodePath传入该函数进行调用（AST在这步被批改）；

单个插件的执行思路很明确了，那么在ATS遍历过程，怎么做到多个插件一起工作呢？

Babel在转换源码过程中，插件化架构的工作流程是这样的：

  • 第一步：通过解析babel的配置文件（或者命令行--plugins参数），获取Babel配置的所有插件的形容；
  • 第二步，将插件的require进内存，取得插件函数，并执行插件函数，获取到多个蕴含vistor字段对象；（具体逻辑：@babel/core/src/config/full.js [4]）
  • 第三步，将多个蕴含vistor字段对象整合成一个大的visitor源码展现（具体逻辑：@babel/core/src/transformation/index.js [5]）：

合并后的visitor对象：

visitor的对象中的值变成了 Array<function(nodePath)>

  • 第四步，AST遍历时，每个节点依据 NodeType，来获取 visitor[NodeType]，并顺次执行。

从三要素来总结：

  • pluginCore：插件加载并整合（即vistor合并)，AST遍历期间是调用查找vistor[NodeType]并顺次调用；
  • pluginAPI：nodePath，提供不同类型节点的接口来转换AST节点；
  • plugin：visitor[NodeType]=function(nodepath)。

2.3 vue-cli的插件化架构

Vue CLI 是一个基于 Vue.js 进行疾速开发的残缺零碎。CLI插件是向你的 Vue 我的项目提供可选性能的 npm 包，例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 结尾，非常容易应用。上面，咱们将会解析cli插件的定义、执行、装置等过程。

插件定义

插件必须是vue-cli-plugin-命名的npm包，并且目录构造也是要严格遵循文件命名来定义。

留神：@vue/cli-service [6],会通过 我的项目根目录下package.json中dependencies和devDependencies中定义的 npm包中合乎插件命名标准的 npm包作为我的项目的插件。

文件命名和内容阐明：

  • generator.js：会在插件被增加时执行，能够装置npm包、批改我的项目源码等性能；

  • prompts.js：所有的对话逻辑都存储在 prompts.js 文件中。对话外部是通过 inquirer [7] 实现，在调用其取得装置选项后果，并在 generator.js调用时作为参数存入；

  • index.js：Service插件的入口，@vue/cli-service [8]启动时被执行

详情能够去看Vue Cli 插件开发指南 [9]

咱们把Vue CLI的插件执行分成两种状况：

  • 第一种：插件未装置，插件被增加的时候调用（prompts.js + generator.js）
  • 第二种：插件已装置，插件系统启动时被执行（index.js）

第一种 装置流程

相比Babel的手动装置增加插件形式，Vue CLI的插件零碎提供命令行的装置形式就显得很不便了。咱们看看Vue Cli插件零碎时怎么实现一行命令增加插件的性能。

装置流程的执行思路如下：

  • 第一步：从命令行参数解析出插件名，应用npm（yarn）install vue-cli-plugin-xxx 装置插件，源码地位：@vue/cli/lib/add.js [10]
  • 第二步：require('vue-cli-plugin-xxx/prompts'),并获取用户装置是选项后果pluginOptions，源码地位：@vue/cli/lib/invoke.js [11]

  • 第三步：应用pluginName和pluginOptions作为参数形成出Generator [12]对象的实例

  • 第四步：执行generator.generate办法。这步包含了三个关键步骤：

    1）require(vue-cli-plugin-xxx/generator)，取得插件的执行函数；

    2）构建GeneratorAPI（即pluginAPI）；

    3）调用generator.js导出函数。

  • 具体代码：_@vue/cli/lib/Generator.js [113]_
  • 第五步：将插件的参数增加到vue.config.js文件中。

第二种 运行流程

插件运行流程是由@vue/cli-service [14]这个插件零碎定义的，这里的调用插件有两种：

  • 第一种 内置插件@vue/cli-service的命令和配置相干，将系插件统性能拆分出多个内置插件，在插件零碎中默认调用）；
  • 第二种 我的项目插件，package.json 中定义的npm包名合乎插件命名标准）。

插件运行逻辑很简略：

这两个流程的 pluginAPI是不一样的。

  • 装置流程：@vue/cli/lib/GeneratorAPI [15]
  • 运行流程：@vue/cli-service/lib/PluginAPI [16]

从三要素来总结：

1）装置流程

  • pluginCore：@vue/cli [17]通过命令行参数取得插件包名，而后装置插件的npm包，并执行prompts.js 取得用户装置选项后果，而后，应用选项后果和generator.js作为参数结构出generator，并在调用generator.generate中执行generator.js函数；
  • pluginAPI：GeneratorAPI [18]，提供了源码批改、npm包治理、模版文件生成等性能；
  • plugin：由prompts.js和generator.js组成，解决某种能力植入我的项目时，要解决的依赖。

2）运行流程

  • pluginCore：@vue/cli-service [19]，通过package.json中取得我的项目插件后，与零碎内置插件合并，最初顺次执行；
  • pluginApI：PluginAPI [20]，提供webpack配置批改和命令治理的能力；
  • plugin：index.js文件，在不同命令下进行工作。

一个插件零碎是能够不多个插件类型，并且插件零碎通过命令装置插件的实现，用户在应用插件零碎时增加插件也是非常不便的。

3. 插件化架构的利用

3.1 利用场景

通过上述的实例，总结解决插件架构的利用场景。

  • 第一种：富pluginAPI场景：代码在多种场景中运行，须要抹平场景中差别。（jQuery）；
  • 第二种：富plugin场景，插件零碎，可预期需要会越来越多，适宜通过更多的插件来简化零碎的代码量（Babel）
  • 第三种：富pluginCore和pluginAPI场景，插件零碎自身非常复杂，须要对开发人员要求极高，这时候，将简单的工作放到内核和中pluginApi实现，剩下大部分的简略的编码工作留给插件方实现，插件方借助pluginApi也能够疾速实现业务开发（Vue CLI）

3.2 倒退方向

通过建设一个插件规范，将研发流程积淀的能力进行插件化编程，整个公司通过应用一套的插件零碎（中台），这样意味着，咱们不必反复造业务轮子，团队和企业能够继续积攒本人的插件生态，让软件开能够像汽车等工业制作一样，打造一条标准化拆卸的流水线。

参考链接：

  1. https://github.com/babel/babe...
  2. https://babeljs.io/docs/en/ba...
  3. https://babeljs.io/docs/en/ne...
  4. https://github.com/babel/babe...
  5. https://github.com/babel/babe...
  6. https://github.com/vuejs/vue-...
  7. https://github.com/SBoudrias/...
  8. https://github.com/vuejs/vue-...
  9. https://cli.vuejs.org/zh/dev-...
  10. https://github.com/vuejs/vue-...
  11. https://github.com/vuejs/vue-...
  12. https://github.com/vuejs/vue-...
  13. https://github.com/vuejs/vue-...
  14. https://github.com/vuejs/vue-...
  15. https://github.com/vuejs/vue-...
  16. https://github.com/vuejs/vue-...
  17. https://github.com/vuejs/vue-...
  18. https://github.com/vuejs/vue-...
  19. https://github.com/vuejs/vue-...
  20. https://github.com/vuejs/vue-...