使用yeoman構建angular應用

本文將介紹如何親手來完成乙個yeoman的generator，以實現快速構建最適合自己的專案。

本文將實現的generator起名為ngtimo，依照yeoman的命名規矩就叫做generator-ngtimo，是筆者這週末一晚上加一上午參考著yeoman官方給出的幾個generator(generator-generator、generator-node)給強行催生出來的，目前也已經在github上託管並發布到npm。

首先確保已經全域性安裝了yeoman，然後再全域性安裝generator-ngtimo:

npm install -g generator-ngtimo

安裝完成後即可使用yo命令來進行構建:

yo ngtimo

然後順利的話yeoman會像下面這樣詢問一系列構建的配置，這裡筆者選擇輸入專案名稱為ng-test剩下的一路敲回車:

順利的話如下圖這樣的專案結構就誕生了，可以 cd 到專案目錄下(自動執行的 npm install 失敗的話再手動

npm install 一下)，並執行 npm run server 啟動專案檢視效果。

不想自己從零開始寫乙個generator的話強烈推薦使用yeoman官方的generator-generator先把基本結構構建出來:

npm install -g generator-generator yo generator

yeoman的generator說白也只是乙個npm包，主要依賴yeoman-generator包來制定構建規則，這裡給出ngtimo的基本目錄結構:

整個index.js將匯出乙個擴充套件了yeoman-generator的類，就像這樣:

const generator = require('yeoman-generator');
// ...
module.exports = class extends generator 
default() 
writing() 
install() 
}

內部的這四個方法各有用處。

一、prompting方法

用於與使用者進行互動，即在yo專案的時候，這老頭會囉囉嗦嗦問我們很多問題，這些問題就是在這裡配置的。

對於這個方法筆者選擇的套路是如下三部曲:

先讓老頭向使用者問聲好

const yosay = require('yosay');
// ...
this.log(yosay(
'welcome to the astonishing ' + chalk.red('generator-ngtimo') + ' generator!'
));

以上**效果就是老頭會代我們問候(褒義)一下使用者:

把一連串問題先配置好

const prompts = [, ];

這裡就列舉了兩類問題，一類是客觀題，讓使用者輸入要構建的專案名稱，另一類是判斷題，詢問使用者是否新增一些額外的常用**，還有一類沒有使用到的是選擇題，還蠻有趣的。

把這個問題陣列返回給老頭

問題陣列配置好了，現在要把它交給老頭保管，做法如下:

return this.prompt(prompts).then(props => );

效果就是當使用者做完這些題目後回答會配置給props變數，在後面的寫如內容環節就可以根據使用者的答案來有選擇的建立專案了。

二、default方法

筆者一開始沒有配置這個方法，是在測試構建時發現沒辦法給目標專案套乙個頂層目錄時參考官方generator加上的，猜測是可以用來執行一些預設行為，比如自動給目標專案建立乙個頂層目錄，像這樣:

const path = require('path');
const mkdirp = require('mkdirp');
// ...
default() 
}

三、writing方法

此方法即用來把實際專案按照指定規則給寫出來，主要有兩種寫法: 直接複製指定模板以及傳入引數渲染出目標檔案。

比如說，在index.js的同級目錄下的templates目錄下有乙個檔案叫text.txt, 使用方法一將模板位置和目標位置都寫text.txt，老頭就會直接複製這個text.txt作為輸出；而如果使用方法二，模板位置和目標位置不變，並傳入引數，在text.txt中就使用ejs語法寫上，最終老頭同樣會輸出乙個test.txt檔案，不一樣的是裡面的內容被渲染成了"你好啊"。

對此方法的總結就是根據需要使用copy或copytpl進行輸出，其中copytpl中的渲染使用ejs語法進行，而模板檔案就都放在index.js的同級templates目錄裡邊。

四、install方法

此方法即用來自動執行依賴的安裝，沒什麼特別的，就是在構建完成後自動幫你npm install和bower install，也可以禁用其中一種:

install() );
}

效果就是下圖這句話了:

發布之前可以先使用npm link對映到本地進行測試:

npm link yo ngtimo

確認無誤後，發布流程就是一句**的事(記得定好版本，且更新發布時記得更新版本號):

npm publish

以上是這一整天的全部所學，下面給出可能有用的資源:

使用yeoman構建angular應用

前端工程構建工具之Yeoman

yeoman 使用5 外加git使用

yeoman 介紹安裝和使用

使用yeoman構建angular應用

前端工程構建工具之Yeoman

yeoman 使用5 外加git使用

yeoman 介紹 安裝 和 使用

相關推薦

yeoman 介紹安裝和使用