对于前端的一些重复代码，我们可以使用plop这个小型前端工具来代替我们进行工作
全局安装plop
npm i plop -g
mac安装
sudo npm i plop -g
创建文件
mkdir my-app
cd my-app
npm init //初始化生成package.json
项目安装plop
npm i plop --save-dev
然后在plop-project下创建一个plopfile.js文件，用来写plop代码
创建一个plop-templates文件夹 ，提供模板用来生成文件，模板文件我写了一个js和一个css文件，目录如下
生成前文件目录
接下来写plopfile.js内的代码
module.exports = plop => {
plop.setGenerator('components',{
"description": '视图组件',//描述
"prompts":[{
type:'input',
name:'name',
message:'Components name',
default:'yoursComponent',
}],
"actions":[{//这里是模版操作，对提供的模板进行复制到相应的文件内，不用在自己去创建
path:'src/components/{{name}}.css',//输出文件路径，name就是命令行你对prompts询问的回答
type:'add',//类型是添加
templateFile:'plop-templates/index.css'//模板文件路径
},{
path:'src/components/{{name}}.js',
type:'add',
templateFile:'plop-templates/index.js'
}]
});
}
然后命令行运行
plop components
prompts的询问
这里plop后边跟的名字就是你定义的名字，plop.setGenerator函数得一个参数名称
之后文件夹内会生成相应的文件
生成文件后的项目目录
感觉这个小工具还挺好用的，比如我们在开发过程中对于后台管理系统有了一个统一的模板，我们可以写这样一个脚本运行，自动生成后台管理系统的模板，减少重复代码的搭建。或者说react项目中每个文件夹有js，css等文件，我们也是可以用plop进行生成，解决部分重复的操作。
最后，因为我写的比较简单，在学习的过程中看过一篇很不错的文章传送门,写的很详细，希望能对小伙伴有帮助
