学习Bower -- 前端开发包管理工具
发布在每天学点javascript2014年1月8日view:27429
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

enter image description here

和过去相比,现在的前端开发有更多的库和框架可以使用。一般情况下,一个项目中至少需要使用到五个以上的库。但是持续关注这些库并确保它们更新到最新版本是一件很麻烦的事情。还好,现在我们有了Bower,一个可以帮助你管理你的应用的前端依赖库的包管理器。

安装Bower

Bower可以使用npm来安装,如果你安装了node,那么npm也默认一起被安装到了你的电脑里。

打开命令行终端,输入并运行下面命令:

(sudo) npm install -g bower   

安装完毕之后,你可以使用以下命令来确认bower已经安装完毕:

bower -v   

如果得到一个版本号,那么bower已经安装成功了!

寻找包

在Bower只寻找包的方法有两种,一种是查看在线的组件目录,另一种是直接使用命令行工具。

你可以使用search命令在在命令行中搜索包。具体形式如下所示:

bower search <query>   

例如我们要搜索包含关键字’jquery’的包,我们在命令行忠输入一下命令:

bower search query   

运行上面的命令将会返回一连串结果,我们在这里展示其中的一些结果:

Search results:

    jquery git://github.com/components/jquery.git
    jquery-ui git://github.com/components/jqueryui
    jquery.cookie git://github.com/carhartl/jquery-cookie.git
    jquery-placeholder git://github.com/mathiasbynens/jquery-placeholder.git
    jquery-file-upload git://github.com/blueimp/jQuery-File-Upload.git
    jasmine-jquery git://github.com/velesin/jasmine-jquery
    jquery.ui git://github.com/jquery/jquery-ui.git
    ...   

每一条结果都显示了包的名称以及一个对应的Git端点,你可以使用名字或者Git端点来安装一个包。

安装包

为了在你的项目中添加一个Bower包你可以使用install命令。后面需要加上你想要安装的包的名称:

bower install <package>   

除了使用包的名称,你还可以使用其他的参数来安装一个包:

  • 一个Git端点例如: git://github.com/components/jquery.git
  • 一个本地Git仓库的路径
  • 一个端点的缩写比如components/jquery。Bower会默认你使用的是Github,在这种情形下,端点名称是git仓库URL中github.com后面的部分
  • 一个指向zip或者tar文件的URL。文件内容将会自动被解压缩。

你可以通过在包名称后面添加一个#符号来暗转改一个特定的版本:

bower install <package>#<version>  

安装的包会被放置在bower_compontents目录下。该目录会在bower运行的文件夹下自动被创建。你也可以通过更改.bowerrc文件中的配置选项来改变改目录创建的路径:

enter image description here

安装完成后,你可以在你的HTML文件中通过简单的添加一个<script>或者<link>标签来使用一个包。尽管Bower包通常时候只包含JavaScript文件,它们有时也包含CSS或者图片。

<script src="path/to/bower_components/jquery/jquery.min.js"></script>   

使用bower.json文件安装包

如果你要在你的项目中安装多个包那么最好使用bower.json文件来安装包。这样你可以使用一行命令安装或者更新多个包。

{
  "name": "app-name",
  "version": "0.0.1",
  "dependencies": {
    "sass-bootstrap": "~3.0.0",
    "modernizr": "~2.6.2",
    "jquery": "~1.10.2"
  },
  "private": true
}   

上面的例子简单地展示了一个bower.json文件,它定义了一些关于你的项目的信息以及依赖的包的列表。bower.json文件实际上是用来定义一个Bower包的,因此事实上你是使用一些依赖包创建你自己的包。

例子中的属性可以这么来解释:

  • name – 你的应用/包的名字
  • version – 你的应用/包的版本号
  • dependencies – 你的应用需要的包。你应该像上面的例子一样指明每一个包的版本号。如果指定latest,Bower会安装最新发布额版本。
  • private – 将该属性设置为true意味着你想要这个包保持私有并且并不想在将来将它添加到registry中。

一旦你编写完成了bower.json文件之后,你可以简单地执行bower install命令来安装你指定的包。

Bower包含了一个非常有用的功能来帮助你创建一个bower.json文件。在你的项目的根目录下执行bower init将会启动一个互动的程序帮助你创建这个文件。同时,你依然可以自己添加内容到这个文件中。

列出安装的包

你可以使用list命令轻松的找到已经安装的包:

bower list   

下面展示的代码片段显示了一个使用jQuery,Modernize和Sass的简单项目的输出。注意到Bower同时也检查了每一个包是否是可用的最新版本。

enter image description here

更新包

更新一个包也非常的简单,如果你使用bower.json文件那么你可以通过执行一个简单的update命令来一次性更新所有包。然而,update工具将会遵循你在bower.json文件中指明的版本限制。

bower update   

你可以使用update来更某个单独的包,你可以通过指定包的名字来完成更新:

bower update <package>   

卸载包

为了移除一个包你可以使用uninstall命令并加上你想要移除的包的名字:

bower uninstall <package>   

一次性加上多个命格可以同时移除多个包:

bower uninstall jquery modernizr sass-bootstrap   

总结

包管理工具创新的改变了我们分享代码的方式。它使得我们更加容易的使用代码库,并且解决了关于代码更新的令人头疼的问题。

很长一段时间以来前端开发人员都在关注例如RubyGems with envy这样的项目,希望有一天可以用一种非常直接的方式来管理项目依赖包。Bower正是这样的工具。随着一些优秀的库加入到我们的应用中,我们项目的复杂性不可避免的增加。Bower为我们提供了一种管理复杂性的方式。


本文译自Getting Started with Bower,原文地址http://blog.teamtreehouse.com/getting-started-bower

如果你觉得本文对你有帮助,请点击下面的链接为我提供赞助

(● ̄ε ̄●) 点这里为我提供赞助~~么么

评论
发表评论
6年前
赞了此文章!
6年前

请问用了 Bower 我自己写的 JS 应该放在哪里?要怎么写?

7年前

Bower有俩好基友的,粘个地址: http://yeoman.io/

7年前

作者产量真高啊!都是好文,支持

WRITTEN BY
张小俊128
Intern in Baidu mobile search department。认真工作,努力钻研,期待未来更多可能。
TA的新浪微博
PUBLISHED IN
每天学点javascript

javascript进阶级教程,循序渐进掌握javascript

我的收藏