Yeoman-- 一個強大的前端構(gòu)建工具

上期跟大家試了試Vue-cli這個構(gòu)建工具,這個讓我想起了很多其他的前端工具,其中一個就是Yeoman(上次就劇透了的),所以這期跟大家先簡單介紹下這個腳手架工具,然后慢慢一步步深入下去。

先說說Yeoman是什么,它想做什么?

Yeamon幫助你快速的開展一個項目工程,提供最佳實踐和工具,來讓你保持高效率編碼。

他們自己提供了一個構(gòu)建生態(tài)系統(tǒng),主要通過‘yo’這個命令來構(gòu)建一個完整的項目或者項目的一部分。

通過官方的生成器,他們建立了一個Yeoman的工作流,這個流是由一個強大的,固定的客戶端組建,包含工具和框架幫助開發(fā)者快速建立牛逼的web應用。他們盡量提供了開發(fā)者所需的東西。

作為良好文檔和深入思考構(gòu)建過程的思想者,Yeoman包含了檢測(靜態(tài)檢測)、測試以及壓縮等等一系列工具,讓開發(fā)者能夠更加專注于思考解決方案。

Yeoman其實是3個工具的總和:

  • yo --- 腳手架,自動生成工具
  • Grunt、gulp --- 構(gòu)建工具 (最初只有g(shù)runt,后面gulp火了添加進來的)
  • Bower、npm --- 包管理工具 (原來是 bower,后面添加了npm)

上面的三個是各自獨立發(fā)展和運行的,混合后效果就不一樣,主要在于yo,相當于一個粘合劑一樣,把grunt這些工具粘合在一起。

安裝方式,一行代碼

npm install -g yo //權(quán)限不夠,請加上 sudo,一般來說mac都需要。

安裝完成之后,你就擁有了1個命令 -- yo

Paste_Image.png

看到,使用時,官方已經(jīng)在提示你了,我們選擇 Install a generator,輸入react,得到很多選擇,我選擇了 react-fullstack(如果安裝需要權(quán)限,sudo yo即可,注意看安裝失敗的log)

Paste_Image.png

接著等待安裝,進度條時間,談談這個命令,yo這個命令跟前面vue-cli一樣,現(xiàn)在下載的generator其實就是相當于模板一樣,來生成你需要的project的最基本架構(gòu),包括你主要使用的框架-- react、angular、polymer、backbone、ember,構(gòu)建工具---grunt、gulp、webpack等,現(xiàn)在還包括了nodejs的模塊--express、node-webkit等等一系列各種工具。

官方生成器: http://yeoman.io/generators/

如果不用yo命令來安裝generator,可以自己手動安裝你想要的:

npm install -g generator-react-fullstack // 記得權(quán)限,記得給包前面加上generator.

裝完界面變成這個樣子了,我們選擇generator,run一下。

Paste_Image.png

同樣,我們需要填寫一個信息來配置下項目名稱,又是進度條時間。

現(xiàn)在你可以看見你的文件夾下面已經(jīng)有新的文件和文件夾建立出來,等待完成,然后

npm run start
Paste_Image.png

頁面如圖所示:

Paste_Image.png

這個項目挺值得研究的,他比 Tj大神的frontend-boilerplate這個復雜,而且使用的東西更多。具體可以參考它的github主頁。

我們可以看到的是,幾個簡單的命令,Yeoman就幫助我們建立一個項目,而且項目已經(jīng)填充了不少代碼,我們可以選擇一個自己喜歡的,來沿著別人的已經(jīng)搭建好的構(gòu)架來編寫業(yè)務即可,這對很多新手來說是非常好的一種提高方式,所以建議大家選star多的 ---代碼風格好,文件夾規(guī)劃清晰,js的模塊拆分細致合理。

那么我們再后面的某一期來實踐下,編寫一個自己的generator玩玩

參考網(wǎng)站: http://yeoman.io/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容