plop:可以通过命令行去生成、处理文件模板代码等.
使用条件参考：项目的每个模块的结构骨架都非常相似，引入模版内容相同就可以使用Plop来实现自动化了，Plop旨在根据模板文件自动化创建组件。
一、安装plop
- 安装到项目
npm install --save-dev plop
- 全局安装plop（可选，建议安装方便使用）
npm install -g plop
如果没有全局安装plop，那么要在package.json中的script中增加脚本命令：
"scripts": {
"p": "plop"
},
二、创建路由Generator
1、 根目录创建一个plop-template文件夹，并创建一个router目录作为路由的generator,并创建generator的js文件和hbs模板（Handlebars模板语法）
image.png
三、 generator之plop.js编写
- !!
plop.js即prompt.js文件
const {notEmpty} = require('../util.js');
module.exports = {
description: 'generate a controller', //描述这个generate的作用
prompts: [{
type: 'input', // 问题的类型
name: 'pathName', // 问题对应得到答案的变量名，可以在acitons中使用该变量
message: '文件名称', // 在命令行中的问题
validate: notEmpty('pathName')
}],
actions: (data) => {// 这里可以通过data获取输入的pathname
let name = data.pathName.split('/');
name = name[name.length - 1];
name[0] = name[0].toLocaleUpperCase();
const actions = [
{
type: 'add', // 操作类型 添加文件
path: `app/controller/${data.pathName}.ts`, //添加的文件的路径
templateFile: 'dev-scripts/plop-templates/router/index.hbs', //模版文件的路径
data: {
name
}
}
];
return actions;
}
};
- hbs模板文件
!!模版文件作用：编写生成文件的模版内容，可自己根据项目需求进行定义。
require('module-alias/register');
import BaseController from '@base/baseController';
import { AController } from '@lib/aRouter';
export default class {{ name }}Controller extends BaseController {
}
四、plop使用
在项目的根目录下创建plopfile.js文件
- 设置到plopfile.js
const routerGenerator = require('./dev-scripts/plop-templates/router/prompt');
module.exports = function (plop) {
plop.setGenerator('router', routerGenerator);
};
五、 运行plop、生成文件
- 执行步骤一、的脚本命令
$ npm run p
image.png
-
输入文件名
!!在配置的路径下生成对应的文件
image.png -
生成文件即是模版的内容
image.png
image.png
大功告成✌️✌️✌️
