90.bower解决js的依赖管理

转自&＃xff1a;https://blog.csdn.net/u011537073/article/details/52951122

前言
一个新的web项目开始&＃xff0c;我们总是很自然地去下载需要用到的js类库文件&＃xff0c;比如jQuery&＃xff0c;去官网下载名为jquery-1.10.2.min.js文件&＃xff0c;放到我们的项目里。当项目又需要bootstrap的时候&＃xff0c;我们会重复刚才的工作&＃xff0c;去bootstrap官网下载对应的类库。如果bootstrap所依赖的jQuery并不是1.10.2&＃xff0c;而是2.0.3时&＃xff0c;我们会再重新下载一个对应版本的jQuery替换原来的。

包管理是个复杂的问题&＃xff0c;我们要知道谁依赖谁&＃xff0c;还要明确哪个版本依赖哪个版本。这些对于开发人员来说&＃xff0c;负担过重了。bower作为一个js依赖管理的工具&＃xff0c;提供一种理想包管理方式&＃xff0c;借助了npm的一些思想&＃xff0c;为我们提供一个舒服的开发环境。

你要还不动起手来试试bower&＃xff0c;那你一定不会知道&＃xff0c;前端开发是件多么享受的事。

目录

1. bower介绍
2. bower安装
3. bower命令
4. bower使用
5. 用bower提交自己类库

1. bower介绍

Bower 是 twitter 推出的一款包管理工具&＃xff0c;基于nodejs的模块化思想&＃xff0c;把功能分散到各个模块中&＃xff0c;让模块和模块之间存在联系&＃xff0c;通过 Bower 来管理模块间的这种联系。

包管理工具一般有以下的功能&＃xff1a;

• 注册机制&＃xff1a;每个包需要确定一个唯一的 ID 使得搜索和下载的时候能够正确匹配&＃xff0c;所以包管理工具需要维护注册信息&＃xff0c;可以依赖其他平台。
• 文件存储&＃xff1a;确定文件存放的位置&＃xff0c;下载的时候可以找到&＃xff0c;当然这个地址在网络上是可访问的。
• 上传下载&＃xff1a;这是工具的主要功能&＃xff0c;能提高包使用的便利性。比如想用 jquery 只需要 install 一下就可以了&＃xff0c;不用到处找下载。上传并不是必备的&＃xff0c;根据文件存储的位置而定&＃xff0c;但需要有一定的机制保障。
• 依赖分析&＃xff1a;这也是包管理工具主要解决的问题之一&＃xff0c;既然包之间是有联系的&＃xff0c;那么下载的时候就需要处理他们之间的依赖。下载一个包的时候也需要下载依赖的包。

功能介绍&＃xff0c;摘自文章&＃xff1a;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


在系统中&＃xff0c;我们已经安装好了Nodejs和npm。win7安装nodejs请参考文章&＃xff1a;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安装后&＃xff0c;我们就可以用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 &＃39;bower help &＃39; for more information on a specific command.


Commands&＃xff0c;列出了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


通过执行命令&＃xff0c;我们可以看到jQuery的最新版本被下载&＃xff0c;并安装到项目的bower_components\jquery目录

查看bower_components/jquery目录&＃xff0c;发现了3个文件。


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


同样地&＃xff0c;我们的项目还需要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


非常方便&＃xff0c;下载并安装完成&＃xff01;

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库&＃xff0c;并查看依赖情况


~ 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#>&＃61; 1.9.0 cached git://github.com/components/jquery.git#2.0.3
bower jquery#>&＃61; 1.9.0 validate 2.0.3 against git://github.com/components/jquery.git#>&＃61; 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&＃xff0c;对jquery是有依赖的。

4). 删除jQuery库&＃xff0c;破坏依赖关系


~ 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&＃xff0c;制造不版本兼容


~ 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#>&＃61; 1.9.0 cached git://github.com/components/jquery.git#2.0.3
bower jquery#>&＃61; 1.9.0 validate 2.0.3 against git://github.com/components/jquery.git#>&＃61; 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#>&＃61; 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 >&＃61; 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&＃xff0c;很明确的告诉了我们&＃xff0c;jquery和bootstrap是不兼容的&＃xff0c;强大之处大家应该有所体会。

6).升级jQuery&＃xff0c;让版本兼容


~ 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#>&＃61; 1.9.0 cached git://github.com/components/jquery.git#2.0.3
bower jquery#>&＃61; 1.9.0 validate 2.0.3 against git://github.com/components/jquery.git#>&＃61; 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


多么智能&＃xff0c;一键搞定&＃xff0c;这才是高效的开发。

7). 查看本地bower已经缓存的类库


~ D:\workspace\Javascript\nodejs-bower>bower cache list
bootstrap&＃61;git://github.com/twbs/bootstrap.git#3.0.0-rc1
d3&＃61;git://github.com/mbostock/d3.git#3.2.8
jquery&＃61;git://github.com/components/jquery.git#1.7.2
jquery&＃61;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


浏览器自动打开&＃xff1a;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创建一个资源库&＃xff1a;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&＃64;github.com:bsspirit/nodejs-bower.git
bower convert Converted git&＃64;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


其实模块化&＃xff0c;版本依赖&＃xff0c;开发类库&＃xff0c;发布类库&＃xff0c;安装类库&＃xff0c;都是一条命令&＃xff01;还能再简单一点么&＃xff01;快把项目模块化&＃xff0c;然后分享给大家吧&＃xff01;&＃xff01;未来是属于开发者的。

转载请注明出处&＃xff1a;
http://blog.fens.me/nodejs-bower-intro/