发布于:2020-09-22 09:37:31
1. 什么是 bower,有什么作用
富客户端要求的前端开发,少不了大量的前端库文件引用,于是就可能遇到如下问题:
逐个下载、复制到期望位置嫌麻烦
库之间的依赖/版本依赖不清楚,总是出问题
版本升级时重复性的操作,还易搞错
…
使用 bower 这样的包管理工具,可以很好的处理类似如上描述的问题。其实各种包管理工具的主要职责均类似如此。
2. bower 安装
需要系统已安装 nodejs。命令提示符下,执行如下命令安装 bower:
npm install bower -g
3. bower 命令
执行 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.
命令简介:
cache: bower 缓存管理
help: 显示 Bower 命令的帮助信息
home: 通过浏览器打开一个包的 github 发布页
info: 查看包的信息
init: 创建 bower.json 文件
install: 安装包到项目
link: 在本地 bower 库建立一个项目链接
list: 列出项目已安装的包
lookup: 根据包名查询包的 URL
prune: 删除项目无关的包
register: 注册一个包
search: 搜索包
update: 更新项目的包
uninstall: 删除项目的包
4. 使用 bower 下载库
作为各种库的管理工具,bower 主要就是对它们下载和管理。
举例,我们新建了一个项目,目录为 lzwme,我们的项目需要如下前端库:jquery 1.11.1、bootstrap、jquery UI、d3、datatables 1.10.2、echarts 、moment、backbone、seajs 。
针对项目 lzwme,我们可依次执行如下命令:
bower install jquery#1.11.1 –save
bower install bootstrap –save
bower install d3 –save
bower install jqueryui –save
bower install datatables#1.10.2 –save
bower install echarts –save
bower install moment –save
bower install backbone –save
bower install seajs –save
执行完每一条命令后,bower 都会自动下载对应库文件到 bower_components/ 目录,同时还会下载其依赖库,如下载 backbone 的同时还会下载 underscore。
bower 可使用如下几种方式下载文件
# 已注册的包,使用简写即可
$ bower install jquery
# GitHub 上的项目,使用名称即可
$ bower install desandro/masonry
# GitHub上的项目
$ bower install git://github.com/user/package.git
# 直接通过 URL 下载
$ bower install http://example.com/script.js
安装命令有如下参数可选:
-F, –force-latest: 不管冲突问题强制使用最新版本
-p, –production: 安装生产环境的库,不安装开发环境所需的文件
-S, –save: 将安装的包信息保存到项目的 bower.json 依赖配置中
-D, –save-dev: 将已安装的包信息保存到项目开发环境的 bower.json 依赖中
5. bower 功能使用举例
5.1. 查看已安装的库列表
bower list
lzwme D:\_development\lzwme
├─┬ backbone#1.1.2 extraneous
│ └── underscore#1.7.0
├─┬ bootstrap#3.2.0 extraneous
│ └── jquery#1.11.1 (2.1.1 available)
├── d3#3.4.13 extraneous
├─┬ datatables#1.10.2 extraneous (latest is 1.10.3)
│ └── jquery#1.11.1 (2.1.1 available)
├── echarts#2.0.4 extraneous
├── impress.js#0.5.3 extraneous
├── jquery#1.11.1 extraneous (latest is 2.1.1)
├─┬ jqueryui#1.11.2 extraneous
│ └── jquery#1.11.1 (2.1.1 available)
├── moment#2.8.3 extraneous
└── seajs#2.3.0 extraneous
5.2. 更新某个库
bower update <package-name>
5.3. 卸载某个库
$ bower uninstall <package-name>
5.4 查看本地缓存的库
bower cache list
backbone=git://github.com/jashkenas/backbone.git#1.1.2
bootstrap=git://github.com/twbs/bootstrap.git#3.2.0
d3=git://github.com/mbostock/d3.git#3.4.13
datatables=git://github.com/DataTables/DataTables.git#1.10.2
echarts=git://github.com/ecomfe/echarts.git#2.0.4
impress.js=git://github.com/bartaz/impress.js.git#0.5.3
jquery=git://github.com/jquery/jquery.git#1.11.1
jquery=git://github.com/jquery/jquery.git#2.1.1
jquery-ui=git://github.com/components/jqueryui.git#1.11.2
moment=git://github.com/moment/moment.git#2.8.3
seajs=git://github.com/seajs/seajs.git#2.3.0
underscore=git://github.com/jashkenas/underscore.git#1.7.0
5.5 查看某个库的主页
bower lookup jquery
D:\_development\lzwme>bower lookup jquery
jquery git://github.com/jquery/jquery.git
4.6 提交自己的类库到官方
请参考这里:http://bower.io/docs/creating-packages/
6. 使用下载的库
通过 bower 可以方便的对库文件进行下载、更新,但是我们不提倡在项目中直接使用 bower_components 目录,一方面这里的的文件可能并不是都是项目需要的,另一方面,如果项目中存在安全问题的文件,那么就会产生隐患了。
那么该如何使用这些文件呢,你可以自己选择复制到项目配置的目录中。当然,志文工作室还是推荐你使用自动化构建工具来快捷管理。
bower 推荐使用前端自动化构建工具 grunt (http://lzw.me/a/grunt-getting-started.html),并推荐了几个对应插件:
grunt-bower-concat
grunt-wiredep
grunt-bower-requirejs
grunt-bower-task
grunt-preen
http://bower.io/docs/tools/
7. 更多参考
http://bower.io/
https://github.com/bower/bower
https://github.com/yatskevich/grunt-bower-task
http://lzw.me/a/bower-getting-started.html
阅读 126+
10