小型前端腳手架工具plop的簡單使用

2021-10-02 12:13:20 字數 1783 閱讀 9448

在我之前的另一篇文章前端工程化 通過yeoman-generator將檔案載入到本地中說到了如何通過yeoman將檔案載入到本地,但實際上使用plop工具也可以

首先要將plop安裝到全域性環境

npm i plop -g
再將plop安裝到當前專案中

npm i plop -d
然後要在專案根目錄中新建乙個plopfile.js檔案,用於編寫在命令列向使用者提出問題,並根據使用者輸入的內容來進行各種操作,是plop的入口檔案,需要匯出乙個函式,該函式接收乙個plop物件做為引數

這裡和使用yeomen一樣先建立乙個plop-temp資料夾來存放模板檔案

module.

exports

= plop=>],

actions:

[}.js'

,// 新增的檔案的路徑

templatefile:

'plop-temp/temp.js'

// 模板檔案的路徑}]})}

目錄如下

在temp.js中隨便寫入點東西

let data =

1

在命令列執行plop wxfile

輸入test,在根目錄生成了乙個test.js檔案,開啟test.js檔案,裡面的內容和temp.js的內容是一樣的

如果我們要將命令列填入的內容寫到檔案裡,可以通過在檔案內寫入},}內寫入對應問題的變數就可以了,比如我們在temp.js裡寫入

let title =

"}"

執行plop輸入test後,test.js的內容就會變成

let title =

"test"

如果要進行多個操作,只要在actions陣列後面新增新的成員就可以了

module.

exports

= plop=>],

actions:

[}1.js'

,// 新增的檔案的路徑

templatefile:

'plop-temp/temp.js'

// 模板檔案的路徑},

}2.js'

, templatefile:

'plop-temp/temp.js'},

]})}

執行plop wxfile,輸入test,發現多了兩個檔案,test1檔案和test2檔案,檔案的內容都是一樣的,因為使用了同乙個模板

如果要將生成的檔案放入乙個新建的資料夾,只要在放入的路徑寫入乙個沒有的資料夾名稱,就會先生成乙個新的資料夾,再將生成的檔案放入

module.

exports

= plop=>],

actions:

[}.js'

,// 新增的檔案的路徑

templatefile:

'plop-temp/temp.js'

// 模板檔案的路徑}]})}

這裡folder本來是沒有的,在執行命令後就會先新建這個資料夾再將生成的檔案放

前端腳手架

腳手架目錄 idea build configwebpack 配置檔案 dist打包輸出目 node modules依賴目錄 src assets資源 components自定義元件 pages每個vue 檔案對應乙個頁面,或者頁面的乙個元件 router路由 整個專案的路由跳轉配置 config....

腳手架 用Plop工具生成專案中的元件

專案 plop是乙個小工具,它提供了一種簡單的方法用一致的方式生成 或任何其他型別的檔案。比如在專案中,每個元件的初始化檔案內容基本一致,則可用plop來生成元件,避免每次手動生成的繁瑣。yarn add plop devexport default plop 入口檔案,需匯出乙個函式 此函式接收乙...

yeoman web腳手架工具

yeoman上搭建了很多各種專案需求的基礎腳手架,在專案開發的時候,可以直接利用這些現有的腳手架,免去了環境依賴配置的環節。npm install g yo把yeoman的模組yo,g安裝在全域性下。安裝之後可以輸入 yo version檢視yeoman的版本號 到yeoman官網查詢到需要的專案生...