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 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
爆炸式的JS圆形浮动菜单特效代码
Mar 03 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 Javascript
js父页面与子页面不同时显示的方法
Oct 16 Javascript
jQuery中animate动画第二次点击事件没反应
May 07 Javascript
JavaScript位移运算符(无符号) >>> 三个大于号 的使用方法详解
Mar 31 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
VUE项目中加载已保存的笔记实例方法
Sep 14 Javascript
React 高阶组件HOC用法归纳
Jun 13 Javascript
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 18 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实现paypal整合方法
2010/11/28 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
php使用Imagick生成图片的方法
2015/07/31 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
微信小程序实现图片上传功能
2018/05/28 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
js实现蒙版效果
2020/01/11 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
Python 词典(Dict) 加载与保存示例
2019/12/06 Python
Keras设置以及获取权重的实现
2020/06/19 Python
python集合能干吗
2020/07/19 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
中职生求职信
2014/07/01 职场文书
企业年会祝酒词
2015/08/11 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
Python 中的 copy()和deepcopy()
2021/11/07 Python
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers