前端自动化工具 - Plop 使用

Plop  根据模板自动化创建文件的前端自动化架构解决方案

使用方式

1.  yarn add plop  --dev  安装在开发依赖当中

 

2.  根目录创建    plopfile.js 文件

这个文件是plop入口文件, 需要导出一个函数,这个函数接受一个plop对象,用于创建生成器任务

 

module.exports = plop => {
    plop.setGenerator('component', {
        description: 'create a component',
        prompts: [{
                type: 'input',
                name: 'path',
                message: 'path and file name',
                default: 'mycomponent'
            },{
                type: 'input',
                name: 'name',
                message: 'component name',
                default: 'MyComponent'
        }],
        actions: [{
            type: 'add',
            path: 'src/components/{{path}}/{{name}}.js',
            templateFile: 'plop-templates/component.hbs'
        }
        ,{
            type: 'add',
            path: 'src/components/{{path}}/{{name}}.vue',
            templateFile: 'plop-templates/component.vue.hbs'
        },{
            type: 'add',
            path: 'src/components/{{path}}/{{name}}.css',
            templateFile: 'plop-templates/component.css.hbs'
        }
    ]
    })
}

 

3. 编写模板文件  一般放在根目录下 plop-templates 里面

4.通过执行  yarn plop component  执行命令生成文件     component 为生成器定义名称