有哪些前端插件化架構

本篇內容主要講解“有哪些前端插件化架構”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“有哪些前端插件化架構”吧!

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]

到此，相信大家對“有哪些前端插件化架構”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！