每天學(xué)一點(diǎn)吠式，分享我的所得。
今天給大家?guī)?lái)的是前端腳手架的搭建過(guò)程抽米，搭建腳手架我肯定參考了很多大佬的博客和相關(guān)的視頻特占，最后親自動(dòng)手實(shí)現(xiàn)一遍，方能融會(huì)貫通云茸。
企業(yè)中開(kāi)發(fā)中的問(wèn)題
工具的出現(xiàn)是目，必然是要解決一個(gè)或一類(lèi)問(wèn)題。筆者列出幾點(diǎn)自身的體會(huì)查辩。
- 技術(shù)棧不統(tǒng)一胖笛。在公司做項(xiàng)目，使用的技術(shù)棧都是經(jīng)過(guò)選型之后的宜岛，不是單一技術(shù)而是多種技術(shù)的融合长踊。每加入一個(gè)新技術(shù)，都需要進(jìn)行相關(guān)的配置萍倡，有時(shí)可能還要二次封裝身弊。
- 沒(méi)有沉淀。每個(gè)項(xiàng)目團(tuán)隊(duì)基于自身產(chǎn)品線(xiàn)列敲，往往都會(huì)沉淀一些公用的方法阱佛、類(lèi)等（如時(shí)間轉(zhuǎn)換、交互數(shù)據(jù)格式等）戴而。
- 項(xiàng)目目錄不規(guī)范凑术，很難維護(hù)別人的代碼。
- 打包所意、部署每次都要修改腳本淮逊。
總結(jié)一下催首，就是重復(fù)做的事情太多，沒(méi)有規(guī)范泄鹏、沒(méi)有指導(dǎo)郎任。
腳手架能做什么
- 統(tǒng)一項(xiàng)目組的技術(shù)棧，預(yù)先配置好相關(guān)文件备籽，開(kāi)箱即用舶治。比如用React，就要把React全家桶引入項(xiàng)目车猬，并做相應(yīng)的配置（react-router霉猛、redux...）。
- 業(yè)務(wù)線(xiàn)公用的方法和庫(kù)诈唬，不用每次手動(dòng)移植韩脏。
- 統(tǒng)一項(xiàng)目目錄結(jié)構(gòu)，方便開(kāi)發(fā)人員協(xié)作開(kāi)發(fā)铸磅，對(duì)新人友好。
- 實(shí)現(xiàn)前端工程化杭朱。
搭建思路
我們一定使用過(guò)阅仔，create-react-app或vue-cli這些官方的腳手架』⌒担回憶下使用方式：
create-react-app my-app
// vue create my-app
在進(jìn)入到my-app目錄八酒，從package.json文件中找到對(duì)應(yīng)的命令，執(zhí)行即可開(kāi)發(fā)自己的項(xiàng)目了刃唐。
這里我們把整個(gè)流程抽象一下：
1.先通過(guò)npm安裝了一個(gè)包（腳手架）
2.這個(gè)包里有一個(gè)可執(zhí)行文件羞迷，可以在全局執(zhí)行對(duì)應(yīng)的命令（非全局也可）。
3.執(zhí)行命令画饥，會(huì)將用戶(hù)輸入的信息捕獲衔瓮，并與用戶(hù)交互。
4.命令最終會(huì)將一個(gè)配置好的模板抖甘，拷貝到用戶(hù)本地目錄下热鞍，可以直接用它來(lái)開(kāi)發(fā)項(xiàng)目。
借助工具
互聯(lián)網(wǎng)時(shí)代衔彻，學(xué)會(huì)將多種工具組合使用來(lái)達(dá)成自己的目標(biāo)薇宠，也是一種能力。這里列出開(kāi)發(fā)腳手架基礎(chǔ)的包
- commander：獲取終端輸入的參數(shù)
- inquirer：交互式命令行工具
- download-git-repo：下載模板
- chalk：美化控制臺(tái)顯示
搭建流程
話(huà)不多說(shuō)艰额，上菜
- 首先澄港，我們要發(fā)布一個(gè)npm包。這樣就可以讓團(tuán)隊(duì)其他成員共享柄沮。包里需要暴漏一個(gè)命令回梧，供開(kāi)發(fā)者使用逐工。
mkdir demo-cli & cd demo-cli
npm init -y
-
接下來(lái)髓涯，我們實(shí)現(xiàn)個(gè)小需求：終端指令demo-cli回車(chē)袒啼，打印“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)寫(xiě)灯变。command方法殴玛，接收命令字符串，匹配成功后添祸，執(zhí)行action函數(shù)滚粟。沒(méi)匹配到提示錯(cuò)誤。演示下：
- 重頭戲來(lái)了膝捞。我們要通過(guò)命令坦刀，把遠(yuǎn)程模板下載到本地。這里我把模板放在github上蔬咬，沒(méi)有放在腳手架里鲤遥，目的是讓腳手架和模板庫(kù)解耦。這里要用到download-git-repo這個(gè)包去下載模板（整個(gè)項(xiàng)目的核心—下載模板）林艘，先在github上建立一個(gè)模板再說(shuō)盖奈。這里我直接使用之前的模板了，其實(shí)就是一個(gè)webpack搭建的項(xiàng)目狐援，大家可以自由發(fā)揮「痔梗現(xiàn)在我們將要將兩者進(jìn)行關(guān)聯(lián)究孕。但之前，還要完成兩件事：1.獲取當(dāng)前執(zhí)行命令的所在目錄及參數(shù)爹凹。2.判斷輸入的項(xiàng)目名稱(chēng)是否存在厨诸。通過(guò)全局process對(duì)象，可以獲取demo-cli create 后面的輸入禾酱，創(chuàng)建是一個(gè)對(duì)立的動(dòng)作微酬，新建個(gè)文件把它分離出去。解釋下：第一步颤陶，先獲取項(xiàng)目名稱(chēng)(這里是簡(jiǎn)單實(shí)現(xiàn)颗管，假設(shè)命令固定格式為demo-cli create xxx沒(méi)有其他參數(shù))。第二步滓走，如果項(xiàng)目名稱(chēng)不存在則創(chuàng)建項(xiàng)目垦江，downloadGitRepo的使用方法，npm上很具體不多說(shuō)〗练剑現(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í)提換成用戶(hù)輸入->生成對(duì)應(yīng)的文件及目錄->將原目錄刪除岁诉。
這里我是用metalsmith這個(gè)工具锚沸。它是一個(gè)靜態(tài)網(wǎng)站生成器,功能強(qiáng)大√檠ⅲ可以處理模板文件哗蜈，源文件到目標(biāo)文件的轉(zhuǎn)換。強(qiáng)大插件功能坠韩，處理各種類(lèi)型文件距潘。模板引擎這里使用的是handlebars。其他模板語(yǔ)言都可以只搁，之后會(huì)指出這里列出核心函數(shù)音比。解釋?zhuān)涸谏弦徊剑覀儼裧it上的模板已經(jīng)下到本地了∏馔铮現(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)沒(méi)有任何提示的妖，對(duì)用戶(hù)很不友好绣檬。這里使用ora藕夫。
封裝了下ora的方法∮郏現(xiàn)在在執(zhí)行時(shí)就出現(xiàn)動(dòng)畫(huà)效果了。
- 目前袁滥，輸入完命令(demo-cli create xxx)后星虹，就自動(dòng)執(zhí)行期間不再理會(huì)用戶(hù)零抬，這么任性肯定會(huì)被打的。能收集用戶(hù)的需求才是好產(chǎn)品宽涌。使用inquirer平夜，來(lái)與用戶(hù)交互。現(xiàn)在這個(gè)腳手架算是可以見(jiàn)人了卸亮。
項(xiàng)目源碼
