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 相关文章推荐
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
js生成随机数的过程解析
Nov 24 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 Javascript
微信小程序(应用号)开发新闻客户端实例
Oct 24 Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
JS实现可视化音频效果的实例代码
Jan 16 Javascript
JS模拟实现京东快递单号查询
Nov 30 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
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
使用Python的Flask框架构建大型Web应用程序的结构示例
2016/06/04 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
pytorch的batch normalize使用详解
2020/01/15 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
浅析Python 多行匹配模式
2020/07/24 Python
详解python中的lambda与sorted函数
2020/09/04 Python
体育教师自荐信范文
2013/12/16 职场文书
老师给学生的表扬信
2014/01/17 职场文书
高中生家长寄语大全
2014/04/03 职场文书
综治工作心得体会
2014/09/11 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
早恋主题班会
2015/08/14 职场文书
python flask框架快速入门
2021/05/14 Python