Plop

「这是我参与11月更文挑战的第24天，活动详情查看：2021最后一次更文挑战」

前言

除了Yeoman之外的这种大型的脚手架根据，还有其他的小型的脚手架根据也很好使用，给大家安利一款Plop

一款小而美的脚手架工具

Plop其实是一款主要用于创建项目中特定项目类型的小工具，一般我们不会独立使用，一般我们会集成到项目中

Plop的基本使用

接下来让我们在react的基础项目中进行一些plop的演示

我们需要将Plop安装我们的开发依赖中

npm add plop --dev or yarn add plop --dev

安装过后，我们需要在项目根目录下新建一个plopfile.js的文件

plopfile.js是Plop的入口文件，需要导出一个函数
此函数接受一个plop对象，用于创建生成器任务
plop中有setGenerator方法，他接受两个参数（生成器名称，生成器选项）
代码示例

// `plopfile.js`是`Plop`的入口文件，需要导出一个函数
//  此函数接受一个`plop`对象，用于创建生成器任务
module.exports = plop => {
  plop.setGenerator('components', { 
    description: '创建一个组件',
    prompts: [{
      type: 'input',
      name: 'name', 
      // 给出的提示
      message: '组件名称',
      // 默认答案
      default: 'Mycomponent'
    }],
    // 命令函交互执行过后的操作 
    actions: [{
      type: 'add', // 代表添加文件
      path: 'src/components/{{name}}/{{name}}.js',
      // 添加模板con
      templateFile: ''
    }]
  })
}

当然 templateFile中也是需要进行填写的，我们在根目录中创建plop-templates\component.hbs文件

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

为templateFile进行赋值

...
templateFile: 'plop-templates/component.hbs'
...

一切准备就绪，在完成了plop任务定义过后我们可以回到命令行

 yarn plop components

注意这里的 components是我们对应的定义好的组件的名称

回车之后，我们看见会出现我们所定义的提示：

输入我们所要定义的文件:

ohhhhhhhhh！创建成功是我们所需要的内容

为生成器添加多个模板

因为在我们的项目中，组件不可能就一种类型，react中是由多个文件组成的，我们先创建几个对应的模板

component.hbs 上面已经有了，就不复制了
component.css.hbs
```
. {{name}} {

}
```

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, true)
  ReactDOM.unmountComponentAtNode(div)
})

有了些之后我们就对actions那边进行一些改造，添加

// 命令函交互执行过后的操作 
actions: [
...
{
  type: 'add', // 代表添加文件
  path: 'src/components/{{name}}/{{name}}.css',
  // 添加模板con
  templateFile: 'plop-templates/component.css.hbs'
},
{
  type: 'add', // 代表添加文件
  path: 'src/components/{{name}}/{{name}}.test.js',
  // 添加模板con
  templateFile: 'plop-templates/component.test.hbs'
}]

再次运行即可

总结一些

我们在项目中使用plop需要以下几个步骤

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