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