DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Web前端開發工具——bower依賴包管理工具
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,這樣的話,代碼就重復了。

  它們的結構就像這樣:

    bootstrap\jQuery
    xxxxxxxxx\jQuery

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

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

  3. NPM主要運用於Node.js項目的內部依賴包管理,安裝的模塊位於項目根目錄下的node_modules文件夾內。而Bower大部分情況下用於前端開發,對於CSS/JS/模板等內容進行依賴管理,依賴的下載目錄結構可以自定義。 -- 本段內容是在網上找到的。

  所謂的自定義目錄結構的意思是說,你在那個文件目錄打開的bower,那麼它就會在那個文件下,下載你需要的包,而npm就不支持這個。

總結:我們可以簡單的來理解npm是用來管理nodejs模塊的也就是包,而bower是用來管理我們前端庫的。

有關Web前端開發工具——bower依賴包管理工具小編就給大家介紹到這裡,希望對大家有所幫助!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved