簡(jiǎn)易腳手架搭建

cyixlq 發(fā)布于2019-08-23 15:53 / 3491人閱讀

摘要：總結(jié)以上就是一個(gè)簡(jiǎn)單腳手架的實(shí)現(xiàn)方式，后期也會(huì)一直去更新和維護(hù)這個(gè)腳手架，公司現(xiàn)在新的項(xiàng)目就是基于這個(gè)腳手架去搭建的，因?yàn)楣粳F(xiàn)在的項(xiàng)目都是寫的，所以的功能暫時(shí)不支持，后期也會(huì)慢慢支持

寫在最前面

隨著公司業(yè)務(wù)的發(fā)展，獨(dú)立的系統(tǒng)也慢慢多了起來(lái)，腳手架的必要性也日趨明顯。

基于此，便開(kāi)始搭起了腳手架，主要解決兩個(gè)問(wèn)題：

1.項(xiàng)目的反復(fù)配置

2.公共組件的自動(dòng)更新

代碼地址點(diǎn)這里，可以照著代碼再去看這篇文章會(huì)覺(jué)得更有思路一點(diǎn)

使用

1.全局按裝

npm install zn-cli -g

2.創(chuàng)建實(shí)例

zn-cli init [templateType] [projectName]

ps：

templateType: 模板類型（暫時(shí)支持Vue和react的標(biāo)準(zhǔn)模板，后期會(huì)陸續(xù)支持后臺(tái)版本，類似于antdPro）

projectName: 你需要?jiǎng)?chuàng)建的項(xiàng)目實(shí)例名稱

3.更新腳手架中的公共文件

在你的項(xiàng)目實(shí)例中執(zhí)行：

npm run update

安全性：首先，這個(gè)操作是不會(huì)覆蓋你的業(yè)務(wù)代碼，只會(huì)去更新根目錄下public文件夾里的文件

可選性：每個(gè)版本更新的公共文件都會(huì)在腳手架的文檔中說(shuō)明，你可以選擇你需要的功能對(duì)應(yīng)的版本（后續(xù)再講）

代碼

1.分支

master：腳手架代碼，全局安裝的就是這個(gè)玩意，用來(lái)拉去對(duì)應(yīng)模板生成react/vue實(shí)例的，通過(guò)npm安裝使用

template分支：分支名template開(kāi)頭的都是模板分支。我這里就不一一列舉了，因?yàn)榉种?huì)陸續(xù)的添加，腳手架里都會(huì)說(shuō)明

test分支：測(cè)試分支，用來(lái)測(cè)試一些功能或者模板用的（可忽略）

2.腳手架實(shí)現(xiàn)

核心代碼是在bin目錄里，index.js為入口，點(diǎn)開(kāi)index，可以看到，主要是對(duì)node版本做了判斷，然后底部引入了cli.js,在看這些代碼之前，首先得閑確定你是對(duì)以下幾個(gè)node包是了解的：

commander：處理用戶命令行輸入

download：clone git遠(yuǎn)程倉(cāng)庫(kù)代碼

其他有一些包是輔助類的，比如chalk，ora等，不了解也沒(méi)關(guān)系。

先看代碼：

大致流程：

1.獲取用戶輸入

2.根據(jù)用戶輸入判斷是需要什么模板，下載對(duì)應(yīng)模板到用戶輸入的項(xiàng)目目錄中

3.模板下載完成后，調(diào)用_cli下面的_reWritePackageJson方法，去更改實(shí)例中package.json中的一些配置

4.log里面的東西是一些提示性信息

基本腳手架就是這個(gè)流程，根據(jù)用戶輸入去拉去對(duì)應(yīng)的模板代碼到指定的目錄。

可能你注意到在模板下載完成時(shí)我執(zhí)行了一個(gè)進(jìn)程：

spawn("rm", ["-rf", `${name}/build.js`]);

刪除創(chuàng)建的項(xiàng)目中的build.js文件，為什么，因?yàn)檫@個(gè)js是用來(lái)更新模板，就像上面我說(shuō)到的執(zhí)行npm run update的時(shí)候就是通過(guò)這個(gè)js去做處理的。顯然，他應(yīng)該只存在于腳手架的模板中，而不應(yīng)該出現(xiàn)在用戶的項(xiàng)目實(shí)例中。對(duì)于用戶而言，它是無(wú)用的。

總結(jié)

以上就是一個(gè)簡(jiǎn)單腳手架的實(shí)現(xiàn)方式，后期也會(huì)一直去更新和維護(hù)這個(gè)腳手架，公司現(xiàn)在新的項(xiàng)目就是基于這個(gè)腳手架去搭建的，因?yàn)楣粳F(xiàn)在的項(xiàng)目都是react寫的，所以Vue的功能暫時(shí)不支持，后期也會(huì)慢慢支持vue...