開(kāi)源了一個(gè)小的前端腳手架(隊(duì)內(nèi)分享)
這個(gè)是我開(kāi)源的第二個(gè)項(xiàng)目,第一個(gè)開(kāi)源項(xiàng)目是一個(gè) okr 的樹(shù)形圖,目前有 349 個(gè)star,地址如下:https://github.com/qq449245884/vue-okr-tree,精力有限,近期維護(hù)的比較少,如果有興趣的小伙伴可以加入一起維護(hù)。
現(xiàn)在來(lái)看看我開(kāi)源的第二個(gè)小項(xiàng)目,主要是我們團(tuán)隊(duì)要用的,目的是減少一些瑣屑的工作,增加開(kāi)發(fā)效率。
背景
目前隊(duì)內(nèi)新項(xiàng)目,我們都使用了自己的公共庫(kù)、自己一套的 eslint 規(guī)范及 git commit 相關(guān)的檢查,如果有新項(xiàng)目我們還要從老的項(xiàng)目一個(gè)一個(gè)把配置拷貝過(guò)來(lái),效率比較低。
為了解決這些痛點(diǎn),我們需要有自己的腳手架,幫我們完成這些耗時(shí)的工作。
為什么需要腳手架?主要有 3 點(diǎn)原因:
減少重復(fù)性的工作,不再需要復(fù)制其他項(xiàng)目再刪除無(wú)關(guān)代碼,或者從零創(chuàng)建一個(gè)項(xiàng)目和文件
根據(jù)交互動(dòng)態(tài)生成項(xiàng)目和配置文件等
多個(gè)協(xié)作更為方便,不需要所文件傳來(lái)傳去
調(diào)研
安裝
- npm install --global ztjy-cli
命令使用
查看版本
- ztjy -v 或 ztjy --version
查看當(dāng)前模板
- ztjy ls
說(shuō)明:
如果是公司內(nèi)網(wǎng)環(huán)境選擇使用不帶 github 開(kāi)頭的模板
初始化項(xiàng)目
我們可以使用 init 命令選擇一個(gè)模板來(lái)初始化我們新的項(xiàng)目。
- ztjy init
執(zhí)行 init 首先會(huì)讓用戶(hù)選擇一個(gè)模板初始化,如果是公司內(nèi)網(wǎng)選擇不帶 github 開(kāi)頭模板
選擇對(duì)應(yīng)的模板后,接著會(huì)讓用戶(hù)填寫(xiě)項(xiàng)目的名稱(chēng)及版本,對(duì)應(yīng) package.json 中的 name 和 description,如下所示:
注意:如果下載失敗,可能原因是網(wǎng)絡(luò)問(wèn)題,可以多執(zhí)行多次試試。
下載成功后,在當(dāng)前目錄下就可以看到我們指定的 my-vue-template 項(xiàng)目。
添加模板
如果現(xiàn)有模板沒(méi)有我們想要的,我們可以 add 命令添加新的模板:
- ztjy add
執(zhí)行 add 命令后,依次會(huì)讓我們輸入項(xiàng)目的名稱(chēng)、描述及下載 地址。
這里的下載地址需要符合指定的格式,模板是使用 download-git-repo 庫(kù)下載的,所以具體的地址格式可以參考:
https://gitlab.com/flippidippi/download-git-repo
刪除模板
如果模板已經(jīng)不需要了,我們可以使用 del 命令刪除:
- ztjy del 模板名稱(chēng)
項(xiàng)目地址:gitubh: https://github.com/qq449245884/ztjy-cli
三方庫(kù)介紹
- <!-- 終端樣式庫(kù) -->
- "chalk": "^3.0.0",
- <!-- 命令行交互 -->
- "commander": "^5.0.0",
- <!-- 從git拉模板 -->
- "download-git-repo": "^3.0.2",
- <!-- fs操作拓展 -->
- "fs-extra": "^9.0.0",
- <!-- 模板引擎 -->
- "handlebars": "^4.7.3",
- <!-- 命令行交互 -->
- "inquirer": "^7.1.0",
- <!-- 加載效果,圖標(biāo) -->
- "ora": "^4.0.3"
~~完,我是刷碗智