bower-前端包管理工具

在开发一个项目的时候,我们很自然的要去下载需要的js库或框架,比如需要jquery,去下载jquery放在项目目录里,需要bootstrap,再下载bootstrap放在项目里,结果下载之后发现依赖的jquery版本不兼容,再去重新下载更高版本的jquery。真的是够了有木有!!! 于是bower粗线了!

bower的功能

和后端常用的maven类似,bower(包儿- -)是一个包管理工具,可能有同学要不屑了,前端哪有神马包啊。嗯,当然咯,这里的包不是jar包,这里的包更多是指模块。javascript语言本身没有模块的概念,随着node.js的出现,commonJs规范被提出,浏览器端也出现了CMD、AMD等规范。这些规范提供了一种组织方式使js代码模块化,模块可以单独存在、也可以和其他模块产生依赖关系。模块化的javascript可以打成一个包,因此需要一个工具来管理这些包。 作为包管理工具,bower有以下功能: 1、上传下载:这是工具的主要功能,能提高包使用的便利性。比如想用 jquery 只需要 install 一下就可以了,不用到处找下载。上传并不是必备的,根据文件存储的位置而定,但需要有一定的机制保障。 2、依赖分析:这也是包管理工具主要解决的问题之一,既然包之间是有联系的,那么下载的时候就需要处理他们之间的依赖。下载一个包的时候也需要下载依赖的包。 3、注册机制:每个包需要确定一个唯一的 ID 使得搜索和下载的时候能够正确匹配,所以包管理工具需要维护注册信息,可以依赖其他平台。

bower的安装和使用

bower是基于node开发的,首先确保装了node和npm,并且依赖于git

npm install -g bower

然后bower help看看有哪些功能

包的下载

比如我们要安装jquery,只需要一行命令:

bower install jquery

你会看到目录下多了bower_components文件夹,文件夹下面有jquery目录,如图:

其中bower.json是包的说明文件,里面说明了包的版本、依赖关系等 要注意的是,这里下载的jquery是最新版,如果想下载特定版本,可以这样

bower install jquery#~1.6.4

除了按名字下载包,还有以下几种方式: 1、直接下载 git 库

bower install git://github.com/components/jquery.git

2、github 的别名,自动解析成 git 库

bower install components/jquery

3、下载线上的任意文件

bower install http://foo.com/jquery.awesome-plugin.js

4、下载本地库

bower install ./repos/jquery

包的依赖 上面我们下载了jquery包,接着下载bootstrap

可以看到bootstrap 3.2.0是依赖jquery 2.1.1的,我们把jquery删除看看会发生神马

bower uninstall jquery

包的上传

俗话说,要乐于分享,有神马好东东也给大家用用,这时候就需要向bower提交自己的包 首先,init一下,bower会通过一系列提问,生成一个bower.json文件

接着去github创建一个repo,怎么创建偶就不说了,创建的repo地址是 https://github.com/jessiehan/test 将其注册到官方类库

bower register test git://github.com/jessiehan/test.git

即可

bower的配置

bower可以通过json格式的.bowerrc文件进行配置 .bowerrc文件可以配置以下内容:

  • directory: 安装目录,即通过bower下载的包装在哪个目录下
  • endpoint: Set a custom registry endpoint.
  • json: Set the default JSON file for Bower to use when resolving dependencies.
  • searchpath: An array of additional URLs pointing to read-only Bower registries.
  • shorthand_resolver: Define a custom template for shorthand package names.

endpoint和searchpath在使用私有库的时候比较有用

下面是一个示例:

{
  "directory": "bower_components",
  "endpoint": "https://bower.mycompany.com",
  "json": "bower.json",
  "searchpath": [
    "https://bower.herokuapp.com"
  ],
  "shorthand_resolver": "git://example.com/{{{ organization }}}/{{{ package }}}.git"
}

 

参考文献

https://github.com/bower/bower

http://chuo.me/2013/02/twitter-bower.html

http://blog.fens.me/nodejs-bower-intro/