Plop

介绍：

• 创建项目中特定类型的文件的工具
• 每创建一个文件夹 对应自动生成3个文件 js css html

1. 使用

1. 安装plop

   yarn add plop --dev
   

2. 在当前项目下创建一个plopfile.js的文件

   /*
     plopfile.js
     Plop 入口文件，需要导出一个函数
     此函数接收一个 plop 对象，用于创建生成器任务
   */
   module.exports = plop => {
     plop.setGenerator('component', { // 设定一个生成器
       description: 'create a component', // 对这个生成器的描述
       prompts: [ // 提示
         {
           type: 'input', // 交互类型
           name: 'name', // 参数名称
           message: 'component name', // 交互提示
           default: 'MyComponent' // 默认值
         }
       ],
       actions: [
         {
           type: 'add', // 代表添加文件
           path: 'src/components/{{name}}/{{name}}.js', // {{}}双大括号内设置动态参数
           templateFile: 'plop-templates/component.hbs' // 模板所在地址使用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.hbs'
         }
       ]
     })
   }
   

   component.css.hbs
   component.hbs
   component.test.hbs

2. 运行

yarn plop component

# 其中component是生成器，这样就可以生成对应的生成器