定制生成插件

vue cli3提供了擴(kuò)展定制化插件API。

CLI插件是一個(gè)可以為@vue/cli項(xiàng)目添加額外特性的npm包。

它始終包含一個(gè)Service插件作為其主要導(dǎo)出，可選包含一個(gè) Generator 和一個(gè) Prompt 文件。

當(dāng)前文檔講述如何編寫一個(gè)Generator插件。

Generator插件用于向package.json文件注入額外的依賴或字段，并向項(xiàng)目中添加或刪除文件。

一個(gè)Generator插件的目錄解構(gòu)是這樣的：

.
├── README.md
├── generator  # generator 插件的文件夾
    ├── index.js  # generator插件
├── index.js      # service 插件
└── package.json

Generator插件示例代碼：

// index.js
module.exports = (api, options, rootOptions, invoking) => {
    const pkg = {
        scripts: {
            test: 'vue-cli-service test'
        },
        dependencies:{
            'vue-router':'^3.0.1',
        }
    }
    // 修改 `package.json` 里的字段
    api.extendPackage(pkg)
    
    // 復(fù)制并用 ejs 渲染 `./template` 內(nèi)所有的文件
    api.render('./template')
    
    // 傳入api.render回調(diào)函數(shù)，可以刪除文件或者修改文件,其中render函數(shù)依然使用ejs模板
    api.render((files, render) => {
        delete files['src/main.js']
        files['src/main.ts'] = render('./template/main.ts')
    })
?
    if (options.foo) {
        // 有條件地生成文件
    }
})

Generator的渲染模板：

當(dāng)調(diào)用api.render('./template')時(shí)，該Generator插件會(huì)使用 EJS渲染./template下的所有文件。

還可以使用yaml前置信息繼承并替換已有的模板文件的一部分：

---
extend: '@vue/cli-service/generator/template/src/App.vue'   // 繼承文件
replace: !!js/regexp /<script>[^]*?<\/script>/              // 替換規(guī)則
---
?
<script>
export default {
  // 替換默認(rèn)腳本
}
</script>

也可以多出替換，你需要將要替換的字符串用<%# REPLACE %> 和 <%# END_REPLACE %> 塊包裹起來：

---
extend: '@vue/cli-service/generator/template/src/App.vue'
replace:
  - !!js/regexp /歡迎來到你的 Vue\.js 應(yīng)用/   // 第一個(gè)替換規(guī)則
  - !!js/regexp /<script>[^]*?<\/script>/  // 第二個(gè)替換規(guī)則
---
?
<%# REPLACE %>      // 對(duì)應(yīng)第一個(gè)替換規(guī)則
替換歡迎信息
<%# END_REPLACE %>
?
<%# REPLACE %>     // 對(duì)應(yīng)第二個(gè)替換規(guī)則
<script>
export default {
  // 替換默認(rèn)腳本
}
</script>
<%# END_REPLACE %>

{% hint style="warning" %}
注意：如果你想渲染一個(gè)以點(diǎn)開頭的模板文件(例如：.env)，需要把文件名開頭的點(diǎn)改為下劃線(因?yàn)橐渣c(diǎn)開頭的文件會(huì)在插件發(fā)布到npm的時(shí)候忽略)：

 _env

 # 調(diào)用api.render('./_env')后會(huì)在項(xiàng)目目錄中渲染為：

 .env

當(dāng)你想渲染以下劃線開頭的文件時(shí)，需要把文件名開頭再添加一個(gè)下劃線：

 __env.less

 # 調(diào)用api.render('./__env.less')后會(huì)在項(xiàng)目目錄中渲染為：

 _env.less

{% endhint %}

發(fā)布插件

為了讓一個(gè) CLI 插件能夠被其它開發(fā)者使用，你必須遵循 vue-cli-plugin-<name> 的命名約定將其發(fā)布到 npm 上。插件遵循命名約定之后就可以：

• 被 @vue/cli-service 發(fā)現(xiàn)；
• 被其它開發(fā)者搜索到；
• 通過 vue add <name> 或 vue invoke <name> 安裝下來。

使用命令：

vue add <name>

安裝命令：

vue invoke <name>

至此完成，vue cli Generator插件已經(jīng)發(fā)布成功并且可以使用了