前端工程師之路(五)

Bower 套件管理工具

雖說 Nodejs 神通廣大，可以讓你只要懂js就可以偷跨領域，不過我們本業還是Web前端工程師，學習Node主要還是希望可以協助我們發展更棒的前端流程，有了之前的Node的理解，接下來的章節，將開始介紹一些協助前端開發的常用工具(這些工具都會架構在Node之上)。

還記得之前提過的npm管理工具嗎? 可以讓你用很簡單的方法安裝nodejs套件，比方

npm install express  //安裝web開發套件

如果你喜歡這種安裝套件模式的話，bower將會是一個很棒的選擇。

Bower 是什麼?

簡單來說，他可以用像是npm的方法來安裝與管理你的 js 函示庫，比方 jQuery
以往當你的專案需要使用jQuery這種第三方函示庫時，會有以下幾種方式

1. 到 jQuery 官網，取得編譯後的 js 再嵌入自己的html中
2. 直接連外部的 cdn 服務
3. 重舊的專案copy過來

由於我們自認為是高階的工程師，怎麼可以用這麼普通的方法取得第三方函示庫，一定得用酷一點的方式XD

如果你使用了bower，如果你要使用 jquery 你只要再專案資料夾中執行

bower jquery

他就會自動幫你下載“`jquery““到你的專案中。

安裝 Bower

實際實作一下比較能體會，我們可以裡用npm安裝bower套件。

請打開cmd命令視窗，由於bower可以安裝全域模式(就是他是給整台電腦用的命令，不需要裝在特定專案裡，所以cmd開在哪個路徑下就無所謂了)，打開cmd後，輸入以下

npm install bower -g

按下enter後應該會開始安裝。

說明一下以上指令的意義，npm install bower 很明顯就是安裝bower這個套件，後面的 -g 很重要，這叫做全域安裝，代表bower是安裝於系統層級，往後不管cmd 路徑在哪裡，都可以使用bower這個套件。

換句話說，如果你忘了加上 -g ，就表示只有這個資料夾可以使用 bower ，你可能會想那我如果 npm install express -g 後是否以後就不用安裝 express了。

確實如你所想，不過一般而言我們不會這樣做，因為你不會希望，當需要升級某個專案時，卻影響到其他不須升級的專案，可能因為不相容而導致錯誤。

安裝完後，你可以試著執行

bower

他會列出 bower 的使用方法

使用 Bower

接下來我們來實際使用一下，首先cmd到你需要安裝套件的資料夾中。

如果你對於下 cmd 路徑感到麻煩，這裡教各位一個比較簡單切換路徑的方式，假設你在桌面上有個資料夾，你需要把 cmd 路徑設於此，你只需要打開這資料夾，並將滑鼠移到資料夾裡，接著按下鍵盤的shift 按鍵，並按下滑鼠的右鍵，開啟功能介面，介面中會多出一個在此處開啟命令視窗，我們選擇他後，就可以直接在這個路徑下啟動 cmd

我們在這裡試著安裝 jQuery

npm install jquery

會開始安裝，預設情況下，他會幫你放在bower_components的jquery裡面

之後你安裝 bower 套件的js後，他都會整理在這裡，你需要在html中嵌入這個路徑，bower_components\jquery\dist\jquery.min.js，或者是你想copy到其他地方。
如果你不喜歡預設路徑，實際上是可以修改的，不過我打算之後再談，因為我們大家都知道，看到bower_components這個資料夾，就是第三方函示庫。

預設安裝最新版本，如果想安裝其他版本的jquery怎麼辦? 我們先看看是否有其他版本，cmd 輸入

bower info jquery

他會列出目前版本編號，假設你需要安裝的是 1.9.1 的 jquery，你可以輸入

bower install jquery#1.9.1

如此便會幫你安裝正確的版本

bower 有一個很棒的功能，就是它會自動幫你安裝好相依的其他還函示庫，舉個例子，如果你需要安裝Bootstrap ，你可能使用以下方式安裝

bower install bootstrap

你會發覺，除了安裝好 Bootstrap 以外，他連 jQuery 也會一起安裝，因為 bower 會察覺，使用 Bootstrap 一定得安裝 jQuery (會尋找建議的版號)。

這樣子你就不會因為少裝了套件而導致不能使用。

附上官網資源，想深入理解可以詳讀
http://bower.io/