我之前用webpack的時候,都是直接用各大框架的cli腳手架生成的。然而最近一些原因,導致我經常要脫離框架寫代碼,但是我又非常希望使用es6和sass,所以思來想去還是要用到webpack。前兩天趁着比較空的時間,再度學習了一下webpack的配置,寫了一個內置模板的webpack腳手架cli: @crazymad/crazymad-cli。
代碼掛在了我的github上: crazymad-tools/crazymad-cli,感興趣的同學可以自行fork更改,代碼我寫得很簡單,沒什麼高深的地方。
安裝:
npm install -g @crazymad/crazymad-cli
使用
命令行下執行crazymad-cli --help
,輸出:
D:\> crazymad-cli --help
Usage: crazymad-cli [options]
Options:
-V, --version output the version number
init init a project
-T, --template [String] create from template
-N, --name [String] input project name
-h, --help output usage information
init參數是初始化開關,只有輸入這個命令行參數,腳本纔會執行後續命令。–name參數可選,不填入該參數的話,腳本認定當前工作目錄即爲項目的根目錄,填入該參數,腳本會在當前目錄下再創建一個項目文件夾作爲項目的根目錄(基本邏輯其實和vue-cli類似);–template參數可選,不填入該參數的話,template默認爲base,當然後面還需要確認一次。
和vue-cli一樣,鍵入命令並執行後,程序會讓用戶再輸入一些信息,比如項目名稱、作者名字、開源協議之類的,具體如下所示:
所有信息確認完畢後,程序開始執行npm install命令,我現在只測試了windows下的安裝過程,基本沒有問題。
拓展
我不知道像vue-cli裏面的具體是怎麼實現的,我個人爲了方便template的拓展,給template添加了plugin接口,可以讓每個template做一些個性化的操作。
缺陷
等我差不多寫完了的時候,我去瞄了一眼vue-cli的實現,發現它的template和本體是分離的話,是在構架項目工程文件的時候,template纔會被download下來。講道理,vue-cli的做法更加合理,不過想想我這個小工具反正也只有我自己用用,沒必要整這麼麻煩。
此外就是template我才寫了一個,未來有待增添更多的template