2.4 Bower——js依賴管理的工具
2.4.1 bower介紹
????????Bower是 twitter 推出的一款包管理工具,基于nodejs的模塊化思想,把功能分散到各個(gè)模塊中,讓模塊和模塊之間存在聯(lián)系丧枪,通過Bower 來(lái)管理模塊間的這種聯(lián)系榛瓮。
????????包管理工具一般有以下的功能:
????1、注冊(cè)機(jī)制:每個(gè)包需要確定一個(gè)唯一的ID 使得搜索和下載的時(shí)候能夠正確匹配洗显,所以包管理工具需要維護(hù)注冊(cè)信息,可以依賴其他平臺(tái)原环。
????2挠唆、文件存儲(chǔ):確定文件存放的位置,下載的時(shí)候可以找到嘱吗,當(dāng)然這個(gè)地址在網(wǎng)絡(luò)上是可訪問的玄组。
????3、上傳下載:這是工具的主要功能谒麦,能提高包使用的便利性俄讹。比如想用jquery 只需要 install 一下就可以了,不用到處找下載绕德。上傳并不是必備的患膛,根據(jù)文件存儲(chǔ)的位置而定,但需要有一定的機(jī)制保障耻蛇。
????4、依賴分析:這也是包管理工具主要解決的問題之一,既然包之間是有聯(lián)系的款票,那么下載的時(shí)候就需要處理他們之間的依賴。下載一個(gè)包的時(shí)候也需要下載依賴的包漱牵。
????????功能介紹,摘自文章:http://chuo.me/2013/02/twitter-bower.html
2.4.2 bower安裝
????????bower插件是通過npm, Node.js包管理器安裝和管理的.
2.4.2.1 我的系統(tǒng)環(huán)境
???????? 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
????????在系統(tǒng)中疚漆,我們已經(jīng)安裝好了Nodejs和npm酣胀。win7安裝nodejs請(qǐng)參考文章:Nodejs開發(fā)框架Express3.0開發(fā)手記–從零開始
2.4.2.2 安裝bower
全局安裝bower
~ D:\workspace\javascript>npm install bower -g
新建一個(gè)express3的項(xiàng)目nodejs-bower
~ D:\workspace\javascript>express -e nodejs-bower
~ D:\workspace\javascript>cd
nodejs-bower && npm install
Mac下安裝:
sudo npm
install -g bower
2.4.3 bower命令
????????Commands,列出了bower支持的各種命令娶聘。
????cache: bower緩存管理
????help: 顯示Bower命令的幫助信息
????home: 通過瀏覽器打開一個(gè)包的github發(fā)布頁(yè)
????info: 查看包的信息
????init: 創(chuàng)建bower.json文件
????install: 安裝包到項(xiàng)目
????link: 在本地bower庫(kù)建立一個(gè)項(xiàng)目鏈接
????list: 列出項(xiàng)目已安裝的包
????lookup: 根據(jù)包名查詢包的URL
????prune: 刪除項(xiàng)目無(wú)關(guān)的包
????register: 注冊(cè)一個(gè)包
????search: 搜索包
????update: 更新項(xiàng)目的包
????uninstall: 刪除項(xiàng)目的包
2.4.4 bower使用范例
2.4.4.1 安裝jQuery到項(xiàng)目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
????????通過執(zhí)行命令闻镶,我們可以看到j(luò)Query的最新版本被下載,并安裝到項(xiàng)目的bower_components\jquery目錄
????????查看bower_components/jquery目錄趴荸,發(fā)現(xiàn)了3個(gè)文件儒溉。
~ D:\workspace\javascript\nodejs-bower>ls bower_components/jquery -a
.? ..? .bower.json?component.json? jquery.js
????????同樣地宦焦,我們的項(xiàng)目還需要d3的類庫(kù)
~ D:\workspace\javascript\nodejs-bower>bower install d3
bower d3#*?????????????????not-cached git://github.com/mbostock/d3.git#*
bower d3#*???????????????????? resolvegit://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.4.4.2 查看項(xiàng)目中已導(dǎo)入的類庫(kù)
~ D:\workspace\javascript\nodejs-bower>bower list
bower check-new???? Checking for newversions of the project dependencies..
nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower
├── d3#3.2.8
└── jquery#2.0.3
2.4.4.3 安裝bootstrap庫(kù)波闹,并查看依賴情況
~ 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 againstgit://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 newversions 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酝豪,對(duì)jquery是有依賴的。
2.4.4.4 刪除jQuery庫(kù)精堕,破壞依賴關(guān)系
~ D:\workspace\javascript\nodejs-bower>bower uninstall jquery
bower conflict????? bootstrapdepends on jquery
Continue anyway? (y/n) y
bower uninstall???? jquery
~ D:\workspace\javascript\nodejs-bower>bower list
bower check-new???? Checking for newversions 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
2.4.4.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 againstgit://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 resolvedto 1.7.2
??? 2) jquery#~2.0.3 which resolvedto 2.0.3 and has nodejs-bower as dependants
??? 3) jquery#>= 1.9.0 whichresolved 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 newversions 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是不兼容的瘫证,強(qiáng)大之處大家應(yīng)該有所體會(huì)。
2.4.4.6 升級(jí)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 newversions 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ā)洞斯。
2.4.4.7 查看本地bower已經(jīng)緩存的類庫(kù)
~ 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
2.4.4.8 查看D3庫(kù)信息
~ 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
...
2.4.4.9 查看dojo庫(kù)的url
~ D:\workspace\javascript\nodejs-bower>bower lookup dojo
dojo git://github.com/dojo/dojo.git
2.4.4.10? 用瀏覽器打開dojo的發(fā)布主頁(yè)
~ D:\workspace\javascript\nodejs-bower>bower home dojo
bower dojo#*? ??????????????not-cachedgit://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
????????瀏覽器自動(dòng)打開:https://github.com/dojo/dojo
2.4.4.11 查詢包含dojo的類庫(kù)
~ D:\workspace\javascript\nodejs-bower>bower search dojo
Search results:
??? dojogit://github.com/dojo/dojo.git
??? dojoxgit://github.com/dojo/dojox.git
??? dojo-utilgit://github.com/dojo/util.git
??? dojo-bootstrapgit://github.com/samvdb/Dojo-Bootstrap
????????真是方便實(shí)用的技術(shù)毡庆。
2.4.5 用bower提交自己類庫(kù)
2.4.5.1 生成bower.json配置文件
~ D:\workspace\javascript\nodejs-bower>bower init
bower existing????? The existingbower.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.4.5.2 在github創(chuàng)建一個(gè)資源庫(kù)
2).?在github創(chuàng)建一個(gè)資源庫(kù):nodejs-bower
2.4.5.3 本地工程綁定github
~ D:\workspace\javascript\nodejs-bower>git init
Initialized empty Git repository inD:/workspace/javascript/nodejs-bower/.git/
~ D:\workspace\javascript\nodejs-bower>git add .
~ D:\workspace\javascript\nodejs-bower>git commit -m "firstcommit"
# On branch master
#
# Initial commit
#
# Untracked files:
#?? (use "git add ..." toinclude 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 "gitadd" to track)
~ D:\workspace\javascript\nodejs-bower>git remote add originhttps://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.
2.4.5.4 注冊(cè)到bower官方類庫(kù)
4).?注冊(cè)到bower官方類庫(kù)
~ D:\workspace\javascript\nodejs-bower>bower register nodejs-bowergit@github.com:bsspirit/nodejs-bower.git
bower?????????????????????????convert Converted git@github.com:bsspirit/nodejs-bower.git togit://github.com/bsspirit/nodejs-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.
2.4.5.5 查詢我們自己的包
5).?查詢我們自己的包
D:\workspace\javascript\nodejs-bower>bower search nodejs-bower
Search results:
nodejs-bowergit://github.com/bsspirit/nodejs-bower.git
2.4.5.6 安裝我們自己的包
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
????????其實(shí)模塊化,版本依賴烙如,開發(fā)類庫(kù)么抗,發(fā)布類庫(kù),安裝類庫(kù)亚铁,都是一條命令蝇刀!還能再簡(jiǎn)單一點(diǎn)么!快把項(xiàng)目模塊化徘溢,然后分享給大家吧M趟觥仰迁!未來(lái)是屬于開發(fā)者的。
2.4.6 在WebStorm中使用bower
2.4.6.1 往bower.json中添加插件包
內(nèi)容格式如下:
{
??? "name":"HJNodeJSPro2",
???"description": "A starter project for AngularJS",
???"version": "0.0.0",
???"license": "MIT",
???"private": true,
???"dependencies": {
???????"angular": "1.4.x",
???????"angular-mocks": "1.4.x",
???????"jquery": "~2.1.1",
???????"bootstrap": "~3.1.1",
???????"angular-route": "1.4.x",
???????"angular-resource": "1.4.x",
???????"angular-animate": "1.4.x",
??????????????????????? ?“susy”,
??? }
}
2.4.7 參考鏈接
Bower—— 一個(gè)Web的包管理工具
http://ce.sysu.edu.cn/hope/Item/119408.aspx
(Good)Using Bower in WebStorm
http://blog.jetbrains.com/webstorm/2014/04/using-bower-in-webstorm/
js依賴管理的工具
bower解決js的依賴管理