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