Bower => 前端开发也有包管理器

摘要: 一直以来npm,pip等各种包管理器好像都和前端开发没什么太大关系,当然因为nodejs的原因可能感觉npm会亲切一些,不过终归不是针对客户端的包管理工作,所以Bower的出现确实让人眼前一亮.

最近看到一个专门针对前端的包管理工具Bower,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。实际上angularjs的种子项目就是用它的,看到了吗,它是专门针对客户端资源的,也就是说它管理的基本上都是前端工程师使用的东东.

Bower是用于web前端开发的包管理器。对于前端包管理方面的问题,它提供了一套通用、客观的解决方案。它通过一个API暴露包之间的依赖模型,这样更利于使用更合适的构建工具。Bower没有系统级的依赖,在不同app之间也不互相依赖,依赖树是扁平的。

Bower运行在Git之上,它将所有包都视作一个黑盒子。任何类型的资源文件都可以打包为一个模块,并且可以使用任何规范(例如:AMD、CommonJS等)。

介绍完了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

Bower依赖Node 和 npm。通过npm 安装到全局环境中:

    npm install -g bower

使用

安装之后,可以通过bower help命令可以获取更多帮助信息。了解了这些 信息就可以开始了。

安装包以及其依赖的包

# Using the dependencies listed in the current directory‘s bower.json
bower install
# Using a local or remote package
bower install <package>
# Using a specific Git-tagged version from a remote package
bower install <package>#<version>

所有包都将默认安装到components目录中。 不建议直接修改此目录中的内容。

执行bower list命令可以列出所有本地安装的包。

如果你不是在创建一个被其他人使用的包(也就是说,你在构建自己的web应用), 那就应当将所有的已经安装的包纳入源码管理中。

查找包

bower search [<name>]

使用包

做简单的使用方式就是通过script 标签直接引入已经安装的包:

<script src="/bower_components/jquery/index.js"></script>

对于更复杂的项目,你可能更希望合并所有脚本或者使用模块加载器(module loader)。 Bower只是一个包管理器,不过你可以使用很多其他工具 -- 例如 Sprockets 和 RequireJS -- 这些都能帮你完成你所希望的工作。

卸载包

bower uninstall <package-name>

配置Bower.json

首先,必须在项目的根目录下创建一个JSON文件 -- 默认是bower.json,然后指定所有的依赖。这和 Node所使用的package.json文件或者Ruby中的Gemfile文件很类似,并且有助于锁定项目的依赖关系。

还可以通过以下命令,进入交互式界面创建一个bower.json文件:

bower init

文件定义了几个参数:

name (required): The name of your package.

version: A semantic version number (see semver).

main [string|array]: The primary endpoints of your package.

ignore [array]: An array of paths not needed in production that you want Bower to ignore when installing your package.

dependencies [hash]: Packages your package depends upon in production.

devDependencies [hash]: Development dependencies.

{
  "name": "my-project",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<name>": "<version>",
    "<name>": "<folder>",
    "<name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

更多内容可以去看看官网http://bower.io/

© 著作权归作者所有

转自 https://my.oschina.net/blogshi/blog/267893

时间: 2024-10-14 01:06:50

Bower => 前端开发也有包管理器的相关文章

以rpm为后端及以yum为前端工具的程序包管理器在Linux发行版系统centos中的使用

程序包管理: 应用程序的安装,实际上是解压缩并复制程序包中的文件到指定目录的过程: 程序包管理器: 方便终端用户进行程序的安装.卸载.升级.安装信息查询及校验等工作: 不同的Linux的发行版本中,有不同的程序包管理器: Debian:dpt:Redhat:rpm:S.u.S.E:rpm:Gentoo:借鉴了FREEBSD的portage程序包管理机制,ports方式,emerge工具:ArchLinux:pacman 以CentOS为例,rpm程序包管理器: rpm程序包的命名规则: 源代码包

Android开发之通过包管理器获取安装应用信息

最近在自己写一个APP,有一个模块需要获取手机应用的一些信息.坑还是有,但都基本踩过了,自己把他实现了出来,实现方法还是很需要掌握的.底部弹出的对话框中四个选项的实现不多做说明,主要讲讲如何获取这些安装的应用信息.好了,不多说,看看效果图: 获取手机安装应用信息: 1.写一个JavaBean,用于存放应用信息,生产get,set方法. public class AppBean { private Drawable appIcon; private String appName; private

Linux新手的最佳包管理器

一个 Linux 新用户应该知道他或她的进步源自于对 Linux 发行版的使用,而 Linux 发行版有好几种,并以不同的方式管理软件包. 在 Linux开发 中,包管理器非常重要,知道如何使用多种包管理器可以让你像一个高手一样活得很舒适,从在仓库下载软件.安装软件,到更新软件.处理依赖和删除软件是非常重要的,这也是Linux 系统管理的一个重要部分. 成为一个 Linux 高手的一个标志是了解主要的 Linux 发行版如何处理包,在这篇文章中,我们应该看一些你在 Linux 上能找到的最佳的包

程序包管理器(上)

一个编译好的二进制程序应用文件的组成部分有二进制文件.库文件.配置文件.帮助文件,用户在安装时设置繁琐,而且在用户升级.卸载等操作时更为麻烦.为了提升使用效率及自动简化操作,这就迫在眉睫的需要有一款程序包管理器.. 程序包管理器的主要功能它到底有哪些呢?它的主要功能是将编译好的应用程序的各组成文件打包一个或多个程序包文件,从而方便快捷地实现程序包的安装.卸载.查询.升级和校验等管理操作.而现在主要有四种主流的程序包管理器:(1)Debian开发的程序包管理器,程序包管理器叫做dpt程序包管理器,

NET Core 静态文件及JS包管理器(npm, Bower)的使用

NET Core 静态文件及JS包管理器(npm, Bower)的使用 文章目录 在 ASP.NET Core 中添加静态文件 使用npm管理JavaScript包 使用Bower管理JavaScript包 在 ASP.NET Core 中添加静态文件 虽然ASP.NET主要大都做着后端的事情,但前端的一些静态文件也是很重要的.在ASP.NET Core中要启用静态文件,需要Microsoft.AspNetCore.StaticFiles组件.可以通过Nuget添加,或者在project.jso

bower程序包管理器与npm的对比及handlebars包的使用实例

1.bower: 专门为前端表现设计的程序包管理器,类似npm,主要用于前端优化.bower可以管理包含HTML,CSS,JavaScript,字体甚至是图像文件的组成部分.bower并没有做别的事 - 它仅仅安装你需要的包及其依赖的正确版本. 2.**依赖node环境,window用户必须安装git工具.安装和升级bower必须用npm. 3.npm 和bower 的最大区别,就是 npm 支持嵌套地依赖管理(),而 bower只能支持扁平的依赖(嵌套的依赖,由程序员自己解决). **npm与

扒一扒前端包管理器

好久没有写文章了,前端时间一直瞎忙,最近总算有空闲时间可以好好学习下了,今天和大家分享一下有关前端包管理器的东西,主要把工作中常用的bower与最近一直在研究的browserify.duo以及快过时的component进行了一下介绍与对比,都是干货,希望大家勿喷.啦啦啦,话不多说,开始吧: 一.Bower Bower 是 twitter 推出的一款包管理工具,基于nodejs的模块化思想,把功能分散到各个模块中,让模块和模块之间存在联系,通过 Bower 来管理模块间的这种联系,其主要作用就是:

YUM前端程序包管理器

一.概述: 1.常见程序包前端管理器: yum:Yellow dog Updater, Modified简写,由Duke University团队,修改Yellow Dog Linux的Yellow Dog Updater开发而成,是一个基于 RPM 包管理的字符前端软件包管理器. apt:Advanced Packaging Tools简写,是Debian及其衍生发行版,基于dpkg包管理器的前端工具. 2.yum特点: 1).可自动解决程序安装或卸载时的依赖性关系问题: 2).可以同时配置多

程序包管理的前端工具yum、程序包管理器编译安装、sed命令

下面介绍的是程序包管理的前端工具yum.程序包管理器编译安装.sed命令. 一.Linux程序包管理:程序包管理的[前端工具] 1.yum软件包仓库简介 CentOS系的管理工具有yum和dnf.yum是一款发行版的Linux,其使用的默认程序包管理工具为rpm. URL是yum定位软件包仓库和仓库中程序文件的主要标识方式,表示如下: 例如:schema://[[email protected]]hostname/PATH/TO/DOCUMENT[paramers][methord] (例子中的