Vue CLI 手把手教你擼外掛程式

現如今 vue 作為主流的前端框架之一，其健全的配套工具，活躍的開源社群，讓廣發碼農熱衷追捧。vue cli 作為其官方的開發構建工具，目前已更新迭代到 4.x 版本，其內部整合了日常開發用到的打包壓縮等功能，簡化了常規自己動手配置 webpack 的煩惱。另外提供的外掛程式功能更是滿足了使用者定製化的需求場景，那麼本文就來講下如何去開發乙個外掛程式。

假設我們團隊現在需要去開發一套 ui 元件庫，由於團隊內每個人的編碼習慣不一樣，可能會出現單一元件命名、目錄結構等不統一的問題，對於團隊統一對外呈現的元件庫來說，這當然不是一件好事。那有什麼辦法可以去約束團隊成員統一風格呢？這裡我們就可以開發乙個元件外掛程式來解決這些煩惱，那麼我們來看下如何來開發這個元件外掛程式呢？

為了讓乙個 cli 外掛程式能夠被其他開發者使用，官方介紹了必須遵循 vue-cli-plugin-的命名約定，所以這裡我們命名為 vue-cli-plugin-next-component。

mkdir vue-cli-plugin-next-component && cd $_

對於官方自己的外掛程式，都是以 @vue/cli-plugin-命名以示區別。

確定好外掛程式名稱後，我們就要為它填充目錄結構了。首先我們得先確認，這個外掛程式具體要實現哪些功能：

至此，大致的結構目錄如下：

├── readme.md

├── generator

│ ├── template

│ └── index.js # generator

├── prompts.js # prompt 檔案 (可選)

├── index.js # service 外掛程式

└── package.json

作為其主要匯出檔案，匯出的函式接受兩個引數，包含 api 和 options，api 允許 service 外掛程式針對不同的環境擴充套件/修改內部的 webpack 配置，並向 vue-cli-service 注入額外的命令。options 包含了 vue.config.js 內指定選項的物件或者是在 package.json 內的 vue 字段。

module.exports = (api, options) => )
api.configurewebpack(webpackconfig => )
api.registercommand('test', args => )
}

作為對話檔案，在外掛程式被初始化的時候會被呼叫，底層使用了 inquire 模組，最終返回乙個用於 inquire 的問題的陣列，被解析的答案會作為選項被傳遞給外掛程式的 generator，這裡我們可以增加一些元件相關的問題，同時也可以對輸入的內容做校驗。

module.exports = [
},},
...]

最終匯出乙個函式，這個函式接收三個引數，乙個是 generatorapi 例項，對於第三方外掛程式來說，options 來自 prompt 對話內容，如果使用者使用某個預設建立專案，整個預設將作為第三個引數傳遞。在呼叫 render 方法時，該 generator 將使用 ejs 來渲染 template 模板，所以我們在寫模板時，需要把動態配置的地方，用 ejs 的模板語法去標註。

module.exports = (api, options, rootoptions) => );
}

模板示例：

i am a component. rewrite me from here.

完成外掛程式的開發後，先來本地驗證下。先建個目錄執行 npm init 後，通過 install 安裝寫好的外掛程式。

安裝好後，通過 vue invoke 指令初始化外掛程式。

最終我們會看到 test 目錄裡已經多了乙個 packages 目錄，同時下面有個叫 button的元件子目錄，這樣就滿足我們預期目標啦，讓參與元件開發的同學更加專注的去寫**就行了，不用再關心目錄、命名等規範要求了。

對於一些專案開發，如果需要經常引入其他工程的一些功能模組或者是業務元件，但又不想每次都是複製貼上，就可以寫個外掛程式來幫你完成，解放雙手，一勞永逸。另外，外掛程式也彌補了腳手架在定製化方面的不足，讓附加功能變得單一便捷可插拔，使得 vue cli 工具能夠更加專注在 vue 專案腳手架上，將 vue 生態中的工具基礎更加標準通用化。

Vue CLI 手把手教你擼外掛程式

手把手教你編寫Logstash外掛程式

手把手教你OA選型

手把手教你玩轉git

Vue CLI 手把手教你擼外掛程式

手把手教你編寫Logstash外掛程式

手把手教你OA選型

手把手教你玩轉git

相關推薦