plop小型脚手架工具

介绍

主要用于创建特定类型文件的小工具&＃xff0c;有点类似于yeoman中的sub-generator&＃xff0c;一般不独立使用&＃xff0c;用于集成到项目当中&＃xff0c;创建一些同类型的项目文件

实例

在react项目中创建组件时&＃xff0c;往往需要创建3个文件

现在在react项目安装plop

yarn add plop --dev

安装完成之后&＃xff0c;在根目录创建plopfile.js的文件&＃xff0c;是入口文件

在根目录创建模版目录plop-templates,在其中添加模版.hbs模版引擎类型文件&＃xff0c;可以通过{{ }}语法插入相应的数据

setGenerator&＃xff0c;第一参数为模版名称 description描述

// Plop 入口文件&＃xff0c;需要导出一个函数
// 此函数接收一个 plop 对象&＃xff0c;用于创建生成器任务module.exports &＃61; plop &＃61;> {plop.setGenerator(&＃39;component&＃39;, {description: &＃39;create a component&＃39;,prompts: [{type: &＃39;input&＃39;,name: &＃39;name&＃39;,message: &＃39;component name&＃39;,default: &＃39;MyComponent&＃39;}],actions: [{type: &＃39;add&＃39;, // 代表添加文件path: &＃39;src/components/{{name}}/{{name}}.js&＃39;,templateFile: &＃39;plop-templates/component.hbs&＃39;},{type: &＃39;add&＃39;, // 代表添加文件path: &＃39;src/components/{{name}}/{{name}}.css&＃39;,templateFile: &＃39;plop-templates/component.css.hbs&＃39;},{type: &＃39;add&＃39;, // 代表添加文件path: &＃39;src/components/{{name}}/{{name}}.test.js&＃39;,templateFile: &＃39;plop-templates/component.test.hbs&＃39;}]})
}

总结

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