每天學(xué)一點(diǎn)，分享我的所得。
今天給大家?guī)?lái)的是前端腳手架的搭建過程，搭建腳手架我肯定參考了很多大佬的博客和相關(guān)的視頻，最后親自動(dòng)手實(shí)現(xiàn)一遍，方能融會(huì)貫通。
企業(yè)中開發(fā)中的問題
工具的出現(xiàn)，必然是要解決一個(gè)或一類問題。筆者列出幾點(diǎn)自身的體會(huì)。
- 技術(shù)棧不統(tǒng)一。在公司做項(xiàng)目，使用的技術(shù)棧都是經(jīng)過選型之后的，不是單一技術(shù)而是多種技術(shù)的融合。每加入一個(gè)新技術(shù)，都需要進(jìn)行相關(guān)的配置，有時(shí)可能還要二次封裝。
- 沒有沉淀。每個(gè)項(xiàng)目團(tuán)隊(duì)基于自身產(chǎn)品線，往往都會(huì)沉淀一些公用的方法、類等（如時(shí)間轉(zhuǎn)換、交互數(shù)據(jù)格式等）。
- 項(xiàng)目目錄不規(guī)范，很難維護(hù)別人的代碼。
- 打包、部署每次都要修改腳本。
總結(jié)一下，就是重復(fù)做的事情太多，沒有規(guī)范、沒有指導(dǎo)。
腳手架能做什么
- 統(tǒng)一項(xiàng)目組的技術(shù)棧，預(yù)先配置好相關(guān)文件，開箱即用。比如用React，就要把React全家桶引入項(xiàng)目，并做相應(yīng)的配置（react-router、redux...）。
- 業(yè)務(wù)線公用的方法和庫(kù)，不用每次手動(dòng)移植。
- 統(tǒng)一項(xiàng)目目錄結(jié)構(gòu)，方便開發(fā)人員協(xié)作開發(fā)，對(duì)新人友好。
- 實(shí)現(xiàn)前端工程化。
搭建思路
我們一定使用過，create-react-app或vue-cli這些官方的腳手架?；貞浵率褂梅绞剑?/p>
create-react-app my-app
// vue create my-app
在進(jìn)入到my-app目錄，從package.json文件中找到對(duì)應(yīng)的命令，執(zhí)行即可開發(fā)自己的項(xiàng)目了。
這里我們把整個(gè)流程抽象一下：
1.先通過npm安裝了一個(gè)包（腳手架）
2.這個(gè)包里有一個(gè)可執(zhí)行文件，可以在全局執(zhí)行對(duì)應(yīng)的命令（非全局也可）。
3.執(zhí)行命令，會(huì)將用戶輸入的信息捕獲，并與用戶交互。
4.命令最終會(huì)將一個(gè)配置好的模板，拷貝到用戶本地目錄下，可以直接用它來(lái)開發(fā)項(xiàng)目。
借助工具
互聯(lián)網(wǎng)時(shí)代，學(xué)會(huì)將多種工具組合使用來(lái)達(dá)成自己的目標(biāo)，也是一種能力。這里列出開發(fā)腳手架基礎(chǔ)的包
- commander：獲取終端輸入的參數(shù)
- inquirer：交互式命令行工具
- download-git-repo：下載模板
- chalk：美化控制臺(tái)顯示
搭建流程
話不多說(shuō)，上菜
- 首先，我們要發(fā)布一個(gè)npm包。這樣就可以讓團(tuán)隊(duì)其他成員共享。包里需要暴漏一個(gè)命令，供開發(fā)者使用。
mkdir demo-cli & cd demo-cli
npm init -y
-
接下來(lái)，我們實(shí)現(xiàn)個(gè)小需求：終端指令demo-cli回車，打印“hello demo-cli”這里說(shuō)一下，www文件中第一行，這個(gè)告訴操作系統(tǒng)，當(dāng)前腳本在node環(huán)境下執(zhí)行。在項(xiàng)目下執(zhí)行npm link，將當(dāng)前項(xiàng)目與npm模塊建立連接。可以看到輸出正確。
-
接著，我們來(lái)實(shí)現(xiàn)獲取參數(shù)及終端交互功能。先來(lái)實(shí)現(xiàn)個(gè)小需求：輸入指令demo-cli打印提示信息，輸入demo-cli create命令正確打印成功，其他命令均提示失敗。這里需要安裝commander，具體使用方法百度。簡(jiǎn)單說(shuō)下，commander有執(zhí)行順序，要按照套路來(lái)寫。command方法，接收命令字符串，匹配成功后，執(zhí)行action函數(shù)。沒匹配到提示錯(cuò)誤。演示下：
- 重頭戲來(lái)了。我們要通過命令，把遠(yuǎn)程模板下載到本地。這里我把模板放在github上，沒有放在腳手架里，目的是讓腳手架和模板庫(kù)解耦。這里要用到download-git-repo這個(gè)包去下載模板（整個(gè)項(xiàng)目的核心—下載模板），先在github上建立一個(gè)模板再說(shuō)。這里我直接使用之前的模板了，其實(shí)就是一個(gè)webpack搭建的項(xiàng)目，大家可以自由發(fā)揮?，F(xiàn)在我們將要將兩者進(jìn)行關(guān)聯(lián)。但之前，還要完成兩件事：1.獲取當(dāng)前執(zhí)行命令的所在目錄及參數(shù)。2.判斷輸入的項(xiàng)目名稱是否存在。通過全局process對(duì)象，可以獲取demo-cli create 后面的輸入，創(chuàng)建是一個(gè)對(duì)立的動(dòng)作，新建個(gè)文件把它分離出去。解釋下：第一步，先獲取項(xiàng)目名稱(這里是簡(jiǎn)單實(shí)現(xiàn)，假設(shè)命令固定格式為demo-cli create xxx沒有其他參數(shù))。第二步，如果項(xiàng)目名稱不存在則創(chuàng)建項(xiàng)目，downloadGitRepo的使用方法，npm上很具體不多說(shuō)?，F(xiàn)在，我們?cè)谌我饽夸浵聢?zhí)行命令，都能將遠(yuǎn)程倉(cāng)庫(kù)的模板拉到本地文件夾下。機(jī)智的你肯定發(fā)現(xiàn)了缺陷。下載下來(lái)的準(zhǔn)確說(shuō)是文件，不是模板。我們希望，模板是活的，里面的內(nèi)容可以根據(jù)輸入動(dòng)態(tài)改變。
- 讓模板活起來(lái)。思路是這樣的：從遠(yuǎn)程下載文件到本地->讀取下載的內(nèi)容->將文件中特殊標(biāo)識(shí)提換成用戶輸入->生成對(duì)應(yīng)的文件及目錄->將原目錄刪除。
這里我是用metalsmith這個(gè)工具。它是一個(gè)靜態(tài)網(wǎng)站生成器,功能強(qiáng)大。可以處理模板文件，源文件到目標(biāo)文件的轉(zhuǎn)換。強(qiáng)大插件功能，處理各種類型文件。模板引擎這里使用的是handlebars。其他模板語(yǔ)言都可以，之后會(huì)指出這里列出核心函數(shù)。解釋：在上一步，我們把git上的模板已經(jīng)下到本地了?，F(xiàn)在改一下存放路徑，先放在臨時(shí)目錄(模板文件里有些{{xxx}}要替換)，接著把臨時(shí)目錄、目標(biāo)目錄和要替換的key-value傳進(jìn)來(lái)，use函數(shù)的使用方法官方文檔已給出。file.contents也在官網(wǎng)中。成功后刪除臨時(shí)目錄。至此固態(tài)腳手架功能已完成（不可配置） -
豐富美化。執(zhí)行命令后，控制臺(tái)沒有任何提示，對(duì)用戶很不友好。這里使用ora。
封裝了下ora的方法。現(xiàn)在在執(zhí)行時(shí)就出現(xiàn)動(dòng)畫效果了。
- 目前，輸入完命令(demo-cli create xxx)后，就自動(dòng)執(zhí)行期間不再理會(huì)用戶，這么任性肯定會(huì)被打的。能收集用戶的需求才是好產(chǎn)品。使用inquirer，來(lái)與用戶交互。現(xiàn)在這個(gè)腳手架算是可以見人了。
項(xiàng)目源碼
