微型生成器框架 ---- Plop

欢迎关注前端早茶，与广东靓仔携手共同进阶

前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~

公众号作者：广东靓仔

1|0背景

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模板语法）

三、 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);
};