feflow 插件實現原理

最近在着手接入和推動研發的規範化、流程化，使得團隊開發風格更加統一，提高研發質量與效率。在接入的過程當中，選擇 feflow 與 現有的相關流程相結合管理腳手架升級和項目初始化，後續考慮開發或者使用插件處理更多業務開發流程。瞭解插件實現原理，有利於後續插件開發和使用；學習其設計方式，對其餘項目開發大有裨益。

feflow 是前端研發規範化和流程化工具，常見的內置指令有： init、 dev、build、deploy等，從初始化到構建都提供內置指令，如若須要額外指令實現特定功能，就須要自定定義插件；本質上feflow是一個插件加載工具，可讓開發者開發適用於業務的插件。本文主要介紹 feflow 是如何進行插件註冊、加載和使用。

1、插件註冊

feflow 做爲一個命令行執行工具，天然而然地支持命令註冊，不管是內置指令仍是自定義插件，都須要註冊相關命令的。首先看一下如何註冊指令，以 feflow-plugin-example 爲例，其代碼以下：

feflow.cmd.register('add', '加法運算器', function(args) {
   // do something
    add(args._);
});

註冊指令須要的參數以下：

• name 必填，指令名稱
• desc 必填，闡述相關指令的做用
• options 可選，函數相關可選項
• fn 必填，指令調用的回調函數

指令註冊是 feflow 中 Commond 對象來實現的，Commond 中定義 store 對象，其會存儲相關指令，並把指令和指令相關功能作一一映射。關鍵代碼以下：

funciton register(name, desc, options, fn) {
    //... format parameter

    const c = this.store[name.toLowerCase()] = fn;
    c.options = options;
    c.desc = desc;
    //provide an alias for the instruction.
    //feflow version is equal to feflow v(ersion)
    this.alias = abbrev(Object.keys(this.store));
  }

2、插件加載

插件註冊安裝以後，都會存儲在 feflow 安裝的 node_modules目錄下，在 feflow 進行初始化的時候，首先會讀取以feflow-plugin-開頭的文件夾，而後進行插件動態加載。

2.1 模塊初始化
動態加載是模擬 Node 模塊加載方式的實現，首先會初始化 module 模塊。其中會包含模塊相關路徑、文件名稱等相關信息。在進行模塊加載時會進行路徑查找，即 module.paths。

const module = new Module(path);
module.filename = path;
module.paths = Module._nodeModulePaths(path);

2.2 編譯調用
編譯執行時首先會經過fs.readFile去獲取對應的文件內容,接下來重點看一下是如何編譯調用的，代碼片斷以下：

script = '(function(exports, require, module, __filename, __dirname, feflow){' +
script + '});'; //(1)

const fn = vm.runInThisContext(script, path); //(2)

return fn(module.exports, require, module, path, pathFn.dirname(path), self); //(3)

首先看到是對原始內容進行封裝(標註1），會傳入CommonJS 相關規範實現的 exports, require, module, _filename, _dirname 以及注入的自定義變量 feflow。通過封裝的內容以下：

(function (exports, require, module, __filename, __dirname) { 
    //原始內容
});

通過包裝後返回的字符串，會做爲 vm.runInThisContext() 方法的輸入參數（標註2）。vm 模塊簡單的來講就是用來作沙箱環境執行代碼，對代碼的上下文環境作隔離。vm.runInThisContext 相似 eval，不一樣的是生成的代碼運行時能夠訪問外部的 global 對象，可是不能訪問其餘變量。接下來會傳入當前 feflow 實例，調用自定義指令的註冊（標註3）。

3、插件使用

在插件使用前確保已經全局安裝 feflow-cli：

npm install -g feflow-cli

對於插件使用分兩種狀況：
(1) 插件開發以後發佈到 NPM 上或者 NPM 私有倉庫
(2) 插件未發佈
下面分別詳細介紹使用步驟。

插件已發佈

1.插件進行安裝：

feflow install feflow-plugin-example

2.調用對應指令：

feflow add 1 2

插件未發佈

1.在插件目錄下 npm link：

cd feflow-plugin-example
npm link

2.到 feflow 安裝目錄 .feflow 中安裝

npm link feflow-plugin-example

3.編輯 .feflow/package.json 文件，加入依賴

dependencies: {
    //...
    "feflow-plugin-example": "1.0.0"
}

修改完成以後就能夠進行調用。