使用bower管理项目的前端依赖


在前端开发中,我们用到的库和框架越来越多,并且在多个项目中都可能用到,那么我们管理这些库和框架就不是那么方便,比如它们的升级,或者是在一个新的地方使用它们时又得重新copy一遍。对于这些问题,bower就提供了很好的解决办法,可以很方便的管理项目的前端依赖。

下面来具体看一下它的安装及使用。

1、bower的安装以及卸载

bower是基于nodejs的,需要先安装nodejs,安装完毕后,我们可以通过下面命令安装bower:

sudo npm install -g bower

安装完毕后可以通过下面命令查看下是否安装成功:

bower --version

如果我们想卸载bower,可以通过如下命令:

sudo npm uninstall bower

2、bower的基本用法

安装成功后来尝试一下包的管理,我们可以通过以下命令来对包进行安装,卸载以及更新等(安装时若出现权限问题,可以参考这篇文章:bower安装报错”Cannot be run with sudo”解决办法)。

搜索包,比如搜索jquery,可以把相关的包都列出来:

bower search jquery

安装包,比如安装jquery:

bower install jquery

安装指定版本的包:

bower install jquery#1.11.1

查看已经安装的有哪些包:

bower list

对包进行更新:

bower update

删除包:

bower uninstall jquery

Ok,以上是基本的使用方法,我们还可以通过bower –help查看更多的使用方法。

3、通过bower.json管理依赖

通过上面的介绍我们可以初步使用bower了,但项目中如果有多个依赖或者是要在不同的地方使用的话,再一个一个的安装是很麻烦的,这个时候我们就可以通过bower.json来管理依赖。

下面是一个bower.json的示例:

{
  "name": "projectName",
  "version": "0.1.0",
  "dependencies": {
    "bootstrap": "~3.3.2",
    "angular": "~1.3.10",  
    "jquery": "~2.1.1"
  },
  "private": true
}

添加完bower.json后,我们就可以直接通过下面命令安装所有的包了:

bower install

4、使用.bowerrc进行配置

安装完包后我们会发现,所有的文件都被默认安装在了”bower_components”的文件夹内,这样在引用时就很不方便了,毕竟这个文件夹名称并不一定是我们想要的。但bower给我们提供了一个.bowerrc文件,我们通过对.bowerrc文件的配置可以很方便的改变这些。

比如可以这样配置:

{
  "directory" : "libs",
  "json"      : "bower.json",
  "endpoint"  : "https://Bower.herokuapp.com"
}

这样我们就把安装目录改为了libs,还有更多的配置,可以参考这里

Ok,以上就是关于bower的基本介绍。

参考资料:

http://bower.io/ 

http://blog.teamtreehouse.com/getting-started-bower


发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>