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运行脚手架任务

 

posted @ 2021-05-20 17:52  芋圆小宝  阅读(177)  评论(0)    收藏  举报