摘要：以下也將以進(jìn)行展開說明。這個(gè)鍵值來自于在命令行界面與用戶交互的操作結(jié)果。鍵名對(duì)應(yīng)的值為命令行交互中得到的數(shù)據(jù)。關(guān)于項(xiàng)目模板的開發(fā)涉及到的問題差不多就介紹完了，為自己或團(tuán)隊(duì)開發(fā)一份專屬的吧原文深度定制團(tuán)隊(duì)自己的

眾所周知，使用 vue-cli 可以快速初始化一個(gè)基于 Vue.js 的項(xiàng)目，官方提供了 webpack、pwa、browserify-simple 等常用 templates。

當(dāng)開發(fā)一個(gè)獨(dú)立項(xiàng)目的時(shí)候，使用官方提供的 template 確實(shí)非常方便，省去了繁瑣的依賴安裝配置、webpack 配置，甚至連項(xiàng)目結(jié)構(gòu)也不用多加考慮。

但是，當(dāng)我們需要開發(fā)多個(gè)系統(tǒng)，每個(gè)系統(tǒng)相對(duì)獨(dú)立但又有一些配置、依賴或邏輯相互通用的時(shí)候（例如集群的多后臺(tái)系統(tǒng)），每次使用官方提供的 template 初始化項(xiàng)目之后，都需要進(jìn)一步調(diào)整（添加依賴、修改配置、增加通用組件等等），這顯然是十分麻煩的。
本著懶惰是第一生產(chǎn)力的初衷，我們需要定制一份自己的 template，以便我們...額...偷懶哈~

在開始定制我們自己的 Vue template 前，我們需要了解一些前置知識(shí)：

模板結(jié)構(gòu)
　　首先我們先來了解模板的主要結(jié)構(gòu)，模板結(jié)構(gòu)很簡單，主要包括兩個(gè)部分：

template 該目錄用于存放模板文件，初始化項(xiàng)目生成的文件來自于此。

meta.js / meta.json 用于描述初始化項(xiàng)目時(shí)命令行的交互動(dòng)作。

Metalsmith
　　Metalsmith 在渲染項(xiàng)目文件流程中角色相當(dāng)于 gulp.js，可以通過添加一些插件對(duì)構(gòu)建文件進(jìn)行處理，如重命名、合并等。

download-git-repo
　　使用 vue-cli 初始化項(xiàng)目時(shí)會(huì)使用該工具來下載目標(biāo)倉庫。默認(rèn)的 webpack 等模板直接下載 vue-templates 中對(duì)應(yīng)的模板倉庫。
　　自定義的模板也可以是一個(gè) GitHub 倉庫，使用如下命令來初始化項(xiàng)目：

vue init username/repo my-project

其中 username 為自定義模板倉庫所在的 GitHub 用戶或組織名，repo 為倉庫名。

Inquirer.js
　　vue-cli 在模板倉庫下載完成后，將通過 Inquirer.js 根據(jù)模板倉庫中的 meta.js 或 meta.json 文件中的設(shè)置，與用戶進(jìn)行一些簡單的交互以確定項(xiàng)目的一些細(xì)節(jié)，如下圖：

該交互配置是可選的，當(dāng)項(xiàng)目中沒有 meta.js 或 meta.json 文件時(shí)，模板倉庫下載完成后將直接進(jìn)入模板構(gòu)建階段。

Handlebars.js
　　在通過命令行交互確定了項(xiàng)目初始化的細(xì)節(jié)后，就該進(jìn)入最后一道工序，按照模板初始化我們的項(xiàng)目啦！(≧▽≦)/
　　這里 vue-cli 選用的是 Handlebars.js —— 一個(gè)簡單高效的語義化模板構(gòu)建引擎。

　　畫了一張圖，更有助于理清這些依賴在 vue-cli 初始化項(xiàng)目時(shí)的相互關(guān)聯(lián)：

定制模板主要圍繞著命令行交互（Inquirer.js）與模板文件開發(fā)（Handlebars.js）這兩部分。

　　由于 meta.js 相當(dāng)于模板項(xiàng)目的配置文件（雖然非必選），所以這里先看看它主要能干些啥。
　　設(shè)置都在 meta.js 或 meta.json 中配置，推薦使用 meta.js，更靈活一些。以下也將以 meta.js 進(jìn)行展開說明。
　　meta.js 一共可包含如下幾個(gè)字段，簡單列一下各字段功能：

helpers : 自定義 Handlebars.js 的輔助函數(shù)

prompts : 基于 Inquirer.js 的命令行交互配置

filters : 根據(jù)命令行交互的結(jié)果過濾將要渲染的項(xiàng)目文件

metalsmith : 配置 Metalsmith 插件，文件會(huì)像 gulp.js 中的 pipe 一樣依次經(jīng)過各個(gè)插件處理

completeMessage : 將模板渲染為項(xiàng)目后，輸出一些提示信息，取值為字符串

complete : 與 completeMessage 功能相同，二選其一，取值為函數(shù)，函數(shù)最后需返回輸出的字符串

　　命令行交互主要是 meta.js 中 prompts 字段的配置，詳細(xì)的配置可以閱讀 Inquirer.js 的 README.md，這里說一下常用的交互配置：

// meta.js
module.export = {
  // ...
  "prompts": {
    "isCustomName": {
      "type"   : "confirm",
      "message": "是否自定義系統(tǒng)名稱？",
    },
    "sysName": {
      "type"    : "input",
      "when"    : "isCustomName",
      "default" : "默認(rèn)系統(tǒng)名稱",
      "message" : "請(qǐng)輸入系統(tǒng)名稱:",
      "required": true,
      "validate": function (val) {
        if (!val) return "(?) 請(qǐng)輸入系統(tǒng)名稱，該名稱將設(shè)為 index.html 的 title";
        return true;
      },
    },
    // ...
  },
}

字段說明：

isCustomName 與 sysName : 交互字段名稱，可在后續(xù)條件交互或模板渲染時(shí)通過該字段讀取到交互結(jié)果

type : 交互類型，有 input, confirm, list, rawlist, expand, checkbox, password, editor 八種類型

message : 交互的提示信息

when : 進(jìn)行該條件交互的先決條件，在該例子中，sysName 這個(gè)交互動(dòng)作只在 isCustomName 交互結(jié)果為真時(shí)才會(huì)出現(xiàn)

default : 默認(rèn)值，當(dāng)用戶輸入為空時(shí)，交互結(jié)果即為此值

required : 默認(rèn)為 false，該值是否為必填項(xiàng)

validate : 輸入驗(yàn)證函數(shù)

注：示例中 default required validate 三個(gè)字段存在邏輯問題，僅為舉例方便放到一起。

　　在模板編寫中，我們可以用 Mustache 語法在任何文本類型的文件中輸出在命令行交互中得到的一些數(shù)據(jù)：

// dev.js
export default {
  //...
  token: "{{token}}",
  //...
};

　　以 {%raw%}{{xxx}}{%endraw%} 即為一個(gè) Mustache 句法標(biāo)記。以上例子中 token 與 sysName 為匹配命令行交互數(shù)據(jù)對(duì)應(yīng)的鍵名。

對(duì) vue 有過了解的都知道，在模板標(biāo)簽中直接輸出實(shí)例上的數(shù)據(jù)也是用的 Mustache 語法。
如果定制 vue template 模板時(shí)不對(duì)這些數(shù)據(jù)做相應(yīng)處理，在最終輸出由模板初始化的項(xiàng)目時(shí)，這些與命令行交互得到的數(shù)據(jù)無法匹配的 Mustache 句法標(biāo)記會(huì)被移除。
此時(shí)我們需要使用反斜杠 {%raw%}{{xxx}}{%endraw%} 或者 {%raw%}{{{xxx}}}{%endraw%} 來跳過 Handlebars 的處理，直接輸出 {%raw%}{{xxx}}{%endraw%}

　　vue-cli 中為 Handlebars 預(yù)置了 if_eq 與 unless_eq 輔助函數(shù)，用于使用交互所得數(shù)據(jù)來處理模板中是否渲染的兩種邏輯關(guān)系，此外 Handlebars 中還內(nèi)置了 if、unless、each 等 輔助函數(shù)。

// sys.js
export default {
  {{#if_eq projType "admin"}}
  id: {{#if_eq sysId ""}}undefined{{else}}{{sysId}}{{/if_eq}},
  {{/if_eq}}
  name: "{{sysName}}",
};

　　如上，這里用了 if_eq 輔助函數(shù)，projType 代表將要匹配的鍵，"admin" 代表將要匹配的值。這個(gè)鍵值來自于在命令行界面與用戶交互的操作結(jié)果。該栗子中，當(dāng)命令行交互數(shù)據(jù)中 CLI[projType] == "admin" 時(shí)，將在 sys.js 文件的導(dǎo)出數(shù)據(jù)中輸出 id 字段；id 的值來自一個(gè)嵌套的 if_eq 輔助函數(shù)，當(dāng) CLI[sysId] == "" 時(shí)，id 將被設(shè)置為 undefined 否則 （{%raw%}{{else}}{%endraw%}）輸出 CLI[sysId] 命令行交互所得數(shù)據(jù)中的 sysId。

輔助函數(shù)使用語法： {%raw%}{{{%endraw%}# + 函數(shù)名 + " "（空格）+ 以空格分隔的參數(shù)列表 + }}
以空格分隔的參數(shù)列表：未用引號(hào)包裹的參數(shù)名將被將為自動(dòng)取值為命令行交互結(jié)果中對(duì)應(yīng)的數(shù)據(jù)

　　有時(shí)候現(xiàn)有的輔助函數(shù)可能不能滿足我們的需求，通過 mate.js 中的 helpers 字段我們可以自定義輔助函數(shù)：

// mate.js
module.exports = {
  "helpers": {
    "neither": function (k, v1, v2, options) {
      if (k !== v1 && k !== v2) {
        return options.fn(this);
      }
      return options.inverse(this);
    },
  },
  //...
}

　　輔助函數(shù)可以接受若干的參數(shù)，最后一個(gè)參數(shù) options 為輔助函數(shù)的鉤子，調(diào)用 options.fn(this) 即輸出該輔助函數(shù)運(yùn)算結(jié)果為真時(shí)的內(nèi)容，反之調(diào)用 options.inverse(this) 則輸出 {%raw%}{{else}}{%endraw%} 的內(nèi)容（如果有的話）。
　　現(xiàn)在我們可以在模板中直接使用 neither 輔助函數(shù)了：

{{#neigher sysType "admin" "mobile"}}
isAdmin  = false
isMobile = false
{{else}}
isAdminOrMobile = true
{{/neigher}}

　　輔助函數(shù)只可以控制文件內(nèi)一部分內(nèi)容的輸出與否，有時(shí)候我們需要根據(jù)交互結(jié)果控制某些文件本身是否輸出。
　　在 mate.js 中的 filters 字段中進(jìn)行相應(yīng)的設(shè)置，就可以達(dá)到控制文件輸出的效果：

module.exports = {
  //...
  "filters": {
    "project/config/test.env.js": "unit || e2e",
    "project/src/router/**/*": "router"
  },
  //...
}

　　filters 中鍵名是要控制輸出的文件的路徑，可使用字面量，也可使用 簡化的 glob 表達(dá)式。鍵名對(duì)應(yīng)的值為命令行交互中得到的數(shù)據(jù)。

　　在模板項(xiàng)目比較復(fù)雜或是有特殊需求的時(shí)候，比如：

按照條件不同需要渲染兩個(gè)文件名相同但內(nèi)容完全不同的文件

模板模塊化，多個(gè)模板文件拼接渲染為一個(gè)項(xiàng)目文件

使用 GZip 壓縮一些非源碼資源

　　可以通過 mate.js 中的 metalsmith 字段配置相關(guān)插件來實(shí)現(xiàn)豐富的文件操作：

var renamer = require("metalsmith-renamer")
module.exports = {
  //...
  "metalsmith": function(metalsmith, opts, helpers) {
    metalsmith.use(renamer({
      index: {
        pattern: "project/**/+(Mobile|Admin)Index.vue",
        rename: function(fileName) {
          return "Index.vue";
        }
      },
      config: {
        pattern: "project/src/+(mobile|admin)Config.js",
        rename: "config.js"
      },
      //...
    }))
  },
  //...
}

　 以上是 metalsmith-renamer 插件的簡單使用，更多插件可以在這里查找

使用 metalsmith 插件請(qǐng)注意：由于 vue-cli 在下載完成模板倉庫后并沒有 npm install 安裝模板的項(xiàng)目依賴這一操作，所以在打包模板倉庫的時(shí)候也需要將依賴目錄 node_modules 一同打包，metalsmith 的插件都很精簡，一般不會(huì)有什么嵌套依賴。不過還是建議在使用前查看一下插件的相關(guān) Github 倉庫。

　　關(guān)于 vue 項(xiàng)目模板的開發(fā)涉及到的問題差不多就介紹完了，為自己或團(tuán)隊(duì)開發(fā)一份專屬的 Vue Template 吧！

原文: 深度定制團(tuán)隊(duì)自己的 Vue template