對于前端的一些重復(fù)代碼，我們可以使用plop這個(gè)小型前端工具來代替我們進(jìn)行工作
全局安裝plop
npm i plop -g
mac安裝
sudo npm i plop -g
創(chuàng)建文件
mkdir my-app
cd my-app
npm init //初始化生成package.json
項(xiàng)目安裝plop
npm i plop --save-dev
然后在plop-project下創(chuàng)建一個(gè)plopfile.js文件，用來寫plop代碼
創(chuàng)建一個(gè)plop-templates文件夾 ，提供模板用來生成文件，模板文件我寫了一個(gè)js和一個(gè)css文件，目錄如下
生成前文件目錄
接下來寫plopfile.js內(nèi)的代碼
module.exports = plop => {
plop.setGenerator('components',{
"description": '視圖組件',//描述
"prompts":[{
type:'input',
name:'name',
message:'Components name',
default:'yoursComponent',
}],
"actions":[{//這里是模版操作，對提供的模板進(jìn)行復(fù)制到相應(yīng)的文件內(nèi)，不用在自己去創(chuàng)建
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'
}]
});
}
然后命令行運(yùn)行
plop components
prompts的詢問
這里plop后邊跟的名字就是你定義的名字，plop.setGenerator函數(shù)得一個(gè)參數(shù)名稱
之后文件夾內(nèi)會(huì)生成相應(yīng)的文件
生成文件后的項(xiàng)目目錄
感覺這個(gè)小工具還挺好用的，比如我們在開發(fā)過程中對于后臺(tái)管理系統(tǒng)有了一個(gè)統(tǒng)一的模板，我們可以寫這樣一個(gè)腳本運(yùn)行，自動(dòng)生成后臺(tái)管理系統(tǒng)的模板，減少重復(fù)代碼的搭建。或者說react項(xiàng)目中每個(gè)文件夾有js，css等文件，我們也是可以用plop進(jìn)行生成，解決部分重復(fù)的操作。
最后，因?yàn)槲覍懙谋容^簡單，在學(xué)習(xí)的過程中看過一篇很不錯(cuò)的文章傳送門,寫的很詳細(xì)，希望能對小伙伴有幫助
