文档章节

Bower介绍及用法(转)

mosaic101
 mosaic101
发布于 2015/04/15 13:49
字数 1803
阅读 171
收藏 0
点赞 0
评论 0

Bower介绍 2014.05.10

1. bower介绍

Bower 是用于 web 前端开发的包管理器。对于前端包管理方面的问题,它提供了一套通用、客观的解决方案。它通过一个 API 暴露包之间的依赖模型,这样更利于使用更合适的构建工具。bower 没有系统级的依赖,在不同 app 之间也不互相依赖,依赖树是扁平的。

bower-logo

Bower 运行在 Git 之上,它将所有包都视作一个黑盒子。任何类型的资源文件都可以打包为一个模块,并且可以使用任何规范(例如:AMD、CommonJS 等)。

包管理工具一般有以下的功能:

  • 注册机制:每个包需要确定一个唯一的 ID 使得搜索和下载的时候能够正确匹配,所以包管理工具需要维护注册信息,可以依赖其他平台。

  • 文件存储:确定文件存放的位置,下载的时候可以找到,当然这个地址在网络上是可访问的。

  • 上传下载:这是工具的主要功能,能提高包使用的便利性。比如想用 jquery 只需要 install 一下就可以了,不用到处找下载。上传并不是必备的,根据文件存储的位置而定,但需要有一定的机制保障。

  • 依赖分析:这也是包管理工具主要解决的问题之一,既然包之间是有联系的,那么下载的时候就需要处理他们之间的依赖。下载一个包的时候也需要下载依赖的包。

功能介绍,摘自文章:http://chuo.me/2013/02/twitter-bower.html

2. 安装

bower 插件是通过 npm, node.js 包管理器安装和管理的。

npm 是 node 程序包管理器。它是捆绑在 node.js 的安装程序上的,所以一旦你已经安装了 node,npm 也就安装好了。

在 mac上 安装 node.js 方法:

brew install nodejs

通过 npm 安装 bower 到全局环境中:

npm install -g bower

3. 使用

安装之后,可以通过 bower help 命令可以获取更多帮助信息。了解了这些信息就可以开始了。

安装包及其依赖的包

Bower 提供了几种方式用于安装包:

# Using the dependencies listed in the current directory's bower.json bower install # Using a local or remote package bower install <package> # Using a specific Git-tagged version from a remote package bower install <package>#<version>

其中,<package> 可以是以下列出的一种:

  • 注册到 bower 中的一个包名, 例如:jquery。

  • 一个 Git 仓库地址,例如: git://github.com/someone/some-package.git

  • 一个本地的 Git 目录

  • github 的别名,例如:someone/some-package (defaults to GitHub)。

  • 一个文件 url,包括 zip 和t ar.gz 文件。

举例来看一下来如何使用 bower 安装 jQuery,在你想要安装该包的地方创建一个新的文件夹,键入如下命令:

$ bower install jquery

上述命令完成以后,你会在你刚才创建的目录下看到一个 bower_components 的文件夹,其中目录如下:

$ tree bower_components/ bower_components └── jquery     ├── MIT-LICENSE.txt     ├── bower.json     ├── dist     │   ├── jquery.js     │   ├── jquery.min.js     │   └── jquery.min.map     └── src         ├── ajax         │   ├── jsonp.js         │   ├── load.js         │   ├── parseJSON.js         │   ├── parseXML.js         │   ├── script.js         │   ├── var         │   │   ├── nonce.js         │   │   └── rquery.js         │   └── xhr.js         ├── ajax.js         ├── attributes         │   ├── attr.js         │   ├── classes.js         │   ├── prop.js         │   ├── support.js         │   └── val.js         ├── attributes.js         ├── callbacks.js         ├── core         │   ├── access.js         │   ├── init.js         │   ├── parseHTML.js         │   ├── ready.js         │   └── var         │       └── rsingleTag.js         ├── core.js         ├── css         │   ├── addGetHookIf.js         │   ├── curCSS.js         │   ├── defaultDisplay.js         │   ├── hiddenVisibleSelectors.js         │   ├── support.js         │   ├── swap.js         │   └── var         │       ├── cssExpand.js         │       ├── getStyles.js         │       ├── isHidden.js         │       ├── rmargin.js         │       └── rnumnonpx.js         ├── css.js         ├── data         │   ├── Data.js         │   ├── accepts.js         │   └── var         │       ├── data_priv.js         │       └── data_user.js         ├── data.js         ├── deferred.js         ├── deprecated.js         ├── dimensions.js         ├── effects         │   ├── Tween.js         │   └── animatedSelector.js         ├── effects.js         ├── event         │   ├── alias.js         │   └── support.js         ├── event.js         ├── exports         │   ├── amd.js         │   └── global.js         ├── intro.js         ├── jquery.js         ├── manipulation         │   ├── _evalUrl.js         │   ├── support.js         │   └── var         │       └── rcheckableType.js         ├── manipulation.js         ├── offset.js         ├── outro.js         ├── queue         │   └── delay.js         ├── queue.js         ├── selector-native.js         ├── selector-sizzle.js         ├── selector.js         ├── serialize.js         ├── sizzle         │   └── dist         │       ├── sizzle.js         │       ├── sizzle.min.js         │       └── sizzle.min.map         ├── traversing         │   ├── findFilter.js         │   └── var         │       └── rneedsContext.js         ├── traversing.js         ├── var         │   ├── arr.js         │   ├── class2type.js         │   ├── concat.js         │   ├── hasOwn.js         │   ├── indexOf.js         │   ├── pnum.js         │   ├── push.js         │   ├── rnotwhite.js         │   ├── slice.js         │   ├── strundefined.js         │   ├── support.js         │   └── toString.js         └── wrap.js 23 directories, 88 files

包的使用

现在就可以在应用程序中使用 jQuery 包了,在 jQuery 里创建一个简单的 html5 文件:

<!doctype html> <html> <head>     <title>Learning bower</title> </head> <body> <button>Animate Me!!</button> <div style="background:red;height:100px;width:100px;position:absolute;"> </div> <script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script> <script type="text/javascript">     $(document).ready(function(){         $("button").click(function(){             $("div").animate({left:'250px'});         });     }); </script> </body> </html>

正如你所看到的,你刚刚引用 jquery.min.js 文件,现阶段完成。

查看安装的包

执行以下命令可以列出所有本地安装的包。

$ bower list

查找包

查找bower注册的包:

$ bower search [<name>]

只需执行 bower search 命令即可列出所有已经注册的包。

包的信息

如果你想看到关于特定的包的信息,可以使用 info 命令来查看该包的所有信息:

$ bower info jquery bower cached        git://github.com/jquery/jquery.git#2.1.1 bower validate      2.1.1 against git://github.com/jquery/jquery.git#* {   name: 'jquery',   version: '2.1.1',   main: 'dist/jquery.js',   license: 'MIT',   ignore: [     '**/.*',     'build',     'speed',     'test',     '*.md',     'AUTHORS.txt',     'Gruntfile.js',     'package.json'   ],   devDependencies: {     sizzle: '1.10.19',     requirejs: '2.1.10',     qunit: '1.14.0',     sinon: '1.8.1'   },   keywords: [     'jquery',     'javascript',     'library'   ],   homepage: 'https://github.com/jquery/jquery' } Available versions:   - 2.1.1   - 2.1.1-rc2   - 2.1.1-rc1

注册包

可以注册自己的包,这样其他人也可以使用了:

$ bower register project git://github.com/yourname/project

包的卸载

卸载包可以使用 uninstall 命令:

$ bower uninstall jquery

配置文件

每个包应该有一个配置文件,描述包的信息,jquery 的配置文件为 bower.json。

{   "name": "jquery",   "version": "2.1.1",   "main": "dist/jquery.js",   "license": "MIT",   "ignore": [     "**/.*",     "build",     "speed",     "test",     "*.md",     "AUTHORS.txt",     "Gruntfile.js",     "package.json"   ],   "devDependencies": {     "sizzle": "1.10.19",     "requirejs": "2.1.10",     "qunit": "1.14.0",     "sinon": "1.8.1"   },   "keywords": [     "jquery",     "javascript",     "library"   ] }

name 和 version 描述包的名称和版本,dependencies 描述这个包依赖的其他包。main 指定包中的静态文件,可以为一个数组。license 指定版权协议,ignore 指定忽略哪些文件,devDependencies 指定依赖,keywords 描述该包的关键字。

除了包的配置文件,Bower 有一个项目的配置文件 .bowerrc ,存在于当期项目目录下,和 bower.json 文件同级,该文件内容如下:

{   "directory": "src/main/resources/static/libs",   "json": "bower.json" }

参数说明:

  • directory:配置下载的依赖存放路径,默认为 bower_components

  • json:保存项目依赖的文件名称,默认为 bower.json

更多的配置参数,需要查验官方文档,这里暂时不做补充。

类似的,你可以配置一个全局的配置文件 ~/.bowerrc,位于用户根目录下面。

项目中使用

bower.json 文件的使用可以让包的安装更容易,你可以在应用程序的根目录下创建一个名为 bower.json 的文件,并定义它的依赖关系。使用 bower init命令来创建 bower.json 文件:

[?] name: blog [?] version: 0.0.0 [?] description:  [?] main file:  [?] what types of modules does this package expose?  [?] keywords:  [?] authors: javachen <june.chan@javachen.com> [?] license: MIT [?] homepage:  [?] would you like to mark this package as private which prevents it from being accidentally published to the registry? No accidentally published to the registry? (y/N)  {   name: 'blog',   version: '0.0.0',   authors: [     'javachen <june.chan@javachen.com>'   ],   license: 'MIT',   ignore: [     '**/.*',     'node_modules',     'bower_components',     'test',     'tests'   ],   dependencies: {     jquery: '~2.1.1'   } } [?] Looks good? Yes

注意看,它已经加入了 jQuery 依赖关系。

现在假设也想用 twitter bootstrap,我们可以用下面的命令安装 twitter bootstrap 并更新 bower.json文件:

$ bower install bootstrap --save

它会自动安装最新版本的 bootstrap 并更新 bower.json 文件:

{   name: 'blog',   version: '0.0.0',   authors: [     'javachen <june.chan@javachen.com>'   ],   license: 'MIT',   ignore: [     '**/.*',     'node_modules',     'bower_components',     'test',     'tests'   ],   dependencies: {     jquery: '~2.1.1',     bootstrap: '~3.0.0'   } }

如果想查看有哪些包和文件,可执行 bower list --path。比如安装了 jquery,可以看到以下信息:

{   "jquery": "bower_components/jquery/dist/jquery.js" }

现在就可以使用了,在当前目录建一个页面,script 嵌入需要的 js。

4. 总结

Bower 类似 maven 用于管理 javascript 的版本及其依赖,使用非常简单。

5. 参考文章

----EOF----- 


© 著作权归作者所有

共有 人打赏支持
mosaic101
粉丝 21
博文 31
码字总数 12966
作品 0
浦东
程序员
前端模块管理器简介

模块化结构已经成为网站开发的主流。 制作网站的主要工作,不再是自己编写各种功能,而是如何将各种不同的模块组合在一起。 浏览器本身并不提供模块管理的机制,为了调用各个模块,有时不得不...

阮一峰 ⋅ 2014/09/14 ⋅ 0

HTML5拓扑图编辑器项目 - Graph.Editor

拓扑图编辑器介绍 项目地址:https://github.com/samsha/graph.editor 在线演示:http://demo.qunee.com/editor/ Graph.Editor是一款基于HTML5技术的拓补图编辑器,采用jquery插件的形式,是...

nosand ⋅ 2015/01/17 ⋅ 0

一个后端的前端学习之旅——2.先搞定gulp

这是我的小本本的笔记,先列出了dev中用到的东西,blog可能写了就懒得懂了,但是小本本是随时更新的 小本本位置 一个gulp的脚手架 https://github.com/WINTR/gulp-frontend-scaffold npm淘宝...

D咄咄 ⋅ 2017/11/29 ⋅ 1

WEB前端学习:vue图标组件Vue-Awesome,让你快速方便的使用font-awesome图标

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 06/04 ⋅ 0

Bower的简单使用教程

之前我们很多的第三方依赖包都是去各自的官网下载的,然后引入到我们的项目中,其实这是一种非常麻烦的做法,因为有个工具就是完全的可以替代着我们做这些事情,对于gower就不过多介绍了,下...

邪气小生 ⋅ 2016/03/08 ⋅ 0

Bower安装与入门

一、Bower介绍 Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源,github上很多例程都使用bower来管理前端的通用依赖库,比如jquery,...

阿振 ⋅ 2016/02/13 ⋅ 0

react yeoman 第一次创建自己的app

最近因为比较闲的原因,所以就抽空研究了一下react,本来是直接把facebook的开源项目down下来的,但是发现需要配置好多环境,所以我们就暂且缓缓,之后我在网上找了很多实例,真的是找了好多...

i5--lou ⋅ 2016/03/24 ⋅ 0

Angular 的 UEditor 插件--Angular-UEditor

Angualr 作为最近前端大热的一款框架,越来越多国人开始使用并且不断有成功的项目。UEditor作为百度前端团队的一款神器,在国内多个项目也在使用。所以小编抽了个时间把angular和UEditor整合...

胡晋 ⋅ 2014/09/22 ⋅ 2

用yeoman生成angular项目,以及yeoman的项目架构

简单的介绍下yeoman,就是个项目架构的生成器,工具 对于yeoman的安装,这里就不多说了,npm都搞定的 看下项目生成的操作吧和目录的介绍吧 我在我电脑上生成的是angular generators 一步步如...

邪气小生 ⋅ 2016/03/08 ⋅ 0

Bower => 前端开发也有包管理器

最近看到一个专门针对前端的包管理工具Bower,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。实际上angularjs的种子项目就是用它的,看到了吗,它是专门针对客户端资源的,也...

顽Shi ⋅ 2014/05/22 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

OSChina 周三乱弹 —— 这样的女人私生活太混乱了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ 胖达panda :你经历过体验到人生的大起大落吗?我一朋友在10秒内体验了,哈哈。@小小编辑 请点一首《almost lover》送给他。 《almost love...

小小编辑 ⋅ 33分钟前 ⋅ 5

自己动手写一个单链表

文章有不当之处,欢迎指正,如果喜欢微信阅读,你也可以关注我的微信公众号:好好学java,获取优质学习资源。 一、概述 单向链表(单链表)是链表的一种,其特点是链表的链接方向是单向的,对...

公众号_好好学java ⋅ 39分钟前 ⋅ 0

Centos7重置Mysql 8.0.1 root 密码

问题产生背景: 安装完 最新版的 mysql8.0.1后忘记了密码,向重置root密码;找了网上好多资料都不尽相同,根据自己的问题总结如下: 第一步:修改配置文件免密码登录mysql vim /etc/my.cnf 1...

豆花饭烧土豆 ⋅ 今天 ⋅ 0

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 今天 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 今天 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 今天 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 2

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部