bower - 面向Web的包管理


http://bower.io/

Bower 是 Twitter 推出的一款包管理工具,管理各插件/模块的版本和依赖问题。类似于Java的Manven, Ruby的Gem,.NET的Nuget,Node.js的NPM…

安装

1
2
3
4
5
6
$ brew intsall node
# 安装, npmnode的官方package管理工具
$ npm install -g bower
# 在profile文件中(.zshrc)配置npm的module执行路径
export PATH=/usr/local/share/npm/bin:$PATH

使用

安装完成之后,就可以在项目目录下用命令行添加所要使用的库,会自动解析依赖。

1
$ bower install jquery

会在项目目录下生成如下文件格式:

1
2
3
4
5
6
7
8
9
10
11
└── bower_components
└── jquery
├── MIT-LICENSE.txt
├── bower.json
├── dist
│   ├── jquery.js
│   ├── jquery.min.js
│   └── jquery.min.map
└── src
├── ...
└── wrap.js

配置安装路径

bower_components是bower的默认安装目录,可以通过添加.bowerrc文件来改变其安装路径。和其它的RC文件一样,放在项目目录只对该项目起作用。放在~/下,则是全局设定。

该文件可通过 init来创建,实质就是创建一个新的库,然后在这个库里添加其它库的引用。

1
$ bower init
1
2
3
{
"directory": "public/packages/bower"
}

最佳实践

但好的实践模式是将第三方库从版本控制器中移除,而只保留其引用的配置文件。bower中不会自动生成配置文件,需要手工建立。

新建 bower.json 文件,参见Defining a package

1
2
3
{
"name": "myproject"
}

使用-S添加库

1
$ bower install jquery -S

其它常用命令

1
2
3
4
$ bower list
$ bower uninstall jquery
$ bower update jquery
$ bower search jquery

FAQ::

前端/后端

Javascript dependency management : npm vs bower
不得不说刚开始看bower时,铺天的教程让我产生一种它是管理nodejs库的工具。对比npm,bower则是应用于前端的包,像CSS, JavaScript, HTML等。

通过下面grant.js的结合使用就可以找到感觉。

Grant.js 压缩合并

bower已经很好的解决了库的下载和依赖管理,但真正的线上环境里还会有压缩和合并的管理。这就要用到Grant.js了。

与Rails结合

作为一个Rails的爱好者,不免会拿来和Rails中Asset的工具Sprockets做集成,看有什么优势。

REF::

Package Managers: An Introductory Guide For The Uninitiated Front-End Developer