文章出處

在介紹之前,你必須的知道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是用來管理我們前端庫的。

 


文章列表


不含病毒。www.avast.com
文章標籤
全站熱搜
創作者介紹
創作者 大師兄 的頭像
大師兄

IT工程師數位筆記本

大師兄 發表在 痞客邦 留言(0) 人氣(0)