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

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依赖包管理工具小编就给大家介绍到这里,希望对大家有所帮助!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索bower工具
bower依赖包
bower 安装依赖、bower依赖git吗、前端 bower、bower 依赖、前端依赖管理,以便于您获取更多的相关知识。

时间: 2024-07-28 17:44:11

Web前端开发工具——bower依赖包管理工具_javascript技巧的相关文章

in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案_javascript技巧

国外的像基于jQuery的RequireJs,YUI Loader,LabJs,RunJs,国内也有淘宝的SeaJs,豆瓣的DoJs等,这些都是一些十分优秀的模块加载器.但是本文将会向大家介绍一个新的开源的轻量级"多线程"异步模块加载器In.js,In的开发借鉴了Do的一些思路和使用习惯,在此期间感谢@kejun同我的耐心交流,In.js压缩后只有4.77k,不仅小巧而且十分好用. 优点: 按需加载 无阻塞加载 依赖关系管理 颗粒化模块管理 如何使用? A.引入In.js 复制代码 代

bower 强大的管理web包管理工具_其它综合

Bower介绍 bower官方地址:http://bower.io/ bower是twitter的又一个开源项目,使用nodejs开发,用于web包管理.如果越来越多得开源项目都托管在github上,bower只需要将github上项目加上一个配置文件既可以使用bower方式使用安装包.作为包管理,bower能提供添加新web包,更新web包,删除web包,发布web包功能,管理包依赖.web包通常认为由html+css+javascript构成. quick start: 解决实际问题 试想我

前端包管理工具bower安装与介绍

什么是bower? Bower是一个客户端技术的软件包管理器,它可用于搜索.安装和卸载如JavaScript.HTML.CSS之类的网络资源.其他一些建立在Bower基础之上的开发工具,如YeoMan和Grunt 用我的话说就是,它跟PHP的Composer,Python的pip,Ubuntu的apt-get等一样,bower是一个前端的包管理工具,也就是你可以定义使用哪些包,如jquery,就可以方便的下载下来,统一管理. 使用bower 打开这个"后台管理"目录,结构如图: bow

Ubuntu包管理工具新立得图形化前端指南

新立得是http://www.aliyun.com/zixun/aggregation/13835.html">Ubuntu的包管理工具 apt, 的图形化前端.它结合了图形界面的简单操作和 apt-get 命令行工具的强大功能.您可以使用新立得安装.删除.配置.升级软件包,对软件包列表进行浏览.排序.搜索以及管理软件仓库或者升级整个系统.您可以进行一些系列操作形成操作队列,并一起执行它们.新立得会提示您可能的依赖关系(您所选择的软件包所需的额外软件包)以及您所选择的软件包与系统中已经安装

《开源思索集》一基于包管理工具的开源生态圈

基于包管理工具的开源生态圈 开源思索集2005年,我还是一个典型的Java程序员.一个偶然的机会,我看到了一篇文章--<Ruby on Rails实践>. 在简单的试用之后,我于2005年05月27日在当年的JavaEye社区写了一篇热情洋溢的帖子:Java社群该向Ruby on Rails学习些什么? 当时的JavaEye站长Robbin回复到:"Python/Ruby是下一代的编程语言,Java是这一代的编程语言,要等到Python/Ruby流行,至少5年以后.正因为5年以后,所

淘宝前端工程师:国内WEB前端开发十日谈

中介交易 SEO诊断 淘宝客 云主机 技术大厅 一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是"初级"前端开发工程师,一方面我入道尚浅,只有短短几年,另一方面我自知对技术的钻研并不深入,可能是由于环境的原因,当然最重要的是,我幸运的参与到互联网崛起的浪潮之巅.时势造就了一批技能薄弱但备受追捧的"弄潮者",这在很大程度上影响我

Linux包管理工具yum简介

什么是yum: Yum(全称为 Yellow dog Updater, Modified)是redhat系列linux系统的包管理工具.就是类似windows下安装软件那个下一步下一步的东西.由于linux的开源,所以linux下的软件有大量组件依赖.这导致了linux安装一个软件必须先安装各依赖包,yum就是帮助我们解决这个的. yum的基础是RPM,RPM是由红帽公司开发的软件包管理方式,使用rpm我们可以方便的进行软件的安装.查询.卸载.升级等工作.但是RPM软件包之间的依赖性问题往往会很

《Web前端开发最佳实践》——第2章 高效Web前端开发2.1 前端代码的结构组织和文件的命名

第2章 高效Web前端开发 本章首先将概述Web前端开发中的相关最佳实践,如前端代码文件组织.前端代码重构.前端框架的选择,以及前端开发过程中实用的开发辅助工具等,帮助读者提高前端开发的效率.好的开发方式在项目中会起到事半功倍的效果,并且可确保开发过程中的代码结构清晰,易维护.本章然后会介绍前端代码的基本命名规范和格式规范,良好的命名规范和规整的格式让代码看起来干净整洁,也体现了开发者良好的职业素养,应该说命名规范.整齐的格式不仅是开发过程中的一种约定,而且是程序员之间良好沟通的桥梁. 2.1

网站建设-求教web前端开发钟遇到的数据传递问题

问题描述 求教web前端开发钟遇到的数据传递问题 请教下各位 在此先谢谢了大家了 本人毕业于北大青鸟 半道子出家爱好前端 工作一年时间了 一直处于不断学习阶段 最近非常疑惑 因为在一直在一家网站建设公司任职web前端开发 公司接的项目都是展示型网站 一个项目也就一二十个页面 主要用jquery,html5,css3开发.着重页面炫酷效果这一块.最近看到ext.js,node.js 看着云里雾里 我现在的工作就是切片写页面 对于数据传输一点都没接触(php后台做了,数据也不是很多),我在想为了以后