10分鐘搭建屬於自己的 Vue CLI3 專案模板
0x01 契機
Vue CLI3 出來已經很長時間了，一直想研究它的外掛系統卻沒有時間
，剛好最近需要統一一下專案組的規範
，於是就有了契機。
先瞅一眼文件: CLI3外掛和Preset
然後就教你怎麼完全定製化一套 前端專案模板，媽媽再也不用擔心我每次複製貼上啦~
特別說明：這種 preset 不需要釋出到 npm，支援 github，gitlab 及任何 git repo，甚至可以直接本地引入哦~
0x02 兩個名詞
外掛
顧名思義，就是外掛啦
- Vue CLI 使用了一套基於外掛的架構
- 基於外掛的架構使得 Vue CLI 靈活且可擴充套件
Preset
可以翻譯為 預設
- 一個包含建立新專案所需預定義選項和外掛的 JSON 物件
- 還可以理解為一套預置的專案模板，也就是本文要講的。
使用 vue create 建立過專案的小夥伴應該都記得，在建立完成後 CLI 會提示是否儲存為一個 preset，這裡第一條指的就是要儲存的那個物件。如果你儲存過，下面的命令就能看到之前儲存的 preset。
cat ~/.vuerc
每個 preset.json 大概是這麼個格式:
{
"useConfigFiles": true,
"plugins": {...},
"configs": {
"vue": {...},
"postcss": {...},
"eslintConfig": {...},
"jest": {...}
}
}
0x03 兩者區別
外掛
一個外掛包含以下三個部分：
- Service 外掛
- generator 檔案 (可選)
- prompts 檔案 (可選)
Preset
一個 Preset 專案包含以下三個部分
- preset.json
- generator 檔案 (可選)
- prompts 檔案 (可選)
可以看到他們兩個的區別就是外掛必須有一個 Service 外掛（這個東西比本文講的 外掛 範疇要窄），而 Preset 必須包含一個 preset.json
0x04 核心概念
由於本文主要講的是 Preset，所以剩下的核心概念看文件就好哈: 核心概念
Prompts
本質上是一個對話配置檔案，vue 內建外掛 和 第三方外掛 的這個檔案的寫法是不一樣的。我們只要記得：
它是一個 Inquirer.js 的 問題 的陣列
示例如下：
// 注意這段程式碼下面會提到
module.exports = [
{
type: 'list', // 即型別為 選擇項
name: 'module', // 名稱，作為下面 generator 函式 options 的鍵
message: '請選擇你要生成的模組', // 提示語
choices: [
{ name: 'Module1', value: 'module1' },
{ name: 'Module2', value: 'module2' },
{ name: 'Module3', value: 'module3' }
],
default: 'module0',
},
{
type: 'input', // 型別為 輸入項
name: 'moduleName',
message: '請輸入模組名稱',
default: 'myModule'
}
]
當然用不到的話直接給空陣列就行哈。
執行的效果大概就是這樣：
Generator
可以叫它生成器，它匯出一個函式，該函式接收三個引數
- api : 一個 GeneratorAPI 例項
- options: 可以先簡單理解為 prompts 問題陣列 的使用者輸入 組合成的選項物件
- rootOptions: 整個 preset.json 物件
// 這些程式碼本質上跑在 node 上，所以都是 node 的語法
module.exports = (api, options, rootOptions) => {
// 修改 `package.json` 裡的欄位
api.extendPackage({
scripts: {
test: 'vue-cli-servicecommand'
}
})
// 複製並用 ejs 渲染 `./template` 內所有的檔案
api.render('../template')
if (options.module === 'module1') {
// options.module 可以訪問上面問題陣列的第一個物件的值，預設為: 'module0'
console.log(`Your choice is ${options.module}`)
}
if (options.moduleName === 'myModule') {
// options.moduleName 可以訪問到使用者從控制檯輸入的文字
console.log(`Your input is ${options.moduleName}`)
}
}
0x05 實戰
上面的程式碼筆者準備了一個空架子：
大家可以先 clone 下來，然後跑一下感受一下效果。
直接跑筆者的倉庫
vue create --preset savokiss/vue-preset-template preset-demo
clone下來跑原生代碼
vue create --preset ./vue-preset-template preset-demo
好啦，距離釋出自己的 專案模板只有一步之遙啦~
那就是： 填充 template 資料夾的內容
其實直接把專案中用到的檔案放進去就可以了，需要注意的是以 . 開頭的檔案以及 scss 檔案寫法不太一樣，具體可以看下面的參考專案
0x06 參考專案
筆者整理了兩個 preset，歡迎 star 哈
- PC端專案模板： vue-preset-pc
- 移動端專案模板： vue-preset-mobile