開源了一個小的前端腳手架(隊內分享)

前端小智發表於2021-09-29

這個是我開源的第二個專案,第一個開源專案是一個 okr 的樹形圖,目前有 349 個star,地址如下: https://github.com/qq449245884/vue-okr-tree,精力有限,近期維護的比較少,如果有興趣的小夥伴可以加入一直維護。

現在來看看我開源的第二個小專案,主要是我們團隊要用的,目的是減少一些瑣屑的工作,增加開發效率。

背景

目前隊內新專案,我們都使用了自己的公共庫、自己一套的 eslint 規範及 git commit 相關的檢查,如果有新專案我們還要從老的專案一個一個把配置拷貝過來,效率比較低。

為了解決這些痛點,我們需要有自己的腳手架,幫我們完成這些耗時的工作。

為什麼需要腳手架?主要有 3 點原因:

  • 減少重複性的工作,不再需要複製其他專案再刪除無關程式碼,或者從零建立一個專案和檔案
  • 根據互動動態生成專案和配置檔案等
  • 多個協作更為方便,不需要所檔案傳來傳去

調研

安裝

npm install --global ztjy-cli

命令使用

檢視版本

ztjy -v  或 ztjy --version

檢視當前模板

ztjy ls

說明:

如果是公司內網環境選擇使用不帶 github 開頭的模板

初始化專案

我們可以使用 init 命令選擇一個模板來初始化我們新的專案。

ztjy init

執行 init 首先會讓使用者選擇一個模板初始化,如果是公司內網選擇不帶 github 開頭模板

選擇對應的模板後,接著會讓使用者填寫專案的名稱及版本,對應 package.json 中的 namedescription,如下所示:

注意:如果下載失敗,可能原因是網路問題,可以多執行多次試試。

下載成功後,在當前目錄下就可以看到我們指定的 my-vue-template 專案。

新增模板

如果現有模板沒有我們想要的,我們可以 add 命令新增新的模板:

ztjy add

執行 add 命令後,依次會讓我們輸入專案的名稱、描述及下載 地址。

這裡的下載地址需要符合指定的格式,模板是使用 download-git-repo 庫下載的,所以具體的地址格式可以參考:

https://gitlab.com/flippidipp...

刪除模板

如果模板已經不需要了,我們可以使用 del 命令刪除:

ztjy del 模板名稱

專案地址:

gitubh: https://github.com/qq44924588...

三方庫介紹

<!-- 終端樣式庫 -->
"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",
<!-- 載入效果,圖示 -->
"ora": "^4.0.3"

~~完,我是刷碗智,歡迎給個贊呀。

程式碼部署後可能存在的BUG沒法實時知道,事後為了解決這些BUG,花了大量的時間進行log 除錯,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug

交流

有夢想,有乾貨,微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收錄,有一線大廠面試完整考點、資料以及我的系列文章。

相關文章