淺談前端常用腳手架cli工具及案例
- 2021 年 1 月 26 日
- 筆記
前端常用腳手架工具
前端有很多特定的腳手架工具大多都是為了特定的項目類型服務的，比如react項目中的reate-react-app,vue項目中的vue-cli,angular
項目中的angular-cli根據一些資訊創建對應的項目基礎結構，只適用於對應的項目，還有一些對應的項目腳手架工具比如Yeoman。
根據模板生成對應的結構,比較靈活，容易拓展，還有一種腳手架工具plop,例如創建一個組建/模組所需要的文件.
一.Yeoman簡介
Yeoman是一款最老牌最通用的腳手架工具，基於node.js開發的工具模組，是一款創建現代化應用的腳手架工具,不同於vue-cli這樣
的工具，Yeoman更像是一個腳手架的運行平台，通過不同的Generator搭建屬於自己的腳手架。
Yeoman的基本使用
首先,檢查下node環境，另外個人感覺yarn的用戶體驗更加好一點,後續我們使用yarn代替npm去安裝確保電腦上有node和yarn.
具體安裝步驟如下:
yarn global add yo (yo就是工具模組的名字)
yarn global add generator-node //必須要搭配對應的Generator去使用
mkdir my-module (找到合適的文件夾)
cd my-module
yo node (運行特定的generator，把前面generator-去掉)
如上圖所示文件夾中生成了基礎的項目結構以及接觸的項目程式碼.
Sub Generator
有時候我們並不需要創建完整的項目結構,可能我們只是在已有的項目結構上創建項目文件，比如在原有基礎上新增eslint功能，我們
可以用生成器幫我們生成，這樣會提高我們的效率，我們可以用
Yeoman提供的一些特性
比如添加一個cli應用，可以執行yo node:cli命令（命名方式為yo genrator：sub genrator）如下圖所示，提供了一些基礎的程式碼結構，
有了這個我們就可以把它當成個全局的命令行模組使用了，下面執行yarn link到全局範圍,然後執行yarn安裝依賴，把所需要的依賴
安裝進來,執行my-module –help就可以看到sub generator特性.
綜上所述,Yemon的使用步驟
1.明確你的需求
2.找到合適的Generator
3.全局範圍內安裝找到的Generator
4.通過Yo運行對應的Generator
5.通過命令行交互填寫選項
6.生成你所需要的項目結構
創建一個自定義的Generator模組
Generator本質上就是一個npm模組,Generator有一個固定的結構,裡面有一個generators的目錄,下面有個app的文件夾生成對應文件的程式碼,
如果需要多個sub Generator,例如添加一個component目錄,那麼我們的模組就生成了一個component的子生成器，如下圖所示：
yemon的生成器名稱必須是generator-<name>的名稱
下面按照具體步驟創建一個generator自定義模組,
1.創建空一個文件夾generator-sample
2.通過yarn init創建一個package.json
3.運行yarn add yeoman-generator 創建一個積類,裡面很多方法讓我們後續更加便捷
4.創建如下圖所示的generators/app/index.js文件
5.yarn link 鏈接到全局範圍 使之成為全局模組
6.另外創建一個空文件夾,運行yo sample 發現創建了temp.txt
根據模板創建文件
很多時候自動創建的文件有很多，也比較複雜，我們可以使用模板去創建文件，我們使用模板創建可以大大提高效率
具體步驟如下：
1.在app文件夾下創建templates/foo.txt
2.修改index.js程式碼 如下圖所示
3.在新文件夾 運行yo sample
接收用戶輸入
像一些動態的數據,在generator中想要發起一個命令行交互的詢問，可以通過實現promit方法實現
具體步驟如下:
1.在app文件夾下創建templates/bar.html
2.修改index.js程式碼如下圖所示
3.在新文件夾 運行yo sample (備註:my-project為自定義)
Vue Generator案例
下面我們自定義一個有基礎程式碼的vue腳手架,首先創建項目結構,生成一個generator，用於生成項目結構,如下圖所示：
具體步驟如下:
1.makdir generator-namelw (合適路徑創建目錄)
2.yarn init (生成package.json)
3.yarn add yeoman-generator (安裝yeoman依賴)
4.創建目錄機構如下圖所示
5.修改app/index.js程式碼如下圖所示:
6.yarn link (link到全局)
7.在新文件夾 運行yo lwname
二.plop簡介
plop是一款創建文件項目中特定類型的小腳手架工具,有點像Yeomon中的sub generator一般不會獨立去使用，一般會把plop集成到
項目中，去自動化的創建同類型的項目文件.
plop的具體使用
1.首先安裝依賴yarn add plop –dev
2.根目錄下新建plopfile.js文件（plop的入口文件）
3.根目錄下創建plop-templates/component.hbs文件
4.yarn plop component
三.腳手架的工作原理
用node.js開發一個小型的腳手架工具,體會下工作流程(由於都差不多，我只寫步驟,有需要自己去搭建下就好)
1.makdir sample-nodecli
2.cd sample-nodecli
3.yarn init 生成package.json欄位
4.package.json裡面添加bin欄位 “bin”:”cli.js”
5.根目錄下創建cli.js //如下圖所示
6.yarn link
7.yarn add inquirer
8.創建模板templates/index.html
9.yarn add ejs 通過模板引擎去渲染對應的文件
10.空文件夾運行sample-nodecli
