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

Plop 简介

是一个前端脚手架工具，最大的好处是通过输入命令创建相同模板的css,js，提高重复操作的效率

 Plop 的基本使用

基于一个react 项目 

• yarn add plop --dev  将 plop 安装在项目中

yarn add plop --dev

• 在项目根目录新建一个 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'
        },
        {
          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.hbs ， component.css.hbs，component.test.js.hbs
•  
• component.hbs:

• //component.hbs
  
  import React from 'react';
  
  export default () => (
    <div className="{{name}}">
      <h1>{{name}} Component</h1>
    </div>
  )

  文件内容举例:
  component.css.hbs 

  //component.css.hbs
  
  .{{name}} {
  
  }
  

  component.test.hbs 

  //component.test.js.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);
  });
  

   

• yarn plop component 创建了一个footer模板