Plop-一个小而美的脚手架工具

功能:用于自动化创建及项目中特定同类型的文件
具体使用:

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

yarn add plop --dev

• 在项目根目录下创建一个plopfile.js
• 在plop file.js文件中定义脚手架任务
  举例:

//Plop入口文件 需要导出一个函数
//此函数接收一个plop对象,用于创建生成器任务
module.exports = plop => {
    // 第一个参数生成器的名字,第二个参数生成器的描述
    plop.setGenerator('component',{
        description: 'create a component',
        prompts: [
            {
                type: 'input',
                name: 'name',
                message: 'component name',
                default: 'MyCompnent'
            }
        ],
        //完成命令行后需要执行的动作 可以是一个数组
        actions: [
            {
                type: 'add', //代表添加文件
                path: 'src/components/{{name}}/{{name}}.js',
                templateFile: 'plop-templates/component.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'
            },
        ]
    })
}

• 编写用于生成特定类型文件的模板
  在项目根目录下创建文件夹-plop-templates,创建一份模板文件
  
  文件内容举例:
  component.css.hbs

.{{name}}{
    
}

component.hbs:

import React form 'react'

export default () => (
    <div className="{{name}}">
        <h1>{{name}} Component</h1>
    </div>
)

component.test.hbs

import React from 'react';
import ReactDOM from 'react-dom';
import {{name}} from './{{name}}';

it('renders without crashing',()=>{
    const div = document.createElement('div');
    ReactDOM.render(<{{name}}/>,div);
    ReactDOM.unmountComponentAtNode(div);
})

• 通过Plop提供的CLI运行脚手架任务
  
  举例:

yarn plop component