ASP.NET MVC - 真正的Web前端套件管理工具Bower

15 September 2014 — Written by Sky Chang
#ASP.NET#ASP.NET MVC#Bower#Git#GitHub#Node.js#npm#NuGet

如果說…Scott Gu發表了Blog文章,那就代表了Azure又一堆東西要更新了…而如果是Scott Hanselman發表文章,那就代表著Microsoft這邊的Web開發又有新玩意了… ( 所以本質上,小弟本人滿討厭他們發文章的XDD )

而這次要探討的就是由Scott Hanselman發表的一篇文章,這篇文章的內文,大致上是講VS 2014將更加地符合現代前端的開發使用者,並且支援NPM、Bower、Gulp這些東西…

啥,完全沒聽過!?…其實沒聽過也是正常的,畢竟這些都屬於前端的玩意,Microsoft陣營的朋友可能都沒聽過,但對於JavaScript的神人,這些東西就等同於我們的NuGet一樣的平凡,而且每天都在用喔!!~~

所以今天來看一下Bower這個玩意…

Bower

是Twitter推出的,管理Web Package的一個工具,是的,他很像NuGet,我們可以透過Bower來進行套件的下載、相依性的管理;那大家的第一個疑問是…那和NuGet有啥兩樣!?…根據Scott的解釋是說…NuGet是Server端的套件管理工具,而Bower是前端的套件管理工具…那為什麼NuGet不能包含前端呢? ( 其實現在也有包含前端 ),Scott是說,因為目前已經有很多很棒的工具了…既然如此,那為何不用人家準備好的工具呢!??

好…基本上政治議題不是我們能關切與參與的…身為Developer,我們只要知道未來有怎樣的改變就好,所以…我們還是來看看Bower吧!!

image

首先,我們要安裝Bower之前…我們要先安裝npm…而npm則需要Node.js…所以大家可以翻翻小弟之前的文章,基本上Node.js很好安裝的;安裝完成之後,我們就擁有了npm,我們就可以輸入以下指令來安裝bower。

image

安裝完成之後,我們就可以隨處的安裝我們要的套件…,如果不知道有那些套件,可以從官網去做搜尋…

image

那接下來要怎樣安裝套件呢??大家可以參考官網的說明,基本上可以用install就可以來安裝套件,後面還可以接Git喔!!

image

那這邊,我有開了一個BowerTest的專案,我打算在這個空的專案底下裝上AngularJS;所以我就可以輸入。

bower install angular

但按下後,就遇到問題了…Orz…那是因為Bower下載需要透過Git…而且要設定PATH… ( 到這邊大家有沒有覺得其實Microsoft以前都幫我們處理得好好的,真的很幸福!? )

image

接下來,大家可以去網路上下載Git,然後再自行設定PATH,或是和小弟一樣,將很懶的個性發揮到極致…

小弟這邊的做法是去GitHub下載GitHub for Windows,這樣就有Git的指令了…但是雖然有Git的指令,但還是沒有設定PATH,而小弟也懶得去設定…所以小弟就直接打開Git Shell…

image

然後再一次,就可以了!!

image

基本上,bower會將下載來的東西放到bower_components底下…

image

大家如果看到上圖,應該會覺得,為啥AngularJS的東西那麼少…其實大家可以去AngularJS的GitHub看到,它們把所需要的東西都拆開了喔~~,如果想要一次下載全部版本,也可以去找angular-latest的這個版本。

image

自訂Package

接下來,我們可以自行定義Package,這邊指的Package有兩種涵義,一種是自己開發的Lib包成Package,放到Bower Server給大家下載;另外一種涵義則是把自行常用的東西包成一個.json檔案,到時候可以快速的一次下載;而這邊講的是後者喔。

首先,我們可以使用

bower init

這個指令,這個指令可以幫助我們建立bower.json檔案,到時候我們就可以把這個檔案Copy到其他專案快速重新下載Lib使用;過程中,會問一些小問題,後面會解釋到。

image

這邊列出了bower.json裡面用到的參數,那基本上也和建立bower.json時所問的問題差不多,相信大家比較一下大概就會清楚了,基本上,如果是自用,大概只需要填名稱,其他全部都選yes就可以了。

  • name (必填): 你的package名稱,如果未來要放到Bower Server上,公開給別人使用,則需要特別注意名稱。
  • version: 版本號。
  • main string or array: 你這個Package主要的檔案。
  • ignore array: 你希望Bower略過的檔案。
  • keywords array of string: 如果放到Bower Server上,關於你這個package的關鍵字,這有助於被容易尋找到。
  • dependencies hash: 相依的package,也可以標明版本。
  • devDependencies hash: 開發用的dependencies。
  • private boolean: 如果設為True,就可以防止被傳到Bower Server上去。

另外上面的選項還有what types of modules  does this package expose?,表示你使用哪一種JS的modules…例如 amd、es6等等…通常沒特別的話,按下enter,略過就可以。

set currently installed components as dependencies? 是否將目前安裝的套建設為依賴。 add commonly ignored files to ignore list?: 是否添加常用忽略的文件列表。

完成之後,就可以看到,再根目錄,出現了bower.json檔案嚕。

image

將新的套件加入到bower.json裡面

另外,我想應該不會有人想要每次加入一個新的套件,就init吧…所以官網有提供以下指令,可以讓大家再加入新套件的時候,順便寫到bower.json檔案裡面去。

image

這邊,我們就加入bootstrap~。

image

完成之後,我們就可以看到,相依了bootstrap了喔!~

image

還原

最後就是要進行還原,我們這邊開了一個新的WebApplication專案;接下來,我們把bower.json拷貝過來。

image

然後輸入bower install,就會立刻還原成功了喔!!!

image

有沒有很簡單勒??…當然,官方還有一些API,大家如果有興趣的話,可以再去看一看喔!!

參考資料

Sky & Study4.TW