plop:可以通过命令行去生成、处理文件模板代码等.
使用条件参考：项目的每个模块的结构骨架都非常相似，引入模版内容相同就可以使用Plop来实现自动化了，Plop旨在根据模板文件自动化创建组件。

一、安装plop

  • 安装到项目

    1
    npm install --save-dev plop

  • 全局安装plop（可选，建议安装方便使用）

    1
    npm install -g plop

如果没有全局安装plop，那么要在package.json中的script中增加脚本命令：

1
2
3
"scripts": {
    "p": "plop"
 },

二、创建路由Generator

1、 根目录创建一个plop-template文件夹，并创建一个router目录作为路由的generator,并创建generator的js文件和hbs模板（Handlebars模板语法）
image.png

##三、 generator之plop.js编写

  • !!plop.js即prompt.js文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    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模板文件
    !!模版文件作用：编写生成文件的模版内容，可自己根据项目需求进行定义。

    1
    2
    3
    4
    5
    6
    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
    1
    2
    3
    4
    5
    const routerGenerator = require('./dev-scripts/plop-templates/router/prompt');

    module.exports = function (plop) {
        plop.setGenerator('router', routerGenerator);
    };

##五、 运行plop、生成文件

  • 执行步骤一、的脚本命令
    1
    $ npm run p

image.png

  • 输入文件名
    !!在配置的路径下生成对应的文件
    image.png

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // util.js
    exports.notEmpty = (name) => {
        return (v) => {
            if (!v || v.trim === '') {
                return `${name} is required`;
            } else {
                return true;
            }
        };
    };

  • 模版内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    require('module-alias/register');
    import BaseController from '@base/baseController';
    import { AController } from '@lib/aRouter';
    const __CURCONTROLLER = __filename.substr(__filename.indexOf('/app/controller')).replace('/app/controller', '').split('.')[0].split('/').filter(item => item !== 'index').join('/').toLowerCase();


    @AController(__CURCONTROLLER)
    export default class {{ name }}Controller extends BaseController {
    }

生成文件即是模版的内容

image.png

总结：大功告成✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️