前端工程化之yeoman的使用二

前面對yeoman進行了初步的了解前端工程化之yeoman的使用（一），接下來對yeoman進行擴充套件安裝自己的腳手架，以及遇到的問題進行記錄

效果新建模板

因為我這裡直接刪除generators資料夾了（可對照上篇文章的新建目錄結構部分）。所以files中的陣列直接就是generator：

"files":[
],

新建根據公司專案分pc端和移動端分兩塊pc和mobile用到的方法屬性等說明

copytpl：copytpl（from,to,context,templateoption,copyoption）將模板複製到指定的目錄中（原始碼）

引數：from:模板目標源位址

to：要複製到的位址

context：需要傳遞給ejs模板的引數

templateoption：ejs模板引擎配置引數

copyoption：複製時引數配置

prompt()：同plop一樣也是基於inquirer，故具體參考（inquirer ）

邏輯場景：

詢問選擇pc還是移動端。如果是pc端，那麼就填寫專案名和是否新增一些功能等等，然後執行賦值以及複製到指定目錄

prompting詢問部分：

這裡加上async/await的目的就是為了同步，詢問完才能處理下面操作

async
prompting()
]).then
(async answer =>,,
,]))
}else})
}

writing()操作寫入部分

先對package.json操作。這裡有兩種方式，一種使用ejs模板（ejs用法）直接寫入，還有一種是使用extendjson去生成乙個package.json,我這裡使用ejs模板

-%
>
...省略
}

'pc') 尋找./templates下的pc資料夾下的內容
this
.fs.
copytpl
(this
.templatepath
('pc'),
this
.destinationpath
(this
.answer.projectname),,,})

解析

為了不去替換public中index.html中的ejs，想著在package.json中用？即使用templateoption中的delimiter屬性去替換會報錯，具體原因未知

所以title和baseurl的傳遞是無奈之舉，vue中會有個public資料夾，其中的title和icon位址等，html-webpack-plugin暴露的預設值以及.env暴露的變數值

所以index.html改造一下接收字元

最後執行yo welink-cli的時候發現，以.開頭的檔案沒有複製出來。

具體得看copyoption這個引數的配置，其整合fast-glob

dot屬性：預設為false:即以點開頭的檔案會被忽略。

而根據原始碼

可以看到最後copytpl呼叫的是copy，而其中copyoptions其中還包有乙個物件層globoptions。基本的複製算完了

效果新建乙個名為test的資料夾，然後在該資料夾下執行yo welink-cli

選擇專案型別

新建專案名（預設以當前資料夾作為專案名）

千里之行

始於足下

前端工程化之yeoman的使用 二