Web前端開發工具－bower依賴套件管理工具_javascript技巧

Bower 是 twitter 推出的一款套件管理工具，基於nodejs的模組化思想，把功能分散到各個模組中，讓模組和模組之間存在聯繫，透過 Bower 管理模組間的這種聯繫。

套件管理工具一般有以下的功能：

a)註冊機制：每個包需要確定一個唯一的 ID 使得搜尋和下載的時候能夠正確匹配，所以包管理工具需要維護註冊信息，可以依賴其他平台。

b)檔案儲存：確定檔案存放的位置，下載的時候可以找到，當然這個位址在網路上是可存取的。

c)上傳下載：這是工具的主要功能，能提高包使用的便利性。例如想用 jquery 只需要 install 一下就可以了，不用到處找下載。上傳並不是必備的，根據文件儲存的位置而定，但需要有一定的機制保障。

d)依賴分析：這也是套件管理工具主要解決的問題之一，既然套件之間是有連結的，那麼下載的時候就需要處理他們之間的依賴。下載一個套件的時候也需要下載依賴的套件。

由於bower是基於nodejs開發的，所以你首先必須得有個nodejs環境，至於這麼安裝nodejs網上一大堆教程，對了使用bower還需要安裝git，這裡就不多說了。

bower帶來的好處

　　假如你有一個項目，裡面需要用到了JQuery在正常情況下我們需要到jQuery官方網站下載庫，這樣的話，每次jquery更新，我們又要到jQuery官方下載，那這樣的話就很麻煩了，如果有一個工具能夠輸入一個命令讓我們選擇要下載的版本，並且如果想把我們專案裡面的所有庫更新到最新版也只需要輸入一個命令那是不是很方便，bower的另一個好處就是如果你安裝bootstrap那麼它會自動下載jquery，因為bootstrap依賴了jquery，簡單的來說只要我們下載的那個庫依賴了另外的庫那麼bower會自動幫我們下載依賴的庫，bower就是這麼強大。

bower的安裝

　　npm install -g bower 表示安裝到全域環境

bower的使用

　　1. 透過bower下載庫

　　　　bower install (套件的名稱如：jquery)[#版本如：#1.7] 版本可選，如果沒有寫，預設下載最新版

　　　　如:bower install bootstrap#2.2

　　2. 如果需要更新所以的函式庫，我們可以輸入以下指令

　　　　bower update

如果需要生成一個你下載個包的所以信息，比如你在一個團隊中，你想讓其他人知道你都用了哪些庫，並且它們的版本是多少，那麼我們可以通過以下命令來完成。
　　我們需要先初始化一個套件描述。它會在你目前的執行環境目錄中建立一個bower.json的目錄

　　　　`bower init -y`

　　然後透過

　　　　`bower install jquery --save`

　　它會在bower.json文件中加入jquery的版本信息，如果你想添加多個可以通過空格bower install jquery bootstrap less --save

以下是bower.json檔案的內容

{
"name": "down",
"authors": [
"xxxxxxxx"
],
"description": "",
"main": "",
"moduleType": [],
"license": "MIT",
"homepage": "",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"bootstrap": "^3.3.6",
"less": "^2.6.1",
"jquery": "^2.2.2"
}
}

　　當然如果你是nodejs新手或許你會有些茫然，因為這裡並不是一個nodejs基礎教程，如果你想了解想學node的話還需要到網絡中學習。

　　bower除了這些好處以為，還有一些更強大的功能，那就需要大家去發現了，我這裡就不再介紹了，畢竟我也是剛開始學習node

----------------------------------------------- -------分割線-------------------------------------------------

bower與npm的關係

　　　安裝bower需要透過npm來安裝

bower與npm的差異：

　　1. 在之前的npm版本中，它不能共享依賴的程式碼，也就說，在以前的npm版本中，如果你下載了一個bootstrap，因為bootstrap是依賴jquery的，所以它會把jquery也下載下來，但是如果你的另一個函式庫也用到了jquery，那麼它也會去下載一個jquery，這樣的話，程式碼就重複了。

　　它們的結構就像這樣：

　　　　bootstrapjQuery
　　　　xxxxxxxxxxxxjQuery

　　它們重複了對吧，不過好像在npm的最新版本中解決了這個問題。

　　2. npm 會將開發環境一起下載下來，bower 只會下載 編譯後的前度模組。

　　3. NPM主要運用於Node.js專案的內部依賴套件管理，安裝的模組位於專案根目錄下的node_modules資料夾內。而Bower大部分情況下用於前端開發，對於CSS/JS/模板等內容進行依賴管理，依賴的下載目錄結構可以自訂。 -- 本段內容是在網路上找到的。

　　所謂的自訂目錄結構的意思是說，你在那個檔案目錄打開的bower，那麼它就會在那個檔案下，下載你需要的套件，而npm就不支援這個。

總結：我們可以簡單的來理解npm是用來管理nodejs模組的也就是套件，而bower是用來管理我們前端函式庫的。

有關Web前端開發工具－bower依賴套件管理工具小編就跟大家介紹到這裡，希望對大家有幫助！