類似vue-cli這樣快速構建項目的腳手架是怎樣開發出來的？

01-05

開發一個這樣的腳手架需要經歷怎樣的過程？有哪些需要注意的地方？
我先自己試著基於npm開發一下，晚點回來看看各位大俠的思路是怎樣的，看能不能補上我個人思考時疏漏的地方，也順便讓其他想做這種工具的同學借鑒。

恰巧我也想擼個腳手架，所以去看了下vue-cli的源碼，vue-cli依賴兩個核心包 commander 和 download-git-repo。commander用來處理命令行相關工作，download-git-repo 用來下載git倉庫。

vue-cli 的運行流程是根據用戶輸入的信息，下載對應的模板（官方模板和自定義模板），然後釋放到目標目錄

在看源碼的過程中我發現，腳手架和模板並不是放在同一個倉庫下的。（模板倉庫地址vuejs-templates ）

為什麼要分開放，不放在同一個項目里呢。後來我想作為用戶，一般是不會頻繁更新腳手架的，那麼如果放在一起，模板更新了，用戶不更新腳手架，就不會知道模板更新了。而將模板獨立放在一個倉庫，每次都去down，就很好的避免了這個問題

你可以選擇yeoman

然後自己寫個generator就可以了，非常好寫，官方就有教程，你可以參考別人寫的。

好幾年前我寫過一個自動構建 ThinkPHP 項目的Thinkphp Generator | Thinkphp 生成器

除了自動下載項目以外還可以一鍵命令生成controller或者model啥的，類似於laravel的artisan

需要處理的基本就是處理命令行交互，然後根據輸入內容生成相應的模板文件，或者直接通過node去執行一些git clone之類的命令什麼的，還是比較簡單的，動手摸索一下吧。

給項目組用的框架寫過cli，主要用的有：

"bin":{ "frameName":"./xx.js" }

xx.js 第一行要加上 #!/usr/bin/env node

當我們全局安裝之後，就可以直接通過frameName命令運行xx.js，比如frameName init &

&，傳參通過commander再做相應的處理。

"scripts":{ "dev":"node dev.js" }

我們就可以npm run dev，相當於在shell里執行了node dev.js，有需要的話也可能用到關於生命周期的東西。詳見npm官方文檔，介紹得非常詳細。

commander，獲取命令行傳參。
download-git-repo，下載git倉庫，通常用來下載模板和配置文件，配置文件的話放在web上更加靈活，比如隨時都可以增刪模板而不用用戶更新cli。
colors，命令行帶顏色輸出，比如error輸出紅色，success輸出綠色提示。
fs-extra，在nodejs的fs基礎上增加了一些新的方法，更好用，可以直接替代fs。
ora，載入中狀態表示的時候一個loading怎麼夠，再在前面加個小圈圈轉起來，成功了console一個success怎麼夠，前面還可以給他加個小鉤鉤，ora就是做這個的。
inquirer，命令行交互的時候你需要填project name等一系列信息，這個時候inquirer就可以用起來啦。
模板庫，去github上搜一堆，通過init的時候填入的信息來修改config。

以上的東西有些是可以自己選擇的，看自己的喜好。

build：gulp

熱載入：browser-sync

如果用的webpack的也類似，cli實現起來也差不多。

以上

可以去看vue-cil的源碼，不是很難，不過感嘆，大神怎麼能知道這麼多庫，我當時自己模仿寫了一個，花了一天看用到庫的文檔，然後一個小時就寫完了…

前端小白，學習中。

之前摸索過一個基於vue-cli的帶有生成文件等功能的cli：qh08/hendo-cli

其中有幾個npm插件我認為比較好的,求鑒定：

commander：用來解析 command

download-git-repo：用來下載git上的repo

handlebars：用來製作離線文件模板

cross-spawn ：用來解決cli跨平台不兼容的問題

之前也曾收藏過兩篇相關文章，期末考前開的腳手架輪子的坑還沒填完_(:3」∠)_

造腳手架的的方法很多，原理大多都是通過node來調用系統底層命令實現，在工作目錄下開發，再通過npm link來鏈接到全局目錄下

比如vue-cli，它的核心是commander.js。這個庫相對其他命令行庫來說，集成度更高，但造出來的輪子模式相對固定，不過上手更快，造輪子更佳方便。

當然，用阮一峰大神推薦使用的shelljs和yargs來開發會更佳靈活，當然難度相對高一些

最近也寫了一個腳手架，easywebpack-cli,支持vue/react前後端構建。其實寫這些，在於平時看到好的東西或者工具，多看一眼，總能發現一些新的東西，然後通過學習，參考轉換為自己的東西，日積月累就見的多了。一句話，多留意，多看多學！