建站
咨詢
售后
建站咨詢
新聞中心
babel插件、webpack插件、vue-cli插件，為啥這么多的優(yōu)秀框架都是使用插件系統(tǒng)？插件化架構(gòu)是什么？帶來(lái)了什么好處？可以應(yīng)用到什么場(chǎng)景呢？
1. 插件化架構(gòu)定義
插件化架構(gòu)又稱微核架構(gòu)，指的是軟件的內(nèi)核相對(duì)較小，主要功能和業(yè)務(wù)邏輯都通過(guò)插件實(shí)現(xiàn)。插件化架構(gòu)一般有兩個(gè)核心的概念：內(nèi)核和插件。
- 內(nèi)核（pluginCore）通常只包含系統(tǒng)運(yùn)行的最小功能；
- 插件（plugin）則是互相獨(dú)立的模塊，一般會(huì)提供單一的功能。
內(nèi)核一般會(huì)將要完成的所有業(yè)務(wù)進(jìn)行抽象，抽象出最小粒度的基礎(chǔ)接口，供插件方來(lái)調(diào)用。這樣，插件開發(fā)的效率將會(huì)極大的提高。比方說(shuō)，瀏覽器就是一個(gè)典型的插件化架構(gòu)，瀏覽器是內(nèi)核，頁(yè)面是插件，這樣通過(guò)不同的URL地址加載不同的頁(yè)面，來(lái)提供非常豐富的功能。而且，我們開發(fā)網(wǎng)頁(yè)時(shí)候，瀏覽器會(huì)提供很多API和能力，這些接口通過(guò) window來(lái)掛載， 比如，DOM、BOM、Event、Location等等。
設(shè)計(jì)一個(gè)完善的插件化架構(gòu)的系統(tǒng)，包含三要素：
- plugCore：插件內(nèi)核，提供插件運(yùn)行時(shí)，管理插件的加載、運(yùn)行、卸載等生命周期（類比瀏覽器）；
- pluginAPI：插件運(yùn)行時(shí)需要的基礎(chǔ)接口（類比瀏覽器例子，相當(dāng)于window）；
- plugin：一系列特定功能的獨(dú)立模塊（類比瀏覽器例子，相當(dāng)于不同的網(wǎng)頁(yè)）。
2. 插件化架構(gòu)的實(shí)踐
我們將從plugCore、 pluginAPI和plugin三要素，來(lái)解析jQuery、Babel和Vue CLI這三大優(yōu)秀的開源庫(kù)其插件化架構(gòu)的實(shí)踐。
2.1 jQuery的插件化架構(gòu)
jQuery 是一個(gè) JavaScript 庫(kù)，極大地簡(jiǎn)化了JavaScript 編程，用更少的代碼完成更多工作。早期瀏覽器的標(biāo)準(zhǔn)不統(tǒng)一，開發(fā)網(wǎng)頁(yè)需要兼容不同瀏覽器的用戶使用是一件十分痛苦的事情。jQuery在適配了不同瀏覽器的差異的基礎(chǔ)上提供了更加完善易用API，供前端開發(fā)人員完成網(wǎng)頁(yè)編程，使用jQuery編寫的網(wǎng)頁(yè)，在一套代碼下也可以在不同廠商的瀏覽器上正常運(yùn)行。在 MV* 框架流行之前，jQuery是絕對(duì)的扛霸子。jQuery是可擴(kuò)展的，其擁有完善的插件體系，網(wǎng)頁(yè)開發(fā)所需要的各種插件在其生態(tài)都可以找到。我們解析一下jQuery插件體系。
插件定義：
特別說(shuō)明：$.fn = jQuery.protype(插件精髓)。jQuery的插件機(jī)制通過(guò)原型鏈來(lái)掛載。
插件機(jī)制執(zhí)行過(guò)程
demo 示例
$app便可以在原型鏈上查找到myPlugin：
從三要素來(lái)總結(jié)：
- pluginCore：通過(guò)原型鏈賦值來(lái)擴(kuò)展不同的插件，再獲得jQuery實(shí)例后可以被調(diào)用。
- pluginAPI：jQuery包的核心接口，（jQuery依靠其優(yōu)異的Api取勝）
- plugin：無(wú)限制，可以是JavaScript的類型，一般是實(shí)現(xiàn)具體功能的模塊，比如，日期選擇器等。
2.2 Babel的插件化架構(gòu)
Babel 是一個(gè)工具鏈，主要用于將 ECMAScript 2015+ 版本的代碼轉(zhuǎn)換為向后兼容的 JavaScript 語(yǔ)法，以便能夠運(yùn)行在當(dāng)前和舊版本的瀏覽器或其他環(huán)境中。在代碼轉(zhuǎn)換的過(guò)程中會(huì)涉及許多特性和語(yǔ)法的轉(zhuǎn)換，而且ECMAScript的提案總是不斷地更新。如何組織大量（不斷增加）的轉(zhuǎn)換規(guī)則呢？我們來(lái)看看 Babel的工作原理。
Babel轉(zhuǎn)換源碼，分為三個(gè)步驟：
- 解析（parse）：進(jìn)行詞法分析（Lexical Analysis）和語(yǔ)法分析（Syntactic Analysis）以生成抽象語(yǔ)法樹（AST）；
- 轉(zhuǎn)換 (transform)：遍歷AST中每個(gè)節(jié)點(diǎn)并進(jìn)行相應(yīng)的轉(zhuǎn)換操作，該過(guò)程通過(guò)使用不同的插件來(lái)實(shí)現(xiàn)各種特性和語(yǔ)法的轉(zhuǎn)換；
- 生成 (generate)：根據(jù)AST生成目標(biāo)代碼。
Babel在AST轉(zhuǎn)換的過(guò)程（即上圖的第2步），便使用插件化架構(gòu)，下面將會(huì)詳細(xì)講解這個(gè)轉(zhuǎn)換過(guò)程的插件化架構(gòu)的使用。
插件定義：
插件是一個(gè)函數(shù)，返回值是一個(gè)包含visitor的對(duì)象。插件定義的部分概念說(shuō)明：
- name：插件名
- pluginAPI:插件運(yùn)行時(shí)傳入的API
- visitor:是一個(gè)對(duì)象，對(duì)象的key是AST的每節(jié)點(diǎn)的類型，對(duì)象的值是一個(gè)函數(shù)，AST轉(zhuǎn)換的過(guò)程便在這里發(fā)生的。
- nodePath：是一個(gè)AST的節(jié)點(diǎn)的實(shí)例對(duì)象，詳細(xì)可以參考：@babel/parser/src/parser/node.js [1]，其中， type字段 : 該節(jié)點(diǎn)的類型，常見(jiàn)類型：VariableDeclaration（變量聲明）、VariableDeclarator（變量聲明表達(dá)式）、ArrowFunctionExpression（箭頭函數(shù)表達(dá)式）等等，詳細(xì)可以參考@babel/types [2]。
（筆者認(rèn)為pluginAPI還應(yīng)包括nodePath，因?yàn)?，每個(gè)節(jié)點(diǎn)實(shí)例除了語(yǔ)法和詞法描述，還包含需求語(yǔ)法間的轉(zhuǎn)換方法）
插件示例
箭頭函數(shù)轉(zhuǎn)換成普通函數(shù)的插件：@babel/plugin-transform-arrow-functions [3]源碼：
插件的執(zhí)行思路：
- 第一步，執(zhí)行該插件，獲取到包含visitor對(duì)象；
- 第二步，ATS遍歷節(jié)點(diǎn)，檢測(cè)nodePath的type === 'ArrowFunctionExpression'，尋找到vistor對(duì)象的中key為 ArrowFunctionExpression的函數(shù)；
- 第三步，將nodePath傳入該函數(shù)進(jìn)行調(diào)用（AST在這步被修改）；
單個(gè)插件的執(zhí)行思路很明確了，那么在ATS遍歷過(guò)程，怎么做到多個(gè)插件一起工作呢？
Babel在轉(zhuǎn)換源碼過(guò)程中，插件化架構(gòu)的工作流程是這樣的：
- 第一步：通過(guò)解析babel的配置文件（或者命令行--plugins參數(shù)），獲取Babel配置的所有插件的描述；
- 第二步，將插件的require進(jìn)內(nèi)存，獲得插件函數(shù)，并執(zhí)行插件函數(shù)，獲取到多個(gè)包含vistor字段對(duì)象；（詳細(xì)邏輯：@babel/core/src/config/full.js [4]）
- 第三步，將多個(gè)包含vistor字段對(duì)象整合成一個(gè)大的visitor源碼展示（詳細(xì)邏輯：@babel/core/src/transformation/index.js [5]）：
合并后的visitor對(duì)象：
visitor的對(duì)象中的值變成了 Array
- 第四步，AST遍歷時(shí)，每個(gè)節(jié)點(diǎn)根據(jù) NodeType，來(lái)獲取 visitor[NodeType]，并依次執(zhí)行。
從三要素來(lái)總結(jié)：
- pluginCore：插件加載并整合（即vistor合并)，AST遍歷期間是調(diào)用查找vistor[NodeType]并依次調(diào)用；
- pluginAPI：nodePath，提供不同類型節(jié)點(diǎn)的接口來(lái)轉(zhuǎn)換AST節(jié)點(diǎn)；
- plugin：visitor[NodeType]=function(nodepath)。
2.3 vue-cli的插件化架構(gòu)
Vue CLI 是一個(gè)基于 Vue.js 進(jìn)行快速開發(fā)的完整系統(tǒng)。CLI插件是向你的 Vue 項(xiàng)目提供可選功能的 npm 包，例如 Babel/TypeScript 轉(zhuǎn)譯、ESLint 集成、單元測(cè)試和 end-to-end 測(cè)試等。Vue CLI 插件的名字以 @vue/cli-plugin- (內(nèi)建插件) 或 vue-cli-plugin- (社區(qū)插件) 開頭，非常容易使用。下面，我們將會(huì)解析cli插件的定義、執(zhí)行、安裝等過(guò)程。
插件定義
插件必須是vue-cli-plugin-命名的npm包，并且目錄結(jié)構(gòu)也是要嚴(yán)格遵循文件命名來(lái)定義。
注意：@vue/cli-service [6],會(huì)通過(guò) 項(xiàng)目根目錄下package.json中dependencies和devDependencies中定義的 npm包中符合插件命名規(guī)范的 npm包作為項(xiàng)目的插件。
文件命名和內(nèi)容說(shuō)明：
- generator.js：會(huì)在插件被添加時(shí)執(zhí)行，可以安裝npm包、修改項(xiàng)目源碼等功能；
- prompts.js：所有的對(duì)話邏輯都存儲(chǔ)在 prompts.js 文件中。對(duì)話內(nèi)部是通過(guò) inquirer [7] 實(shí)現(xiàn)，在調(diào)用其獲得安裝選項(xiàng)結(jié)果，并在 generator.js調(diào)用時(shí)作為參數(shù)存入；
- index.js：Service插件的入口，@vue/cli-service [8]啟動(dòng)時(shí)被執(zhí)行
詳情可以去看Vue Cli 插件開發(fā)指南 [9]
我們把Vue CLI的插件執(zhí)行分成兩種情況：
- 第一種：插件未安裝，插件被添加的時(shí)候調(diào)用（prompts.js + generator.js）
- 第二種：插件已安裝，插件系統(tǒng)啟動(dòng)時(shí)被執(zhí)行（index.js）
第一種 安裝流程
相比Babel的手動(dòng)安裝添加插件方式，Vue CLI的插件系統(tǒng)提供命令行的安裝方式就顯得很方便了。我們看看Vue Cli插件系統(tǒng)時(shí)怎么實(shí)現(xiàn)一行命令添加插件的功能。
安裝流程的執(zhí)行思路如下：
- 第一步：從命令行參數(shù)解析出插件名，使用npm（yarn）install vue-cli-plugin-xxx 安裝插件，源碼位置：@vue/cli/lib/add.js [10]
- 第二步：require('vue-cli-plugin-xxx/prompts'),并獲取用戶安裝是選項(xiàng)結(jié)果pluginOptions，源碼位置：@vue/cli/lib/invoke.js [11]
- 第三步：使用pluginName和pluginOptions作為參數(shù)構(gòu)成出Generator [12]對(duì)象的實(shí)例
- 第四步：執(zhí)行g(shù)enerator.generate方法。這步包括了三個(gè)關(guān)鍵步驟：
1）require(vue-cli-plugin-xxx/generator)，獲得插件的執(zhí)行函數(shù)；
2）構(gòu)建GeneratorAPI（即pluginAPI）；
3）調(diào)用generator.js導(dǎo)出函數(shù)。
- 詳細(xì)代碼：_@vue/cli/lib/Generator.js [113]_
- 第五步：將插件的參數(shù)添加到vue.config.js文件中。
第二種 運(yùn)行流程
插件運(yùn)行流程是由@vue/cli-service [14]這個(gè)插件系統(tǒng)定義的，這里的調(diào)用插件有兩種：
- 第一種 內(nèi)置插件@vue/cli-service的命令和配置相關(guān)，將系插件統(tǒng)功能拆分出多個(gè)內(nèi)置插件，在插件系統(tǒng)中默認(rèn)調(diào)用）；
- 第二種 項(xiàng)目插件，package.json 中定義的npm包名符合插件命名規(guī)范）。
插件運(yùn)行邏輯很簡(jiǎn)單：
這兩個(gè)流程的 pluginAPI是不一樣的。
- 安裝流程：@vue/cli/lib/GeneratorAPI [15]
- 運(yùn)行流程：@vue/cli-service/lib/PluginAPI [16]
從三要素來(lái)總結(jié)：
1）安裝流程
- pluginCore：@vue/cli [17]通過(guò)命令行參數(shù)獲得插件包名，然后安裝插件的npm包，并執(zhí)行prompts.js獲得用戶安裝選項(xiàng)結(jié)果，然后，使用選項(xiàng)結(jié)果和generator.js作為參數(shù)構(gòu)造出generator，并在調(diào)用generator.generate中執(zhí)行generator.js函數(shù)；
- pluginAPI：GeneratorAPI [18]，提供了源碼修改、npm包管理、模版文件生成等功能；
- plugin：由prompts.js和generator.js組成，解決某種能力植入項(xiàng)目時(shí)，要處理的依賴。
2）運(yùn)行流程
- pluginCore：@vue/cli-service [19]，通過(guò)package.json中獲得項(xiàng)目插件后，與系統(tǒng)內(nèi)置插件合并，最后依次執(zhí)行；
- pluginApI：PluginAPI [20]，提供webpack配置修改和命令管理的能力；
- plugin：index.js文件，在不同命令下進(jìn)行工作。
一個(gè)插件系統(tǒng)是可以不多個(gè)插件類型，并且插件系統(tǒng)通過(guò)命令安裝插件的實(shí)現(xiàn)，用戶在使用插件系統(tǒng)時(shí)添加插件也是十分方便的。
3. 插件化架構(gòu)的應(yīng)用
3.1 應(yīng)用場(chǎng)景
通過(guò)上述的實(shí)例，總結(jié)處理插件架構(gòu)的應(yīng)用場(chǎng)景。
- 第一種：富pluginAPI場(chǎng)景：代碼在多種場(chǎng)景中運(yùn)行，需要抹平場(chǎng)景中差異。（jQuery）；
- 第二種：富plugin場(chǎng)景，插件系統(tǒng)，可預(yù)期需求會(huì)越來(lái)越多，適合通過(guò)更多的插件來(lái)簡(jiǎn)化系統(tǒng)的代碼量（Babel）
- 第三種：富pluginCore和pluginAPI場(chǎng)景，插件系統(tǒng)本身非常復(fù)雜，需要對(duì)開發(fā)人員要求極高，這時(shí)候，將復(fù)雜的工作放到內(nèi)核和中pluginApi實(shí)現(xiàn)，剩下大部分的簡(jiǎn)單的編碼工作留給插件方實(shí)現(xiàn)，插件方借助pluginApi也可以快速完成業(yè)務(wù)開發(fā)（Vue CLI）
3.2 發(fā)展方向
通過(guò)建立一個(gè)插件標(biāo)準(zhǔn)，將研發(fā)流程沉淀的能力進(jìn)行插件化編程，整個(gè)公司通過(guò)使用一套的插件系統(tǒng)（中臺(tái)），這樣意味著，我們不用重復(fù)造業(yè)務(wù)輪子，團(tuán)隊(duì)和企業(yè)可以持續(xù)積累自己的插件生態(tài)，讓軟件開可以像汽車等工業(yè)制造一樣，打造一條標(biāo)準(zhǔn)化裝配的流水線。
分享題目：前端插件化架構(gòu)的探索和實(shí)踐
網(wǎng)站鏈接：http://www.dlmjj.cn/article/cdhedoj.html
