從零開始nodejs系列文章，將介紹如何利Javascript做為服務(wù)端腳本，通過Nodejs框架web開發(fā)。Nodejs框架是基于V8的引擎，是目前速度最快的Javascript引擎。chrome瀏覽器就基于V8，同時打開20-30個網(wǎng)頁都很流暢。Nodejs標準的web開發(fā)框架Express，可以幫助我們迅速建立web站點，比起PHP的開發(fā)效率更高，而且學(xué)習(xí)曲線更低。非常適合小型網(wǎng)站，個性化網(wǎng)站，我們自己的Geek網(wǎng)站??！
關(guān)于作者
轉(zhuǎn)載請注明出處：
http://blog.fens.me/nodejs-bower-intro/
前言
一個新的web項目開始，我們總是很自然地去下載需要用到的js類庫文件，比如jQuery，去官網(wǎng)下載名為jquery-1.10.2.min.js文件，放到我們的項目里。當項目又需要bootstrap的時候，我們會重復(fù)剛才的工作，去bootstrap官網(wǎng)下載對應(yīng)的類庫。如果bootstrap所依賴的jQuery并不是1.10.2，而是2.0.3時，我們會再重新下載一個對應(yīng)版本的jQuery替換原來的。
包管理是個復(fù)雜的問題，我們要知道誰依賴誰，還要明確哪個版本依賴哪個版本。這些對于開發(fā)人員來說，負擔過重了。bower作為一個js依賴管理的工具，提供一種理想包管理方式，借助了npm的一些思想，為我們提供一個舒服的開發(fā)環(huán)境。
你要還不動起手來試試bower，那你一定不會知道，前端開發(fā)是件多么享受的事。
目錄
Bower 是 twitter 推出的一款包管理工具，基于nodejs的模塊化思想，把功能分散到各個模塊中，讓模塊和模塊之間存在聯(lián)系，通過 Bower 來管理模塊間的這種聯(lián)系。
包管理工具一般有以下的功能：
功能介紹，摘自文章：http://chuo.me/2013/02/twitter-bower.html
bower插件是通過npm, Node.js包管理器安裝和管理的.
我的系統(tǒng)環(huán)境
~ D:\workspace\javascript>node -vv0.10.5~ D:\workspace\javascript>npm -v1.2.19在系統(tǒng)中，我們已經(jīng)安裝好了Nodejs和npm。win7安裝nodejs請參考文章：Nodejs開發(fā)框架Express3.0開發(fā)手記–從零開始
安裝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 installbower安裝后，我們就可以用bower這個命令了。
~ D:\workspace\javascript\nodejs-bower>bowerUsage: bower ] []Commands: cache Manage bower cache help Display help information about Bower home Opens a package homepage into your favorite browser info Info of a particular package init Interactively create a bower.json file install Install a package locally link Symlink a package folder list List local packages lookup Look up a package URL by name prune Removes local extraneous packages register Register a package search Search for a package by name update Update a local package uninstall Remove a local packageOptions: -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 rootSee 'bower help Commands，列出了bower支持的各種命令。
1). 安裝jQuery到項目nodejs-bower
~ D:\workspace\javascript\nodejs-bower>bower install jquerybower 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.gzbower jquery#* extract archive.tar.gzbower jquery#* resolved git://github.com/components/jquery.git#2.0.3bower jquery#~2.0.3 install jquery#2.0.3jquery#2.0.3 bower_components\jquery通過執(zhí)行命令，我們可以看到j(luò)Query的最新版本被下載，并安裝到項目的bower_components\jquery目錄
查看bower_components/jquery目錄，發(fā)現(xiàn)了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 d3bower 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.gzbower d3#* extract archive.tar.gzbower d3#* resolved git://github.com/mbostock/d3.git#3.2.8bower d3#~3.2.8 install d3#3.2.8d3#3.2.8 bower_components\d3非常方便，下載并安裝完成！
2). 查看項目中已導(dǎo)入的類庫
~ D:\workspace\javascript\nodejs-bower>bower listbower 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.33). 安裝bootstrap庫，并查看依賴情況
~ D:\workspace\javascript\nodejs-bower>bower install bootstrapbower bootstrap#* cached git://github.com/twbs/bootstrap.git#3.0.0-rc1bower 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.3bower jquery#>= 1.9.0 validate 2.0.3 against git://github.com/components/jquery.git#>= 1.9.0bower 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 listbower 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我們發(fā)現(xiàn)bootstrap，對jquery是有依賴的。
4). 刪除jQuery庫，破壞依賴關(guān)系
~ D:\workspace\javascript\nodejs-bower>bower uninstall jquerybower conflict bootstrap depends on jqueryContinue anyway? (y/n) ybower uninstall jquery~ D:\workspace\javascript\nodejs-bower>bower listbower 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 missing5). 安裝低版本的jQuery，制造不版本兼容
~ D:\workspace\javascript\nodejs-bower>bower install jquery#1.7.2bower jquery#~2.0.3 cached git://github.com/components/jquery.git#2.0.3bower jquery#~2.0.3 validate 2.0.3 against git://github.com/components/jquery.git#~2.0.3bower jquery#>= 1.9.0 cached git://github.com/components/jquery.git#2.0.3bower jquery#>= 1.9.0 validate 2.0.3 against git://github.com/components/jquery.git#>= 1.9.0bower jquery#1.7.2 cached git://github.com/components/jquery.git#1.7.2bower 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.2 2) jquery#~2.0.3 which resolved to 2.0.3 and has nodejs-bower as dependants 3) 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: 1bower jquery#1.7.2 install jquery#1.7.2jquery#1.7.2 bower_components\jquery~ D:\workspace\javascript\nodejs-bower>bower listbower 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是不兼容的，強大之處大家應(yīng)該有所體會。
6).升級jQuery，讓版本兼容
~ D:\workspace\javascript\nodejs-bower>bower update jquerybower jquery#~2.0.3 cached git://github.com/components/jquery.git#2.0.3bower jquery#~2.0.3 validate 2.0.3 against git://github.com/components/jquery.git#~2.0.3bower jquery#>= 1.9.0 cached git://github.com/components/jquery.git#2.0.3bower jquery#>= 1.9.0 validate 2.0.3 against git://github.com/components/jquery.git#>= 1.9.0bower jquery#~2.0.3 install jquery#2.0.3jquery#2.0.3 bower_components\jquery~ D:\workspace\javascript\nodejs-bower>bower listbower 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多么智能，一鍵搞定，這才是高效的開發(fā)。
7). 查看本地bower已經(jīng)緩存的類庫
~ D:\workspace\javascript\nodejs-bower>bower cache listbootstrap=git://github.com/twbs/bootstrap.git#3.0.0-rc1d3=git://github.com/mbostock/d3.git#3.2.8jquery=git://github.com/components/jquery.git#1.7.2jquery=git://github.com/components/jquery.git#2.0.38). 查看D3庫信息
~ D:\workspace\javascript\nodejs-bower>bower info d3d3 Versions: - 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 dojodojo git://github.com/dojo/dojo.git10). 用瀏覽器打開dojo的發(fā)布主頁
~ D:\workspace\javascript\nodejs-bower>bower home dojobower 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.gzbower dojo#* extract archive.tar.gzbower 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 dojoSearch results: dojo git://github.com/dojo/dojo.git dojox git://github.com/dojo/dojox.git dojo-util git://github.com/dojo/util.git dojo-bootstrap git://github.com/samvdb/Dojo-Bootstrap真是方便實用的技術(shù)。
1). 生成bower.json配置文件
~ D:\workspace\javascript\nodejs-bower>bower initbower 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創(chuàng)建一個資源庫：nodejs-bower
3). 本地工程綁定github
~ D:\workspace\javascript\nodejs-bower>git initInitialized 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 masterCounting 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 -> masterBranch 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.gitbower convert Converted git@github.com:bsspirit/nodejs-bower.git to git://github.com/bsspirit/nodejs-bower.gitbower nodejs-bower#* resolve git://github.com/bsspirit/nodejs-bower.git#*bower nodejs-bower#* checkout masterbower nodejs-bower#* resolved git://github.com/bsspirit/nodejs-bower.git#af3ceaac07Registering a package will make it visible and installable via the registry (https://bower.herokuapp.com), continue? (y/n) ybower 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-bowerSearch results: nodejs-bower git://github.com/bsspirit/nodejs-bower.git6). 安裝我們自己的包
D:\workspace\javascript\nodejs-bower>bower install nodejs-bowerbower nodejs-bower#* cached git://github.com/bsspirit/nodejs-bower.git#af3ceaac07bower 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其實模塊化，版本依賴，開發(fā)類庫，發(fā)布類庫，安裝類庫，都是一條命令！還能再簡單一點么！快把項目模塊化，然后分享給大家吧??！未來是屬于開發(fā)者的。
轉(zhuǎn)載請注明出處：
http://blog.fens.me/nodejs-bower-intro/
