前端包管理器bower的使用
随着前端项目越来越复杂,随便引入几个第三方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)