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 %>

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

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

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

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

发布插件

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

  • @vue/cli-service 发现;

  • 被其它开发者搜索到;

  • 通过 vue add <name>vue invoke <name> 安装下来。

使用命令:

vue add <name>

安装命令:

vue invoke <name>

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