Web前端开发工具——bower依赖包管理工具


Posted in Javascript onMarch 29, 2016

Bower 是 twitter 推出的一款包管理工具,基于nodejs的模块化思想,把功能分散到各个模块中,让模块和模块之间存在联系,通过 Bower 来管理模块间的这种联系。

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

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

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

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

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

由于bower是基于nodejs开发的,所以你首先必须得有个nodejs环境,至于这么安装nodejs网上一大堆教程,对了使用bower还需要安装git,这里就不多说了。

bower带来的好处

假如你有一个项目,里面需要用到了JQuery在正常情况下我们需要到jQuery官方网站下载库,这样的话,每次jquery更新,我们又要到jQuery官方下载,那这样的话就很麻烦了,如果有一款工具能够输入一个命令让我们选择要下载的版本,并且如果想把我们项目里面的所有库更新到最新版也只需要输入一个命令那是不是很方便,bower的另外一个好处就是如果你安装bootstrap那么它会自动下载jquery,因为bootstrap依赖了jquery,简单的来说只要我们下载的那个库依赖了另外的库那么bower会自动帮我们下载依赖的库,bower就是这么强大。

bower的安装

npm install -g bower 表示安装到全局环境

bower的使用

1. 通过bower下载库

bower install (包的名称如:jquery)[#版本如:#1.7] 版本可选,如果没有写,默认下载最新版

如:bower install bootstrap#2.2

2. 如果需要更新所以的库,我们可以输入以下命令

bower update

如果需要生成一个你下载个包的所以信息,比如你在一个团队中,你想让其他人知道你都用了哪些库,并且它们的版本是多少,那么我们可以通过以下命令来完成。

我们需要先初始化一个包描述。它会在你的当前执行环境目录中创建一个bower.json的目录

`bower init -y`

然后通过

`bower install jquery --save`

它会在bower.json文件中加入jquery的版本信息,如果你想添加多个可以通过空格bower install jquery bootstrap less --save

以下是bower.json文件的内容

{
"name": "down",
"authors": [
"xxxxxxxx"
],
"description": "",
"main": "",
"moduleType": [],
"license": "MIT",
"homepage": "",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"bootstrap": "^3.3.6",
"less": "^2.6.1",
"jquery": "^2.2.2"
}
}

当然如果你是nodejs新手或许你会有些茫然,因为这里并不是一个nodejs基础教程,如果你想了解想学node的话还需要到网络中学习。

bower除了这些好处以为,还有一些更加强大的功能,那就需要大家去发现了,我这里就不再介绍了,毕竟我也是刚刚开始学习node

------------------------------------------------------分割线---------------------------------------

bower与npm的关系

 安装bower需要通过npm来安装

bower与npm的区别:

1. 在之前的npm版本中,它不能共享依赖的代码,也是就说,在以前的npm版本中,如果你下载了一个bootstrap,因为bootstrap是依赖jquery的,所以它会把jquery也下载下来,但是如果你的另外一个库也用到了jquery,那么它也会去下载一个jquery,这样的话,代码就重复了。

它们的结构就像这样:

bootstrap\jQuery

xxxxxxxxx\jQuery

它们重复了对吧,不过好像在npm的最新版本中解决了这个问题。

2. npm 会将开发环境一起下载下来,bower 只会下载 编译后的前度模块。

3. NPM主要运用于Node.js项目的内部依赖包管理,安装的模块位于项目根目录下的node_modules文件夹内。而Bower大部分情况下用于前端开发,对于CSS/JS/模板等内容进行依赖管理,依赖的下载目录结构可以自定义。 -- 本段内容是在网上找到的。

所谓的自定义目录结构的意思是说,你在那个文件目录打开的bower,那么它就会在那个文件下,下载你需要的包,而npm就不支持这个。

总结:我们可以简单的来理解npm是用来管理nodejs模块的也就是包,而bower是用来管理我们前端库的。

有关Web前端开发工具——bower依赖包管理工具小编就给大家介绍到这里,希望对大家有所帮助!

Javascript 相关文章推荐
网页中表单按回车就自动提交的问题的解决方案
Nov 03 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
js实现div模拟模态对话框展现URL内容
May 27 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
Dec 01 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
在Vue中使用antv的示例代码
Jun 29 Javascript
Jquery操作cookie记住用户名
Mar 29 #Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 #Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 #Javascript
AngularJS directive返回对象属性详解
Mar 28 #Javascript
Boostrap模态窗口的学习小结
Mar 28 #Javascript
理解javascript模块化
Mar 28 #Javascript
谈一谈jQuery核心架构设计
Mar 28 #Javascript
You might like
php密码生成类实例
2014/09/24 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
php新建文件的方法实例
2019/09/26 PHP
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
Django如何实现内容缓存示例详解
2017/09/24 Python
Django实现快速分页的方法实例
2017/10/22 Python
深入浅析Python的类
2018/06/22 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
python自动点赞功能的实现思路
2020/02/26 Python
10张动图学会python循环与递归问题
2021/02/06 Python
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
求职者简历中的自我评价
2013/10/20 职场文书
绝对经典成功的大学生推荐信
2013/11/08 职场文书
工地门卫岗位职责
2013/12/30 职场文书
初中生自我鉴定
2014/02/04 职场文书
积极向上的团队口号
2014/06/06 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
事业单位聘任报告
2015/03/02 职场文书
公司财务管理制度
2015/08/04 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python
python blinker 信号库
2022/05/04 Python
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers