1、将plop模块作为项目开发安装依赖

    1. yarn add plop --dev

    2、在项目根目录下创建一个plopfile.js 文件‘
    3、在plopfile.js 文件中定义脚手架任务

    1. // plop 入口文件，需要导出一个函数
    2. // 此函数接受一个prop对象，用于创建生成器任务
    4. module.exports = plop => {
    5.     plop.setGenerator('component', {
    6.         description: 'creat a component',
    7.         prompts: [
    8.             {
    9.                 type: 'input',
    10.                 name:'name',
    11.                 message:'component name',
    12.                 default:'MyComponent'
    13.             }
    14.         ],
    15.         actions:[  // 成功之后的动作
    16.             {
    17.                 type:'add', //代表添加文件
    18.                 path:'src/comoponents/{{name}}/{{name}}.js',
    19.                 templateFile:'plop-templates/component.hbs'
    20.             },
    21.             {
    22.                 type:'add', //代表添加文件
    23.                 path:'src/comoponents/{{name}}/{{name}}.css',
    24.                 templateFile:'plop-templates/component.css.hbs'
    25.             },
    26.             {
    27.                 type:'add', //代表添加文件
    28.                 path:'src/comoponents/{{name}}/{{name}}.test',
    29.                 templateFile:'plop-templates/component.test.hbs'
    30.             },
    32.         ]
    33.     })
    34. }

    编写用于生成特定类型的文件模板

    1. import React from 'react';
    3. export default () =>(<div className="{{name}}">
    4.     <h1>{{name}} Component</h1>
    5. </div>)

    最后通过plop提供的CLI运行脚手架任务

    1. yarn plop component(这个要跟设置上面的生成器的名字一样,生成器定义了component  就 运行 component)