Plop快速入门
什么是Plop
Plop是一个小而美的脚手架工具，它主要用于创建项目中特定类型的文件，Plop主要集成在项目中使用，帮助我们快速生成一定规范的初始模板文件。比如我们去书写Vue的组件，如果每次都是手动去写组件的初始内容，会比较繁琐，有可能会出错，且每个人写的规范可能都不一样。这时候我们就可以用Plop来创建规范的Vue组件的初始内容，方便快捷，易于管理且规范。
基本使用
项目目录
首先打开我们的项目，这里我的项目是随便写的，不具参考意义
安装Plop
首先我们需要在项目中安装Plop模块
yarn add plop --dev
然后等待安装完成即可
plopfile.js
然后再项目跟目录下创建一个plopfile.js文件，这是plop工作时的入口文件，该文件需要导出一个函数，并且该函数接收一个plop对象
示例
// plop 的入口文件
// 需要导出一个函数，函数接收一个plop对象，用于创建生成器任务
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'
}]
path
path中的{{name}}是一种变量书写形式，它对应的就是prompts对象数组中的name接收的值，假如name=‘Test1’，那这里的path就相当于scr/components/Test1/Test1.vue
templateFile
templateFile 就是该文件的模板文件路径
我们在模板中同样可以使用{{变量名称}}，的方式来传入我们在prompts中接收的变量，如
多个动作
同样的，如果我们希望生成多个文件，就可以配置多个动作对象和对应的模板即可即可，如
我们增加一个css文件
actions: [{
type: 'add',
path: 'src/components/{{name}}/{{name}}.vue',
templateFile: 'plop-templates/component.vue.hbs'
}, {
type: 'add',
path: 'src/components/{{name}}/index.css',
templateFile: 'plop-templates/component.css.hbs'
}]
使用
plopfile.js
// plop 的入口文件
// 需要导出一个函数，函数接收一个plop对象，用于创建生成器任务
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 一般放置再根目录的plop-templates目录下，下面的文件遵循hbs的语法规则
templateFile: 'plop-templates/component.vue.hbs'
}, {
type: 'add',
path: 'src/components/{{name}}/index.css',
templateFile: 'plop-templates/component.css.hbs'
}]
})
}
执行
目录结果