转载自：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)
扫一扫
511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
