首页 > 其他 > 详细

前端自动化工具 - Plop 使用

时间:2021-05-06 15:18:17      阅读:31      评论:0      收藏:0      [点我收藏+]

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 为生成器定义名称

 

前端自动化工具 - Plop 使用

原文:https://www.cnblogs.com/faint33/p/14734790.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!