前端包管理器bower的使用

转载自：http://yijiebuyi.com/blog/2aa4c7d26780239d9763efb71cded12d.html

随着前端项目越来越复杂,随便引入几个第三方javascript脚本库貌似已经习以为常,但是随着越来越多的包被引入,开发人员维护起来也是一件相当头疼的事,比如第三方库的版本更新,安装,卸载等.

twitter推出了一个前端包管理器 bower 帮我们解决了这些头疼的事情.

bower 完全借鉴了npm构思和实现原理,所以后面你会看到它的使用几乎和npm是一模一样.

当然,bower 是运行在node.js 基础上,所以你的当前环境确保已经安装 node.js .

bower 的基础功能是什么?

1.注册模块

每个包需要确定一个唯一的 ID 使得搜索和下载的时候能够正确匹配

2.文件存储

把文件存储在一个有效的网络地址上,使用的时候可以直接下载到.

3.上传下载

你可以把你的包注册后上传存储.

使用的时候可以使用一条命令直接下载到当前项目.

4.以来分析

它帮我们解决了包与包直接的依赖关系

当我们下载一个包A的时候,由于它依赖包B,所以bower会自动帮我们下载好包B

如何使用bower ?

npm install bower -g

检查是否安装成功

zhangzhi@moke:~$ bower help

Usage:

bower <command> [<args>] [<options>]
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 - and possible updates
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
version                 Bump a package version
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
--version               Output Bower version
See 'bower help <command>' for more information on a specific command.

┌───────────────────────────────────────────┐
│ Update available: 1.4.1 (current: 1.3.12) │
│ Run npm update -g bower to update.        │
└───────────────────────────────────────────┘

上面信息说明我们安装成功,我当前的版本 1.3.12 已经比较低,提示我使用命令更新 bower

npm update -g bower

这样就可以轻松更新bower 到最新版

上面help 信息列出 bower 提供的命令

cache:bower缓存管理
help:显示Bower命令的帮助信息
home:通过浏览器打开一个包的github发布页
info:查看包的信息
init:创建bower.json文件
install:安装包到项目
link:在本地bower库建立一个项目链接
list:列出项目已安装的包
lookup:根据包名查询包的URL
prune:删除项目无关的包
register:注册一个包
search:搜索包
update:更新项目的包
uninstall:删除项目的包

现在我们使用 bower init 来创建一个bower.json 的配置文件,我找到自己的一个测试项目来演示

zhangzhi@moke:~/code/test/static$ bower init
? name: test
? version: 0.1.1
? description:
? main file: main.js
? what types of modules does this package expose? (Press <space>? what types of modules does this package expose?
? keywords:
? authors: zhangzhi <zzhi.net@gmail.com>
? license: MIT
? homepage:
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents ? would you like to mark this package as private which prevents it from being accidentally published to the registry? No

{
name: 'test',
version: '0.1.1',
authors: [
'zhangzhi <zzhi.net@gmail.com>'
],
main: 'main.js',
license: 'MIT',
ignore: [
'**/.*',
'node_modules',
'bower_components',
'app/bower_components',
'test',
'tests'
]
}

? Looks good? Yes

然后我们查看 static 目录可以看到有了一个配置文件 bower.json ,里面的内容就是上面的.

这时我们来下载一个jquery 文件,并且指定一个版本

zhangzhi@moke:~/code/test/static$ bower install jquery#1.7.2 --save
bower cached        git://github.com/jquery/jquery.git#1.7.2
bower validate      1.7.2 against git://github.com/jquery/jquery.git#1.7.2

我下载了一个 jquery 1.7.2 的版本,可以看到我本地有缓存,所以非常快的下载下来.

# 符号后面就是可以指定一个下载的版本

--save 就是把下载的包信息写入到配置文件的依赖项里.和npm 一模一样.我们看下 bower.json 文件

{
"name": "test",
"version": "0.1.1",
"authors": [
"zhangzhi <zzhi.net@gmail.com>"
],
"main": "main.js",
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"app/bower_components",
"test",
"tests"
],
"dependencies": {
"jquery": "1.7.2"
}
}

ok, jquery 1.7.2 已经写入配置文件.

现在我们通过 info 命令查看一下 jquery 的信息

zhangzhi@moke:~/code/test/static$ bower info jquery
bower cached        git://github.com/jquery/jquery.git#2.1.0
bower validate      2.1.0 against git://github.com/jquery/jquery.git#*
bower new           version for git://github.com/jquery/jquery.git#*
bower resolve       git://github.com/jquery/jquery.git#*
bower download      https://github.com/jquery/jquery/archive/2.1.3.tar.gz bower progress      jquery#* received 0.6MB of 0.6MB downloaded, 88%
bower extract       jquery#* archive.tar.gz
bower resolved      git://github.com/jquery/jquery.git#2.1.3

{
name: 'jquery',
version: '2.1.3',
main: 'dist/jquery.js',
license: 'MIT',
ignore: [
'**/.*',
'build',
'speed',
'test',
'*.md',
'AUTHORS.txt',
'Gruntfile.js',
'package.json'
],
devDependencies: {
sizzle: '2.1.1-jquery.2.1.2',
requirejs: '2.1.10',
qunit: '1.14.0',
sinon: '1.8.1'
},
keywords: [
'jquery',
'javascript',
'library'
],
homepage: 'https://github.com/jquery/jquery'
}

Available versions:
- 2.1.3
- 2.1.2
- 2.1.1
- 2.1.1-rc2
- 2.1.1-rc1
- 2.1.1-beta1
- 2.1.0
- 2.1.0-rc1
- 2.1.0-beta3
- 2.1.0-beta2
- 2.1.0-beta1
- 2.0.3
- 2.0.2
- 2.0.1
- 2.0.0
- 2.0.0-beta3
- 1.11.2
- 1.11.1
- 1.11.1-rc2
- 1.11.1-rc1
- 1.11.1-beta1
- 1.11.0
- 1.11.0-rc1
- 1.11.0-beta3
- 1.11.0-beta2
- 1.11.0-beta1
- 1.10.2
- 1.10.1
- 1.10.0
- 1.10.0-beta1
- 1.9.1
- 1.9.0
- 1.8.3+1
- 1.8.3
- 1.8.2
- 1.8.1
- 1.8.0
- 1.7.2
- 1.7.1
- 1.7.0
- 1.6.4
- 1.6.3
- 1.6.2
- 1.6.1
- 1.6.0
- 1.5.2
- 1.5.1
- 1.5.0
- 1.4.4
- 1.4.3
- 1.4.2
- 1.4.1
- 1.4.0
- 1.3.2
- 1.3.1
- 1.3.0
- 1.2.6
- 1.2.5
- 1.2.4
- 1.2.3
- 1.2.2
- 1.2.1
- 1.1.4
- 1.1.3
- 1.1.2
- 1.1.1
- 1.0.4
- 1.0.3
- 1.0.2
- 1.0.1
You can request info for a specific version with 'bower info jquery#<version>'

它列出了 jquery 相关的所有信息

通过 bower list 查看依赖关系

zhangzhi@moke:~/code/test/static$ bower list
bower check-new     Checking for new versions of the project dependencies..
test#0.1.1 /Users/zhangzhi/code/test/static
└── jquery#1.7.2 extraneous (latest is 2.1.3)