Plop是一个小而美的脚手架工具,它主要用于创建项目中特定类型的文件,Plop主要集成在项目中使用,帮助我们快速生成一定规范的初始模板文件。比如我们去书写Vue的组件,如果每次都是手动去写组件的初始内容,会比较繁琐,有可能会出错,且每个人写的规范可能都不一样。这时候我们就可以用Plop来创建规范的Vue组件的初始内容,方便快捷,易于管理且规范。
plop: https://www.npmjs.com/package/plop
安装
yarn add plop --dev
安装完成后在项目根目录下创建 plopfile.js
文件
const promptDirectory = require('inquirer-directory')
const pageGenerator = require('./template/page/prompt')
const apisGenerator = require('./template/apis/prompt')
module.exports = function (plop) {
plop.setPrompt('directory', promptDirectory)
plop.setGenerator('page', pageGenerator)
plop.setGenerator('apis', apisGenerator)
}
创建模板文件
位置 /template/page/
index.hbs
<template>
<section>
</section>
</template>
<script>
export default {
name: '{{ name }}',
data() {
return {}
},
methods: {
}
}
</script>
prompt.js
const path = require('path')
const notEmpty = (name) => {
return (v) => {
if (!v || v.trim === '') {
return `${name} is required`
} else {
return true
}
}
}
module.exports = {
description: 'generate vue template',
prompts: [
{
type: 'directory',
name: 'from',
message: 'Please select the file storage address',
basePath: path.join(__dirname, '../../src/views')
},
{
type: 'input',
name: 'fileName',
message: 'file name',
// 表单校验
validate: notEmpty('fileName')
},
{
type: 'input',
name: 'name',
message: 'name',
validate: notEmpty('name')
},
// 当存在多选的情况可以使用checkbox类型
//{
// type: 'checkbox',
// name: 'types',
// message: 'api types',
// choices: () => {
// return ['create', 'update', 'get', 'delete', 'check', 'fetchList', 'fetchPage'].map((type) => ({
// name: type,
// value: type,
// checked: true
// }))
// }
//}
],
actions: (data) => {
const { fileName, name, from } = data
const filePath = path.join('src/views', from, fileName + '.vue')
const actions = [
{
type: 'add',
path: filePath,
templateFile: 'template/page/index.hbs',
data: { name }
}
]
return actions
}
}
示例
module.exports = plop => {
// setGenerator可以设置一个生成器,每个生成器都可用于生成特定的文件
// 接收两个参数,生成器的名称和配置选项
plop.setGenerator('component', {
// 生成器的描述
description: 'create a component',
// 发起命令行询问
prompts: [{
// 类型
type: 'input',
// 接收变量的参数
name: 'name',
// 询问提示信息
message: 'component name',
// 默认值
default: 'MyComponent'
}],
// 完成命令行后执行的操作,每个对象都是动作对象
actions: [{
// 动作类型
type: 'add',
// 生成文件的输出路径
path: 'src/components/{{name}}/{{name}}.vue',
// template 模板的文件路径,目录下的文件遵循hbs的语法规则
templateFile: 'plop-templates/component.vue.hbs'
}]
})
}
setGenerator
plop对象下有一个setGenerator方法,这个方法用于创建一个生成器,主要就是帮助我们去生成特定的文件,setGenerator接收两个参数name
和option
- name:是该生成器的名称,也是执行该生成器的命令
- option:是一个对象,是生成器的配置选项
执行生成器
下面该示例就是执行我们创建的生成器component
option、description
生成器的描述信息
prompts
将来生成器工作时发起的询问,它是一个数组,每个对象都是一次询问
prompts: [{
// 类型
type: 'input',
// 用于接收用户输入参数的变量名,将来也会使用到hbs模板中
name: 'name',
// 询问提示信息
message: 'component name',
// 默认值
default: 'MyComponent'
}],
actions
这是命令行询问结束后执行的操作,它同样是一个对象数组,每个对象都是一个动作对象。
actions: [{
// 动作类型
type: 'add',
// 生成文件的输出路径
path: 'src/components/{{name}}/{{name}}.vue',
// template 一般放置再根目录的plop-templates目录下,下面的文件遵循hbs的语法规则
templateFile: 'plop-templates/component.vue.hbs'
}]