您好,登錄后才能下訂單哦!
Yeoman
是現(xiàn)代化前端項(xiàng)目的腳手架工具,用于生成包含指定框架結(jié)構(gòu)的工程化目錄結(jié)構(gòu)。它是整個前端自動化工廠的第一站。
從個人使用者的角度來看,Yeoman
的地位有些雞肋,因?yàn)榱餍锌蚣茏詭У?code>cli工具都能夠自動生成官方推薦的目錄結(jié)構(gòu),而且一個項(xiàng)目持續(xù)少則幾個月多則幾年,而項(xiàng)目的初始化結(jié)構(gòu)目錄在此期間只需要生成一次。盡管工具的設(shè)計定位如此,但在組件化開發(fā)的潮流中,使用Yeoman
來生成符合項(xiàng)目編碼規(guī)范的組件框架是非常有必要的。
為了降低項(xiàng)目的維護(hù)成本,將要求的組件結(jié)構(gòu)和必要的使用說明生成組件模板,使用Yeoman
工具來直接生成,當(dāng)項(xiàng)目的體積越來越大時,你就會體會到這種方式的好處。
詳情請參考【Yeoman官方網(wǎng)站】
1.使用包管理工具安裝yo
使用npm:npm install -g yo
使用yarn:yarn global add yo
安裝后在命令行輸入yo --version
,顯示版本號則安裝成功。
2.下載項(xiàng)目目錄模板generator-XXX
開源社區(qū)有非常多的項(xiàng)目目錄模板,在命令行輸入npm install generator-fountain-webapp
或yarn add generator-fountain-webapp
安裝項(xiàng)目模板。Fountain
可以定制安裝各類集成的javascript
框架和CSS
框架。
3.用指定模板初始化項(xiàng)目目錄
在當(dāng)前文件夾開啟命令行,輸入yo XXX
(XXX
為generator模板后綴的名稱,例如yo fountain-webapp
),根據(jù)交互式命令行信息填寫參數(shù),最終即可生成項(xiàng)目目錄。
![使用fountain-webapp模板示意圖]
4. 子模板的使用
如果模板支持子模板功能,用戶通過yo XXX:YYY
即可生成項(xiàng)目組件,例如yo angular : controller
生成一個angularjs
項(xiàng)目中控制器的代碼骨架)。
你的團(tuán)隊(duì)很可能有自己封裝的框架,無法使用現(xiàn)有的generator
,同時yo
的速度不是很穩(wěn)定(據(jù)說是因?yàn)閮?nèi)置的generator搜索機(jī)制和墻的原因),慶幸地是其官方團(tuán)隊(duì)開源了yeoman
代碼,并有詳細(xì)的文檔解釋其運(yùn)行原理和機(jī)制,讓開發(fā)者可以根據(jù)團(tuán)隊(duì)需求定制合適的generator
生成器。
你可以通過如下方式使用它:
yeoman-generator
,使用yeoman
的API
編寫定制的模板文件(注意使用此種方法時,如果希望通過yo
來調(diào)用生成器,則需要按指定的方式編寫package.json
文件)。generator-generator
模板并使用yo generator
在當(dāng)前目錄生成模板文件骨架,并完善其生命周期方法。generator
的本質(zhì)是一個繼承自yeoman-generator
的匿名類,其代碼架構(gòu)如下:
const Generator = require('yeoman-generator');
module.exports = class extends Generator{
initianlizing(){
//獲取當(dāng)前項(xiàng)目狀態(tài),獲取基本配置參數(shù)等
}
prompting(){
//向用戶展示交互式問題收集關(guān)鍵參數(shù)
}
configuring(){
//保存配置相關(guān)信息且生成配置文件(名稱多為'.'開頭的配置文件,例如.editorconfig)
}
default(){
//未匹配任何生命周期方法的非私有方法均在此環(huán)節(jié)*自動*執(zhí)行
}
writing(){
//依據(jù)模板進(jìn)行新項(xiàng)目結(jié)構(gòu)的寫操作
}
conflicts(){
//處理沖突(內(nèi)部調(diào)用,一般不用處理)
}
install(){
//使用指定的包管理工具進(jìn)行依賴安裝(支持npm,bower,yarn)
}
end(){
//結(jié)束動作,例如清屏,輸出結(jié)束信息,say GoodBye等等
}
}
Yeoman-generator
提供了很多封裝好的方法,文檔詳細(xì)且源碼注釋非常詳細(xì),詳情可參見【Yeoman-generator官方API】
本地開發(fā)的generator-XXX
未經(jīng)過發(fā)布,需要在package.json
所在目錄開啟命令行,輸入npm link
將其安裝到本地的全局環(huán)境,然后通過yo XXX
或yo XXX:YYY
的方式來調(diào)用,也可以通過第四節(jié)中提及的工具鏈集成的方式繞開yo
命令執(zhí)行生成器。
與前端工程化工具鏈的集成或許是Yeoman
最恰當(dāng)?shù)臍w宿,為此Yeoman
團(tuán)隊(duì)索性開源開到底,直接公開了其核心庫yeoman-enviroment
,使得generator
模板可以不必通過yo
工具就可以被調(diào)用,引用的方式比較簡單:
var yeoman = require('yeoman-environment');
var env = yeoman.createEnv();
//generator-XXX模塊地址查詢
var generatorPath = require.resolve('generator-XXX','XXX:app');
//如果generator未使用npm link進(jìn)行連接,需要將其拷貝至工程依賴中按如下方式獲取地址
var generatorPath = path.resolve(process.cwd(),'node_modules','generator-XXX','generators','app');
//注冊generator
env.register(generatorPath, 'XXX:app');
//調(diào)用generator生成項(xiàng)目骨架或組件骨架
env.run('XXX:app', {'skip-install': true}, function (err) {
console.log('done');
});
在此演示如何制作一個小工具來生成標(biāo)準(zhǔn)化的Component
,示例工具使用generator-generator
生成,為方便學(xué)習(xí)使用,放置在本地node_modules
目錄中,示例generator
中只進(jìn)行了兩項(xiàng)基本操作:
在configuring
階段將.editorconfig
文件直接拷貝至當(dāng)前目錄
writing
階段將controller.tpl.js
模板中的占位符替換為用戶輸入的關(guān)鍵詞,然后生成新的controller.js
文件generator
中關(guān)鍵示例代碼:
//保存配置相關(guān)信息且生成配置文件(名稱多為'.'開頭的配置文件,例如.editorconfig)
configuring(){
//生成.editorconfig
this.fs.copy(
this.templatePath('.editorconfig'),
this.destinationPath('.editorconfig')
);
}
//依據(jù)模板進(jìn)行新項(xiàng)目結(jié)構(gòu)的寫操作
writing(){
//替換關(guān)鍵字生成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
運(yùn)行:
![使用tiny-helper小工具]
controller.tpl.js
模板:
![轉(zhuǎn)換前的模板]
轉(zhuǎn)換后的loginPageController.js
:
![轉(zhuǎn)換后的js文件]
可以看到我們已經(jīng)使用關(guān)鍵詞替換掉占位符并得到了新的controller.js
框架文件。除了演示的功能外,yeoman
內(nèi)置支持ejs
模板引擎,我們可以利用它生成各種html
模板,包括常見樣式的通用寫法,包含固定類名的組件DOM結(jié)構(gòu)等等,這對于統(tǒng)一團(tuán)隊(duì)代碼風(fēng)格有著重要的意義。
筆者認(rèn)為整體而言,
Yeoman
作為腳手架工具的存在意義,遠(yuǎn)不及對于提升代碼規(guī)范性的價值。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。