大前端的自動化工廠（1）——Yeoman

一.Yeoman是什麼

Yeoman是現代化前端項目的腳手架工具，用於生成包含指定框架結構的工程化目錄結構。它是整個前端自動化工廠的第一站。

從我的使用者的角度來看，Yeoman的地位有些雞肋，由於流行框架自帶的cli工具都可以自動生成官方推薦的目錄結構，並且一個項目持續少則幾個月多則幾年，而項目的初始化結構目錄在此期間只須要生成一次。儘管工具的設計定位如此，但在組件化開發的潮流中，使用Yeoman來生成符合項目編碼規範的組件框架是很是有必要的。

爲了下降項目的維護成本，將要求的組件結構和必要的使用說明生成組件模板，使用Yeoman工具來直接生成，當項目的體積愈來愈大時，你就會體會到這種方式的好處。

二.Yeoman的通常使用方法

詳情請參考【Yeoman官方網站】

1.使用包管理工具安裝yo

• 使用npm：npm install -g yo

• 使用yarn：yarn global add yo

  安裝後在命令行輸入yo --version，顯示版本號則安裝成功。

2.下載項目目錄模板generator-XXX

開源社區有很是多的項目目錄模板，在命令行輸入npm install generator-fountain-webapp或yarn add generator-fountain-webapp安裝項目模板。Fountain能夠定製安裝各種集成的javascript框架和CSS框架。

3.用指定模板初始化項目目錄

在當前文件夾開啓命令行，輸入yo XXX(XXX爲generator模板後綴的名稱,例如yo fountain-webapp)，根據交互式命令行信息填寫參數，最終便可生成項目目錄。

[使用fountain-webapp模板示意圖]

4. 子模板的使用

若是模板支持子模板功能，用戶經過yo XXX：YYY便可生成項目組件，例如yo angular : controller生成一個angularjs項目中控制器的代碼骨架)。

三.構建本身的腳手架

你的團隊極可能有本身封裝的框架，沒法使用現有的generator,同時yo的速度不是很穩定（聽說是由於內置的generator搜索機制和牆的緣由），慶幸地是其官方團隊開源了yeoman代碼，並有詳細的文檔解釋其運行原理和機制，讓開發者能夠根據團隊需求定製合適的generator生成器。

3.1 使用方法

你能夠經過以下方式使用它：

1. 經過在本身的項目中引用yeoman-generator，使用yeoman的API編寫定製的模板文件(注意使用此種方法時，若是但願經過yo來調用生成器，則須要按指定的方式編寫package.json文件)。
2. 下載generator-generator模板並使用yo generator在當前目錄生成模板文件骨架，並完善其生命週期方法。

3.2 generator的生命週期

generator的本質是一個繼承自yeoman-generator的匿名類，其代碼架構以下:

const Generator = require('yeoman-generator');
module.exports = class extends Generator{
    initianlizing(){
        //獲取當前項目狀態，獲取基本配置參數等
    }
    prompting(){
        //向用戶展現交互式問題收集關鍵參數
    }
    configuring(){
        //保存配置相關信息且生成配置文件（名稱多爲'.'開頭的配置文件,例如.editorconfig）
    }
    default(){
        //未匹配任何生命週期方法的非私有方法均在此環節*自動*執行
    }
    writing(){
        //依據模板進行新項目結構的寫操做
    }
    conflicts(){
        //處理衝突(內部調用，通常不用處理）
    }
    install(){
        //使用指定的包管理工具進行依賴安裝(支持npm,bower,yarn)
    }
    end(){
        //結束動做，例如清屏，輸出結束信息，say GoodBye等等
    }
}

Yeoman-generator提供了不少封裝好的方法，文檔詳細且源碼註釋很是詳細，詳情可參見【Yeoman-generator官方API】

3.3 generator的調用

本地開發的generator-XXX未通過發佈，須要在package.json所在目錄開啓命令行，輸入npm link將其安裝到本地的全局環境，而後經過yo XXX或yo XXX：YYY的方式來調用，也能夠經過第四節中說起的工具鏈集成的方式繞開yo命令執行生成器。

四. Yeoman與工具鏈集成

與前端工程化工具鏈的集成或許是Yeoman最恰當的歸宿，爲此Yeoman團隊索性開源開到底，直接公開了其核心庫yeoman-enviroment，使得generator模板能夠沒必要經過yo工具就能夠被調用，引用的方式比較簡單：

var yeoman = require('yeoman-environment');
var env = yeoman.createEnv();

//generator-XXX模塊地址查詢
var generatorPath = require.resolve('generator-XXX','XXX:app');

//若是generator未使用npm link進行鏈接，須要將其拷貝至工程依賴中按以下方式獲取地址
var generatorPath = path.resolve(process.cwd(),'node_modules','generator-XXX','generators','app');

//註冊generator
env.register(generatorPath, 'XXX:app');

//調用generator生成項目骨架或組件骨架
env.run('XXX:app', {'skip-install': true}, function (err) {
    console.log('done');
});

五. 實戰：tiny-helper工具開發演示

在此演示如何製做一個小工具來生成標準化的Component,示例工具使用generator-generator生成，爲方便學習使用，放置在本地node_modules目錄中，示例generator中只進行了兩項基本操做：

1. 在configuring階段將.editorconfig文件直接拷貝至當前目錄

2. 在writing階段將controller.tpl.js模板中的佔位符替換爲用戶輸入的關鍵詞，而後生成新的controller.js文件

generator中關鍵示例代碼：

//保存配置相關信息且生成配置文件（名稱多爲'.'開頭的配置文件,例如.editorconfig）
configuring(){
    //生成.editorconfig
    this.fs.copy(
      this.templatePath('.editorconfig'),
      this.destinationPath('.editorconfig')
    );
}

//依據模板進行新項目結構的寫操做
writing(){
    //替換關鍵字生成Controller.js
    var controllerTpl = this.fs.read(this.templatePath('controller.tpl.js'));
    this.fs.write(this.destinationPath('controller/'+ this.props.keyWords + 'Controller.js'),controllerTpl.replace(/__PLACEHOLDER__TINY__/g, this.props.keyWords));
}

在命令行輸入npm run tiny運行：

[使用tiny-helper小工具]

controller.tpl.js模板：

[轉換前的模板]

轉換後的loginPageController.js:

[轉換後的js文件]

能夠看到咱們已經使用關鍵詞替換掉佔位符並獲得了新的controller.js框架文件。除了演示的功能外，yeoman內置支持ejs模板引擎，咱們能夠利用它生成各類html模板，包括常見樣式的通用寫法,包含固定類名的組件DOM結構等等，這對於統一團隊代碼風格有着重要的意義。

筆者認爲總體而言，Yeoman做爲腳手架工具的存在乎義，遠不及對於提高代碼規範性的價值。