大前端的自動化工廠——Yeoman

【小宅按】 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-webappyarn 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,使用yeomanAPI編寫定制的模板文件(註意使用此種方法時,如果希望通過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等等
}
}

赞(0)