?

?

?

?

?

?

轉自：https://blog.csdn.net/u011537073/article/details/52951122

前言
一個新的web項目開始，我們總是很自然地去下載需要用到的js類庫文件，比如jQuery，去官網下載名為jquery-1.10.2.min.js文件，放到我們的項目里。當項目又需要bootstrap的時候，我們會重復剛才的工作，去bootstrap官網下載對應的類庫。如果bootstrap所依賴的jQuery并不是1.10.2，而是2.0.3時，我們會再重新下載一個對應版本的jQuery替換原來的。

包管理是個復雜的問題，我們要知道誰依賴誰，還要明確哪個版本依賴哪個版本。這些對于開發人員來說，負擔過重了。bower作為一個js依賴管理的工具，提供一種理想包管理方式，借助了npm的一些思想，為我們提供一個舒服的開發環境。

你要還不動起手來試試bower，那你一定不會知道，前端開發是件多么享受的事。

目錄

bower介紹

bower安裝

bower命令

bower使用

用bower提交自己類庫

1. bower介紹

Bower 是 twitter 推出的一款包管理工具，基于nodejs的模塊化思想，把功能分散到各個模塊中，讓模塊和模塊之間存在聯系，通過 Bower 來管理模塊間的這種聯系。

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

• 注冊機制：每個包需要確定一個唯一的 ID 使得搜索和下載的時候能夠正確匹配，所以包管理工具需要維護注冊信息，可以依賴其他平臺。
• 文件存儲：確定文件存放的位置，下載的時候可以找到，當然這個地址在網絡上是可訪問的。
• 上傳下載：這是工具的主要功能，能提高包使用的便利性。比如想用 jquery 只需要 install 一下就可以了，不用到處找下載。上傳并不是必備的，根據文件存儲的位置而定，但需要有一定的機制保障。
• 依賴分析：這也是包管理工具主要解決的問題之一，既然包之間是有聯系的，那么下載的時候就需要處理他們之間的依賴。下載一個包的時候也需要下載依賴的包。

功能介紹，摘自文章：http://chuo.me/2013/02/twitter-bower.html

2. bower安裝

bower插件是通過npm, Node.js包管理器安裝和管理的.

我的系統環境

• win7 64bit
• Nodejs:v0.10.5
• Npm:1.2.19

~ D:\workspace\javascript>node -v v0.10.5~ D:\workspace\javascript>npm -v 1.2.19

在系統中，我們已經安裝好了Nodejs和npm。win7安裝nodejs請參考文章：Nodejs開發框架Express3.0開發手記–從零開始

安裝bower?
全局安裝bower

~ D:\workspace\javascript>npm install bower -g

新建一個express3的項目nodejs-bower

~ D:\workspace\javascript>express -e nodejs-bower ~ D:\workspace\javascript>cd nodejs-bower && npm install

3. bower命令

bower安裝后，我們就可以用bower這個命令了。

~ D:\workspace\javascript\nodejs-bower>bower Usage:bower [] [] Commands:cache Manage bower cachehelp Display help information about Bowerhome Opens a package homepage into your favorite browserinfo Info of a particular packageinit Interactively create a bower.json fileinstall Install a package locallylink Symlink a package folderlist List local packageslookup Look up a package URL by nameprune Removes local extraneous packagesregister Register a packagesearch Search for a package by nameupdate Update a local packageuninstall Remove a local package Options:-f, --force Makes various commands more forceful-j, --json Output consumable JSON-l, --log-level What level of logs to report-o, --offline Do not hit the network-q, --quiet Only output important information-s, --silent Do not output anything, besides errors-V, --verbose Makes output more verbose--allow-root Allows running commands as root See 'bower help ' for more information on a specific command.

Commands，列出了bower支持的各種命令。

• cache:bower緩存管理
• help:顯示Bower命令的幫助信息
• home:通過瀏覽器打開一個包的github發布頁
• info:查看包的信息
• init:創建bower.json文件
• install:安裝包到項目
• link:在本地bower庫建立一個項目鏈接
• list:列出項目已安裝的包
• lookup:根據包名查詢包的URL
• prune:刪除項目無關的包
• register:注冊一個包
• search:搜索包
• update:更新項目的包
• uninstall:刪除項目的包

4. bower使用

1). 安裝jQuery到項目nodejs-bower

~ D:\workspace\javascript\nodejs-bower>bower install jquery bower jquery#* not-cached git://github.com/components/jquery.git#* bower jquery#* resolve git://github.com/components/jquery.git#* bower jquery#* download https://github.com/components/jquery/archive/2.0.3.tar.gz bower jquery#* extract archive.tar.gz bower jquery#* resolved git://github.com/components/jquery.git#2.0.3 bower jquery#~2.0.3 install jquery#2.0.3jquery#2.0.3 bower_components\jquery

通過執行命令，我們可以看到jQuery的最新版本被下載，并安裝到項目的bower_components\jquery目錄

查看bower_components/jquery目錄，發現了3個文件。

~ D:\workspace\javascript\nodejs-bower>ls bower_components/jquery -a . .. .bower.json component.json jquery.js

同樣地，我們的項目還需要d3的類庫

~ D:\workspace\javascript\nodejs-bower>bower install d3 bower d3#* not-cached git://github.com/mbostock/d3.git#* bower d3#* resolve git://github.com/mbostock/d3.git#* bower d3#* download https://github.com/mbostock/d3/archive/v3.2.8.tar.gz bower d3#* extract archive.tar.gz bower d3#* resolved git://github.com/mbostock/d3.git#3.2.8 bower d3#~3.2.8 install d3#3.2.8d3#3.2.8 bower_components\d3

非常方便，下載并安裝完成！

2). 查看項目中已導入的類庫

~ D:\workspace\javascript\nodejs-bower>bower list bower check-new Checking for new versions of the project dependencies.. nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower ├── d3#3.2.8 └── jquery#2.0.3

3). 安裝bootstrap庫，并查看依賴情況

~ D:\workspace\javascript\nodejs-bower>bower install bootstrap bower bootstrap#* cached git://github.com/twbs/bootstrap.git#3.0.0-rc1 bower bootstrap#* validate 3.0.0-rc1 against git://github.com/twbs/bootstrap.git#* bower jquery#>= 1.9.0 cached git://github.com/components/jquery.git#2.0.3 bower jquery#>= 1.9.0 validate 2.0.3 against git://github.com/components/jquery.git#>= 1.9.0 bower bootstrap#~3.0.0-rc1 install bootstrap#3.0.0-rc1bootstrap#3.0.0-rc1 bower_components\bootstrap └── jquery#2.0.3~ D:\workspace\javascript\nodejs-bower>bower list bower check-new Checking for new versions of the project dependencies.. nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower ├─┬ bootstrap#3.0.0-rc1 extraneous │ └── jquery#2.0.3 ├── d3#3.2.8 └── jquery#2.0.3

我們發現bootstrap，對jquery是有依賴的。

4). 刪除jQuery庫，破壞依賴關系

~ D:\workspace\javascript\nodejs-bower>bower uninstall jquery bower conflict bootstrap depends on jquery Continue anyway? (y/n) y bower uninstall jquery~ D:\workspace\javascript\nodejs-bower>bower list bower check-new Checking for new versions of the project dependencies.. nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower ├─┬ bootstrap#3.0.0-rc1 extraneous │ └── jquery missing ├── d3#3.2.8 └── jquery missing

5). 安裝低版本的jQuery，制造不版本兼容

~ D:\workspace\javascript\nodejs-bower>bower install jquery#1.7.2 bower jquery#~2.0.3 cached git://github.com/components/jquery.git#2.0.3 bower jquery#~2.0.3 validate 2.0.3 against git://github.com/components/jquery.git#~2.0.3 bower jquery#>= 1.9.0 cached git://github.com/components/jquery.git#2.0.3 bower jquery#>= 1.9.0 validate 2.0.3 against git://github.com/components/jquery.git#>= 1.9.0 bower jquery#1.7.2 cached git://github.com/components/jquery.git#1.7.2 bower jquery#1.7.2 validate 1.7.2 against git://github.com/components/jquery.git#1.7.2Unable to find a suitable version for jquery, please choose one:1) jquery#1.7.2 which resolved to 1.7.22) jquery#~2.0.3 which resolved to 2.0.3 and has nodejs-bower as dependants3) jquery#>= 1.9.0 which resolved to 2.0.3 and has bootstrap#3.0.0-rc1 as dependantsPrefix the choice with ! to persist it to bower.jsonChoice: 1 bower jquery#1.7.2 install jquery#1.7.2jquery#1.7.2 bower_components\jquery~ D:\workspace\javascript\nodejs-bower>bower list bower check-new Checking for new versions of the project dependencies.. nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower ├─┬ bootstrap#3.0.0-rc1 extraneous │ └── jquery#1.7.2 incompatible with >= 1.9.0 (2.0.3 available) ├── d3#3.2.8 └── jquery#1.7.2 incompatible with ~2.0.3 (2.0.3 available)

我們可以清楚的看到bower，很明確的告訴了我們，jquery和bootstrap是不兼容的，強大之處大家應該有所體會。

6).升級jQuery，讓版本兼容

~ D:\workspace\javascript\nodejs-bower>bower update jquery bower jquery#~2.0.3 cached git://github.com/components/jquery.git#2.0.3 bower jquery#~2.0.3 validate 2.0.3 against git://github.com/components/jquery.git#~2.0.3 bower jquery#>= 1.9.0 cached git://github.com/components/jquery.git#2.0.3 bower jquery#>= 1.9.0 validate 2.0.3 against git://github.com/components/jquery.git#>= 1.9.0 bower jquery#~2.0.3 install jquery#2.0.3jquery#2.0.3 bower_components\jquery~ D:\workspace\javascript\nodejs-bower>bower list bower check-new Checking for new versions of the project dependencies.. nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower ├─┬ bootstrap#3.0.0-rc1 extraneous │ └── jquery#2.0.3 ├── d3#3.2.8 └── jquery#2.0.3

多么智能，一鍵搞定，這才是高效的開發。

7). 查看本地bower已經緩存的類庫

~ D:\workspace\javascript\nodejs-bower>bower cache list bootstrap=git://github.com/twbs/bootstrap.git#3.0.0-rc1 d3=git://github.com/mbostock/d3.git#3.2.8 jquery=git://github.com/components/jquery.git#1.7.2 jquery=git://github.com/components/jquery.git#2.0.3

8). 查看D3庫信息

~ D:\workspace\javascript\nodejs-bower>bower info d3 d3Versions:- 3.2.8- 3.2.7- 3.2.6- 3.2.5- 3.2.4- 3.2.3...

9). 查看dojo庫的url

~ D:\workspace\javascript\nodejs-bower>bower lookup dojo dojo git://github.com/dojo/dojo.git

10). 用瀏覽器打開dojo的發布主頁

~ D:\workspace\javascript\nodejs-bower>bower home dojo bower dojo#* not-cached git://github.com/dojo/dojo.git#* bower dojo#* resolve git://github.com/dojo/dojo.git#* bower dojo#* download https://github.com/dojo/dojo/archive/1.9.1.tar.gz bower dojo#* extract archive.tar.gz bower dojo#* resolved git://github.com/dojo/dojo.git#1.9.1

瀏覽器自動打開：https://github.com/dojo/dojo

11). 查詢包含dojo的類庫

~ D:\workspace\javascript\nodejs-bower>bower search dojo Search results:dojo git://github.com/dojo/dojo.gitdojox git://github.com/dojo/dojox.gitdojo-util git://github.com/dojo/util.gitdojo-bootstrap git://github.com/samvdb/Dojo-Bootstrap

真是方便實用的技術。

5. 用bower提交自己類庫

1). 生成bower.json配置文件

~ D:\workspace\javascript\nodejs-bower>bower init bower existing The existing bower.json file will be used and filled in [?] name: nodejs-bower [?] version: 0.0.0 [?] main file: [?] set currently installed components as dependencies? No [?] add commonly ignored files to ignore list? Yes

查看生成的文件bower.json

{"name": "nodejs-bower","version": "0.0.0","ignore": ["**/.*","node_modules","bower_components","test","tests"],"dependencies": {"d3": "git://github.com/mbostock/d3.git#~3.2.8","jquery": "git://github.com/components/jquery.git#~2.0.3"} }

2). 在github創建一個資源庫：nodejs-bower
3). 本地工程綁定github

~ D:\workspace\javascript\nodejs-bower>git init Initialized empty Git repository in D:/workspace/javascript/nodejs-bower/.git/~ D:\workspace\javascript\nodejs-bower>git add . ~ D:\workspace\javascript\nodejs-bower>git commit -m "first commit" # On branch master # # Initial commit # # Untracked files: # (use "git add ..." to include in what will be committed) # # app.js # bower.json # bower_components/ # node_modules/ # package.json # public/ # routes/ # views/ nothing added to commit but untracked files present (use "git add" to track)~ D:\workspace\javascript\nodejs-bower>git remote add origin https://github.com/bsspirit/nodejs-bower~ D:\workspace\javascript\nodejs-bower>git push -u origin master Counting objects: 565, done. Delta compression using up to 4 threads. Compressing objects: 100% (516/516), done. Writing objects: 100% (565/565), 803.08 KiB, done. Total 565 (delta 26), reused 0 (delta 0) To https://github.com/bsspirit/nodejs-bower* [new branch] master -> master Branch master set up to track remote branch master from origin.

4). 注冊到bower官方類庫

~ D:\workspace\javascript\nodejs-bower>bower register nodejs-bower git@github.com:bsspirit/nodejs-bower.git bower convert Converted git@github.com:bsspirit/nodejs-bower.git to git://github.com/bsspirit/n odejs-bower.git bower nodejs-bower#* resolve git://github.com/bsspirit/nodejs-bower.git#* bower nodejs-bower#* checkout master bower nodejs-bower#* resolved git://github.com/bsspirit/nodejs-bower.git#af3ceaac07 Registering a package will make it visible and installable via the registry (https://bower.herokuapp.com), continue? (y/ n) y bower nodejs-bower register git://github.com/bsspirit/nodejs-bower.gitPackage nodejs-bower registered successfully! All valid semver tags on git://github.com/bsspirit/nodejs-bower.git will be available as versions. To publish a new version, you just need release a valid semver tag.Run bower info nodejs-bower to list the package versions.

5). 查詢我們自己的包

D:\workspace\javascript\nodejs-bower>bower search nodejs-bower Search results:nodejs-bower git://github.com/bsspirit/nodejs-bower.git

6). 安裝我們自己的包

D:\workspace\javascript\nodejs-bower>bower install nodejs-bower bower nodejs-bower#* cached git://github.com/bsspirit/nodejs-bower.git#af3ceaac07 bower nodejs-bower#* validate af3ceaac07 against git://github.com/bsspirit/nodejs-bower.git#* bower nodejs-bower#* install nodejs-bower#af3ceaac07nodejs-bower#af3ceaac07 bower_components\nodejs-bower ├── d3#3.2.8 └── jquery#2.0.3

其實模塊化，版本依賴，開發類庫，發布類庫，安裝類庫，都是一條命令！還能再簡單一點么！快把項目模塊化，然后分享給大家吧！！未來是屬于開發者的。

轉載請注明出處：
http://blog.fens.me/nodejs-bower-intro/

總結

以上是生活随笔為你收集整理的90.bower解决js的依赖管理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。