vue cli3 Generator插件开发教程

  • Jul, 05 2019
  • Vue


description: vue cli3 Generator插件开发教程

vue cli3 Generator插件开发教程

定制生成插件

vue cli3提供了扩展定制化插件API。

CLI插件是一个可以为@vue/cli项目添加额外特性的npm包。

它始终包含一个Service插件作为其主要导出,可选包含一个 Generator 和一个 Prompt 文件

当前文档讲述如何编写一个Generator插件。

Generator插件用于向package.json文件注入额外的依赖或字段,并向项目中添加或删除文件。

一个Generator插件的目录解构是这样的:

.
├── 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)

    // 复制并用 ejs 渲染 `./template` 内所有的文件
    api.render('./template')

    // 传入api.render回调函数,可以删除文件或者修改文件,其中render函数依然使用ejs模板
    api.render((files, render) => {
        delete files['src/main.js']
        files['src/main.ts'] = render('./template/main.ts')
    })
​
    if (options.foo) {
        // 有条件地生成文件
    }
})

Generator的渲染模板:

当调用api.render('./template')时,该Generator插件会使用 EJS渲染./template下的所有文件。

还可以使用yaml前置信息继承并替换已有的模板文件的一部分:

---
extend: '@vue/cli-service/generator/template/src/App.vue'   // 继承文件
replace: !!js/regexp /<script>[^]*?<\/script>/              // 替换规则
---<script>
export default {
  // 替换默认脚本
}
</script>

也可以多出替换,你需要将要替换的字符串用<%# REPLACE %><%# END_REPLACE %> 块包裹起来:

---
extend: '@vue/cli-service/generator/template/src/App.vue'
replace:
  - !!js/regexp /欢迎来到你的 Vue\.js 应用/   // 第一个替换规则
  - !!js/regexp /<script>[^]*?<\/script>/  // 第二个替换规则
---<%# REPLACE %>      // 对应第一个替换规则
替换欢迎信息
<%# END_REPLACE %><%# REPLACE %>     // 对应第二个替换规则
<script>
export default {
  // 替换默认脚本
}
</script>
<%# END_REPLACE %>

{% hint style="warning" %}
注意:如果你想渲染一个以点开头的模板文件(例如:.env),需要把文件名开头的点改为下划线(因为以点开头的文件会在插件发布到npm的时候忽略):

 _env

 # 调用api.render('./_env')后会在项目目录中渲染为:

 .env

当你想渲染以下划线开头的文件时,需要把文件名开头再添加一个下划线:

 __env.less

 # 调用api.render('./__env.less')后会在项目目录中渲染为:

 _env.less

{% endhint %}

发布插件

为了让一个 CLI 插件能够被其它开发者使用,你必须遵循 vue-cli-plugin-<name> 的命名约定将其发布到 npm 上。插件遵循命名约定之后就可以:

  • @vue/cli-service 发现;
  • 被其它开发者搜索到;
  • 通过 vue add <name>vue invoke <name> 安装下来。

使用命令:

vue add <name>

安装命令:

vue invoke <name>

至此完成,vue cli Generator插件已经发布成功并且可以使用了