前端小白成长之14--plop

具体步骤

一.项目根目录下yarn add plop --dev

二.要在根目录新建plopfile.js（plop入口文件需要导出一个函数，此函数接受一个plop对象，用于创建生成器任务）

module.exports = plop => {
  plop.setGenerator('component', {//这里定义生成器的名字component
    description: 'application component',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: 'component name'
      }
    ],
    actions: [
      {
        type: 'add',//代表添加文件
        path: 'src/components/{{name}}/{{name}}.js',
        templateFile: 'plop-templates/component.js.hbs'//添加的模板
      },
      {
        type: 'add',
        path: 'src/components/{{name}}/{{name}}.css',
        templateFile: 'plop-templates/component.css.hbs'
      },
      {
        type: 'add',
        path: 'src/components/{{name}}/{{name}}.test.js',
        templateFile: 'plop-templates/component.test.js.hbs'
      }
    ]
  })
}

三. plop-templates

根目录创建模板文件夹

里面都是作为模板存在，plopfile.js中templateFile属性值就是这里面找

四.配置好plopfile.js，就可以命令行输入yarn plop component(component是上面自己定义生成器的名字)

自动生成和模板一样的文件夹及其内部文件，这里name自定义输入clover，生成就是clover，src/components/{{name}}/{{name}}.js