react项目中使用plop

第一步，安装依赖

npm install plop --dev  

//或者用yarn
 yarn add plop --dev

第二步，在package同级目录下新建plopfile.js

这是plop的入口文件，需要导出一个函数，此函数接受一个plop对象，用于创建生成器任务

 1 module.exports = plop => {
 2     plop.setGenerator("component', {
 3         description: "create a component",
 4         prompts: [
 5             {
 6                 type: "input",
 7                 name: "name",
 8                 message: "your component name",
 9                 default: "MyComponent"
10             }
11         ],
12         actions: [
13             {
14                 type: "add",
15                 path: 'src/components/{{name}}/{{name}}.js'//要放的路径，
16                 templateFile: 'plop-tamplates/component.hbs'//模板路径
17              }
18          ]
19     })
20 }            

举个栗子

此处可以看到我的模板是金黄色线标出的位置

然后就可以执行plop命令了，  注意， 生成器名字要保持一致

npm plop component
//或者yarn
yarn plop component

执行命令后，就可以看到一个问题（根据我们写的prompts）

创建成功

同理可以创建css, test文件（如图，只要在金黄色圈出的模板位置添加相应文件，  然后在plopfile.js中的actions中添加对应的方法， 然后调用 plop命令，就可以生成如  ’Header‘  这样结构的小组件了）

总结如下

　　1. 将plop木块作为项目开发依赖安装

　　2. 在package同级目录下创建一个plopfile.js文件

　　3.在plopfile.js文件中定义脚手架任务

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

　　5.通过plop提供的cli运行脚手架任务