前端常用腳手架工具

前端有很多特定的腳手架工具大多都是為了特定的專案型別服務的，比如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