`

Bower包依赖管理

 
阅读更多

bower包依赖管理

什么是Bower?

Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。其他一些建立在Bower基础之上的开发工具,如YeoMan和Grunt,这个会在以后的文章中介绍。

 

为什么我会在意Bower?

  1. 节省时间。为什么要学习Bower的第一个原因,就是它会为你节省寻找客户端的依赖关系的时间。每次我需要安装jQuery的时候,我都需要去jQuery网站下载包或使用CDN版本。但是有了Bower,你只需要输入一个命令,jquery就会安装在本地计算机上,你不需要去记版本号之类的东西,你也可以通过Bower的info命令去查看任意库的信息。

  2. 脱机工作。Bower会在用户主目录下创建一个.bower的文件夹,这个文件夹会下载所有的资源、并安装一个软件包使它们可以离线使用。如果你熟悉Java,Bower即是一个类似于现在流行的Maven构建系统的.m2仓库。每次你下载任何资源库都将被安装在两个文件夹中 —— 一个在的应用程序文件夹,另一个在用户主目录下的.bower文件夹。因此,下一次你需要这个仓库时,就会用那个用户主目录下.bower中的版本。

  3. 可以很容易地展现客户端的依赖关系。你可以创建一个名为bower.json的文件,在这个文件里你可以指定所有客户端的依赖关系,任何时候你需要弄清楚你正在使用哪些库,你可以参考这个文件。

  4. 让升级变得简单。假设某个库的新版本发布了一个重要的安全修补程序,为了安装新版本,你只需要运行一个命令,bower会自动更新所有有关新版本的依赖关系。

前提准备

为了安装bower,你首先需要安装如下文件:

  1. Node:下载最新版本的node.js
  2. NPM:NPM是node程序包管理器。它是捆绑在nodejs的安装程序上的,所以一旦你已经安装了node,NPM也就安装好了。
  3. Git:你需要从git仓库获取一些代码包。

 

安装Bower

一旦你已经安装了上面所说的所有必要文件,键入以下命令安装Bower:

$ npm install -g bower

这行命令是Bower的全局安装,-g 操作表示全局。

 

包的安装

Bower是一个软件包管理器,所以你可以在应用程序中用它来安装新的软件包。举例来看一下来如何使用Bower安装JQuery,在你想要安装该包的地方创建一个新的文件夹,键入如下命令:

 

 

$ bower install jquery

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

全选复制放进笔记
$ tree bower_components/
bower_components/
└── jquery
    ├── README.md
    ├── bower.json
    ├── component.json
    ├── composer.json
    ├── jquery-migrate.js
    ├── jquery-migrate.min.js
    ├── jquery.js
    ├── jquery.min.js
    ├── jquery.min.map
    └── package.json

1 directory, 10 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.json文件:bower init。 后续有包要加入,想自动写入到bower.json里。可以在安装包时添加save参数: bower install packagename --save .
0
4
分享到:
评论

相关推荐

    Bower一个web应用的包管理器

    它由Twitter的工程师在2012年推出,旨在解决前端开发中的依赖管理和资源版本控制问题。在这个快速发展的前端领域,Bower的出现极大地提高了开发效率,使得开发者能够方便地查找、安装和更新所需的前端组件。 ### ...

    Web开发组件管理器Bower.zip

    Bower 是一个针对Web开发的包管理器。该工具主要用来帮助用户轻松安装CSS、JavaScript、图像等相关包,并管理这些包之间的依赖。功能有些类似于Component。不同之处是,Component是围绕GitHub系统构建的,而Bower既...

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

    Web前端开发工具中的Bower是一款由Twitter开发的包管理器,专门用于管理和组织Web项目的前端资源。它基于Node.js的模块化理念,旨在简化前端组件的获取和管理,确保项目中不同模块之间的依赖关系得以正确处理。以下...

    nodejs依赖包离线文件(bower、coveralls)

    **Bower** 是一个前端包管理工具,主要用于管理和安装Web项目的依赖。它借鉴了NPM的概念,但主要关注于客户端资源如JavaScript库、CSS框架、图片等。通过Bower,开发者可以方便地下载和更新项目所依赖的各种前端组件...

    bower-1.6.8

    每个Bower包都可以视为一个独立的可重用组件,有自己的依赖关系。这有助于降低耦合度,提高代码复用性和可维护性。 ### 社区与生态 Bower拥有庞大的社区和丰富的资源库,开发者可以在Bower Registry上搜索和发现...

    bower_components

    ### 依赖管理 `bower_components`目录中的每个子目录代表一个独立的组件,它们之间的依赖关系可以通过`bower.json`文件来管理。每个组件的`bower.json`文件包含了关于该组件的元数据,包括版本号、作者、依赖项等。...

    bower 强大的管理web包管理工具

    Bower是一款强大的Web包管理工具,它由Twitter开发并基于Node.js构建。Bower的主要目的是帮助开发者管理和组织项目中的Web资源,如HTML、CSS、JavaScript等。随着越来越多的开源项目托管在GitHub上,Bower通过在项目...

    CentOS7系统下bower 命令权限问题

    bower命令是一款基于Node.js的包管理器,用于管理前端项目的依赖关系。默认情况下,bower命令不允许使用sudo权限执行,因为bower命令是为普通用户设计的,而不是为超级用户设计的。 解决方法一:使用--allow-root...

    Demo-bower-master.7z

    这个压缩包很可能是某个开发者为了展示如何使用 Bower 进行项目构建和依赖管理而创建的。 在前端开发中,Bower 的主要功能包括: 1. **依赖管理**:Bower 提供了一个 JSON 文件(通常称为 `bower.json`),在这个...

    testnavpkg:测试 bower 包注册

    Bower是JavaScript社区创建的一个包管理器,它的目标是解决Web应用依赖管理和版本控制的问题。本文将深入探讨“testnavpkg:测试 bower 包注册”这个主题,以及与之相关的知识点。 首先,我们需要了解Bower的基本...

    前端开源库-grunt-bower-bundle

    Grunt是JavaScript的一个任务运行器,而Bower则是一个前端依赖管理工具。本篇文章将详细介绍grunt-bower-bundle及其在前端开发中的应用。 首先,理解Grunt。Grunt是基于Node.js构建的,允许开发者定义和运行自动化...

    前端开源库-bower-files-cli

    Bower是一个基于Node.js的包管理器,专为Web开发者设计。它允许开发者声明项目所需的前端依赖,并自动下载、安装和管理这些依赖。Bower通过JSON格式的`bower.json`文件来定义项目的依赖关系,类似于npm的`package....

    前端开源库-resolve-bower

    在前端开发领域,开源库是...通过模拟`require.resolve()`,它解决了Bower包路径管理的问题,提高了开发效率。不论你是前端新手还是经验丰富的开发者,掌握`resolve-bower`都能让你在处理Bower组件时更加得心应手。

    bundler-bower-源码.rar

    通过深入了解Bundler和Bower的源码,开发者不仅可以更好地理解和解决依赖管理问题,还可以借鉴其设计思想,构建自己的包管理工具。这有助于提升开发效率,降低项目风险,确保团队协作的顺畅进行。

    sbt-bower:Play 2.3 的 Bower 依赖管理

    sbt-鲍尔一个SBT插件,它使用下载依赖项。... 在项目根目录下创建package.json : { "devDependencies": { "bower": "~1.3" }}配置使用您的依赖项创建一个文件。 默认情况下,依赖项被复制到public/components 。 自

    前端开源库-assets-bower-ci-legacy

    **Bower** 是一个流行的前端包管理器,允许开发者方便地安装、管理和更新JavaScript库、CSS框架、图片和其他前端资源。它使用JSON格式的`bower.json`文件来定义项目的依赖关系,并通过命令行工具进行操作。通过Bower...

    bower-pi:验证安装前的 bower 依赖版本

    在JavaScript开发环境中,Bower是一个流行的前端包管理器,它允许开发者轻松地管理和维护项目中的JavaScript库、CSS框架和其他Web资源。"bower-pi"似乎是一个与Bower相关的项目,可能用于验证或确保Bower依赖项在...

    bower:网络的程序包管理器

    Bower为前端软件包管理问题提供了一种通用的,不受质疑的解决方案,同时通过API公开了软件包依赖关系模型,该API可以被更自以为是的构建堆栈使用。 没有系统范围的依赖关系,没有依赖关系在不同应用之间共享,并且...

    前端开源库-grunt-bower-install

    总的来说,`grunt-bower-install`和类似的工具极大地提高了前端开发的效率,让依赖管理变得更加智能和自动化。通过它们,开发者可以更专注于编写业务逻辑,而不是维护静态资源的引用。在大型项目中,这种自动化尤其...

    bebas-neue-regular-webfont:为 Bower 打包的 Bebas Neue Web 字体

    Bower 是一个用于管理网页项目依赖的工具,允许开发者方便地安装、更新和管理前端组件,如 JavaScript 库、CSS 框架、图片和其他资源。 描述 "bebas-new-regular-webfont 为 Bower 打包的 Bebas New Web 字体" 中的...

Global site tag (gtag.js) - Google Analytics