The NoteBook of EricKong

從零開始nodejs系列文章，將介紹如何利Javascript做為服務端腳本，通過Nodejs框架web開發。Nodejs框架是基于V8的引擎，是目前速度最快的Javascript引擎。chrome瀏覽器就基于V8，同時打開20-30個網頁都很流暢。Nodejs標準的web開發框架Express，可以幫助我們迅速建立web站點，比起PHP的開發效率更高，而且學習曲線更低。非常適合小型網站，個性化網站，我們自己的Geek網站！！

關于作者

• 張丹(Conan), 程序員Java,R,PHP,Javascript
• weibo：@Conan_Z
• blog: http://blog.fens.me
• email: bsspirit@gmail.com

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

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

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

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

目錄

1. bower介紹
2. bower安裝
3. bower命令
4. bower使用
5. 用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 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 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.3

jquery#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.8

d3#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-rc1

bootstrap#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.2

Unable 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 dependants

Prefix the choice with ! to persist it to bower.json

Choice: 1
bower jquery#1.7.2             install jquery#1.7.2

jquery#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.3

jquery#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
d3

  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 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.git
    dojox git://github.com/dojo/dojox.git
    dojo-util git://github.com/dojo/util.git
    dojo-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.git  Package 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#af3ceaac07  nodejs-bower#af3ceaac07 bower_components\nodejs-bower ├── d3#3.2.8 └── jquery#2.0.3 

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