Plop

Plop 是一款小型的脚手架工具。主要用于创建项目中特定类型文件的小工具，类似 Yeoman 中的 Sub Generator，但一般不会独立使用，一般集成到项目当中，用于自动化创建同类型的文件（一般不会用 Plop 去创建项目，而是用它创建项目中的文件）。

Plop 具体使用

安装 Plop

yarn add plop --dev

新建 plopfile.js 文件

该文件为 plop 入口文件，需要导出一个函数，此函数接收一个 plop 对象，用于创建生成器任务

// 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 }}.test.js',
            templateFile: 'plop-templates/component.test.hbs',
        }, {
            type: 'add',
            path: 'src/components/{{ name }}/{{ name }}.css',
            templateFile: 'plop-templates/component.css.hbs',
        }]
    })
}

创建模板文件

1. 新建模板文件夹 —— plop-templates 文件夹；

2. 新建模板文件（模板遵循 handlebar 的模板语法，也可以使用 {{}} 语法插入数据） —— component.hbs, component.css.hbs, component.test.hbs

   • component.hbs

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

   • component.css.hbs

   .{{ name }}-box {
       width: 100vw;
       height: 100vh;
   }
   

   • 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)
   })
   

使用

yarn plop component # component 为生成器名字

总结

• 将 plop 模块作为项目开发依赖安装
• 在项目根目录下创建一个 plopfile.js 文件
• 在 plopfile.js 文件中定义脚手架任务
• 编写用于生成特定类型文件的模板
• 通过 Plop 提供的 CLI 运行脚手架任务