http://blog.fens.me/nodejs-bower-intro/
前言
一个新的web项目开始,我们总是很自然地去下载需要用到的js类库文件,比如jQuery,去官网下载名为jquery-1.10.2.min.js文件,放到我们的项目里。当项目又需要bootstrap的时候,我们会重复刚才的工作,去bootstrap官网下载对应的类库。如果bootstrap所依赖的jQuery并不是1.10.2,而是2.0.3时,我们会再重新下载一个对应版本的jQuery替换原来的。
包管理是个复杂的问题,我们要知道谁依赖谁,还要明确哪个版本依赖哪个版本。这些对于开发人员来说,负担过重了。bower作为一个js依赖管理的工具,提供一种理想包管理方式,借助了npm的一些思想,为我们提供一个舒服的开发环境。
你要还不动起手来试试bower,那你一定不会知道,前端开发是件多么享受的事。
目录
- bower介绍
- bower安装
- bower命令
- bower使用
- 用bower提交自己类库
1. bower介绍
Bower 是 twitter 推出的一款包管理工具,基于nodejs的模块化思想,把功能分散到各个模块中,让模块和模块之间存在联系,通过 Bower 来管理模块间的这种联系。
包管理工具一般有以下的功能:
- 注册机制:每个包需要确定一个唯一的 ID 使得搜索和下载的时候能够正确匹配,所以包管理工具需要维护注册信息,可以依赖其他平台。
- 文件存储:确定文件存放的位置,下载的时候可以找到,当然这个地址在网络上是可访问的。
- 上传下载:这是工具的主要功能,能提高包使用的便利性。比如想用 jquery 只需要 install 一下就可以了,不用到处找下载。上传并不是必备的,根据文件存储的位置而定,但需要有一定的机制保障。
- 依赖分析:这也是包管理工具主要解决的问题之一,既然包之间是有联系的,那么下载的时候就需要处理他们之间的依赖。下载一个包的时候也需要下载依赖的包。
功能介绍,摘自文章:http://chuo.me/2013/02/twitter-bower.html
2. bower安装
bower插件是通过npm, Node.js包管理器安装和管理的.
我的系统环境
- win7 64bit
- Nodejs:v0.10.5
- Npm:1.2.19
~ D:\workspace\javascript>node -v
v0.10.5
~ D:\workspace\javascript>npm -v
1.2.19
在系统中,我们已经安装好了Nodejs和npm。win7安装nodejs请参考文章:Nodejs开发框架Express3.0开发手记–从零开始
安装bower
全局安装bower
~ D:\workspace\javascript>npm install bower -g
新建一个express3的项目nodejs-bower
~ D:\workspace\javascript>express -e nodejs-bower
~ D:\workspace\javascript>cd nodejs-bower && npm install
3. bower命令
bower安装后,我们就可以用bower这个命令了。
~ D:\workspace\javascript\nodejs-bower>bower
Usage:
bower [] []
Commands:
cache Manage bower cache
help Display help information about Bower
home Opens a package homepage into your favorite browser
info Info of a particular package
init Interactively create a bower.json file
install Install a package locally
link Symlink a package folder
list List local packages
lookup Look up a package URL by name
prune Removes local extraneous packages
register Register a package
search Search for a package by name
update Update a local package
uninstall Remove a local package
Options:
-f, --force Makes various commands more forceful
-j, --json Output consumable JSON
-l, --log-level What level of logs to report
-o, --offline Do not hit the network
-q, --quiet Only output important information
-s, --silent Do not output anything, besides errors
-V, --verbose Makes output more verbose
--allow-root Allows running commands as root
See 'bower help ' for more information on a specific command.
Commands,列出了bower支持的各种命令。
- cache:bower缓存管理
- help:显示Bower命令的帮助信息
- home:通过浏览器打开一个包的github发布页
- info:查看包的信息
- init:创建bower.json文件
- install:安装包到项目
- link:在本地bower库建立一个项目链接
- list:列出项目已安装的包
- lookup:根据包名查询包的URL
- prune:删除项目无关的包
- register:注册一个包
- search:搜索包
- update:更新项目的包
- uninstall:删除项目的包
4. bower使用
1). 安装jQuery到项目nodejs-bower
~ D:\workspace\javascript\nodejs-bower>bower install jquery
bower jquery#* not-cached git://github.com/components/jquery.git#*
bower jquery#* resolve git://github.com/components/jquery.git#*
bower jquery#* download https://github.com/components/jquery/archive/2.0.3.tar.gz
bower jquery#* extract archive.tar.gz
bower jquery#* resolved git://github.com/components/jquery.git#2.0.3
bower jquery#~2.0.3 install jquery#2.0.3
jquery#2.0.3 bower_components\jquery
通过执行命令,我们可以看到jQuery的最新版本被下载,并安装到项目的bower_components\jquery目录
查看bower_components/jquery目录,发现了3个文件。
~ D:\workspace\javascript\nodejs-bower>ls bower_components/jquery -a
. .. .bower.json component.json jquery.js
同样地,我们的项目还需要d3的类库
~ D:\workspace\javascript\nodejs-bower>bower install d3
bower d3#* not-cached git://github.com/mbostock/d3.git#*
bower d3#* resolve git://github.com/mbostock/d3.git#*
bower d3#* download https://github.com/mbostock/d3/archive/v3.2.8.tar.gz
bower d3#* extract archive.tar.gz
bower d3#* resolved git://github.com/mbostock/d3.git#3.2.8
bower d3#~3.2.8 install d3#3.2.8
d3#3.2.8 bower_components\d3
非常方便,下载并安装完成!
2). 查看项目中已导入的类库
~ D:\workspace\javascript\nodejs-bower>bower list
bower check-new Checking for new versions of the project dependencies..
nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower
├── d3#3.2.8
└── jquery#2.0.3
3). 安装bootstrap库,并查看依赖情况
~ D:\workspace\javascript\nodejs-bower>bower install bootstrap
bower bootstrap#* cached git://github.com/twbs/bootstrap.git#3.0.0-rc1
bower bootstrap#* validate 3.0.0-rc1 against git://github.com/twbs/bootstrap.git#*
bower jquery#>= 1.9.0 cached git://github.com/components/jquery.git#2.0.3
bower jquery#>= 1.9.0 validate 2.0.3 against git://github.com/components/jquery.git#>= 1.9.0
bower bootstrap#~3.0.0-rc1 install bootstrap#3.0.0-rc1
bootstrap#3.0.0-rc1 bower_components\bootstrap
└── jquery#2.0.3
~ D:\workspace\javascript\nodejs-bower>bower list
bower check-new Checking for new versions of the project dependencies..
nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower
├─┬ bootstrap#3.0.0-rc1 extraneous
│ └── jquery#2.0.3
├── d3#3.2.8
└── jquery#2.0.3
我们发现bootstrap,对jquery是有依赖的。
4). 删除jQuery库,破坏依赖关系
~ D:\workspace\javascript\nodejs-bower>bower uninstall jquery
bower conflict bootstrap depends on jquery
Continue anyway? (y/n) y
bower uninstall jquery
~ D:\workspace\javascript\nodejs-bower>bower list
bower check-new Checking for new versions of the project dependencies..
nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower
├─┬ bootstrap#3.0.0-rc1 extraneous
│ └── jquery missing
├── d3#3.2.8
└── jquery missing
5). 安装低版本的jQuery,制造不版本兼容
~ D:\workspace\javascript\nodejs-bower>bower install jquery#1.7.2
bower jquery#~2.0.3 cached git://github.com/components/jquery.git#2.0.3
bower jquery#~2.0.3 validate 2.0.3 against git://github.com/components/jquery.git#~2.0.3
bower jquery#>= 1.9.0 cached git://github.com/components/jquery.git#2.0.3
bower jquery#>= 1.9.0 validate 2.0.3 against git://github.com/components/jquery.git#>= 1.9.0
bower jquery#1.7.2 cached git://github.com/components/jquery.git#1.7.2
bower jquery#1.7.2 validate 1.7.2 against git://github.com/components/jquery.git#1.7.2
Unable to find a suitable version for jquery, please choose one:
1) jquery#1.7.2 which resolved to 1.7.2
2) jquery#~2.0.3 which resolved to 2.0.3 and has nodejs-bower as dependants
3) jquery#>= 1.9.0 which resolved to 2.0.3 and has bootstrap#3.0.0-rc1 as dependants
Prefix the choice with ! to persist it to bower.json
Choice: 1
bower jquery#1.7.2 install jquery#1.7.2
jquery#1.7.2 bower_components\jquery
~ D:\workspace\javascript\nodejs-bower>bower list
bower check-new Checking for new versions of the project dependencies..
nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower
├─┬ bootstrap#3.0.0-rc1 extraneous
│ └── jquery#1.7.2 incompatible with >= 1.9.0 (2.0.3 available)
├── d3#3.2.8
└── jquery#1.7.2 incompatible with ~2.0.3 (2.0.3 available)
我们可以清楚的看到bower,很明确的告诉了我们,jquery和bootstrap是不兼容的,强大之处大家应该有所体会。
6).升级jQuery,让版本兼容
~ D:\workspace\javascript\nodejs-bower>bower update jquery
bower jquery#~2.0.3 cached git://github.com/components/jquery.git#2.0.3
bower jquery#~2.0.3 validate 2.0.3 against git://github.com/components/jquery.git#~2.0.3
bower jquery#>= 1.9.0 cached git://github.com/components/jquery.git#2.0.3
bower jquery#>= 1.9.0 validate 2.0.3 against git://github.com/components/jquery.git#>= 1.9.0
bower jquery#~2.0.3 install jquery#2.0.3
jquery#2.0.3 bower_components\jquery
~ D:\workspace\javascript\nodejs-bower>bower list
bower check-new Checking for new versions of the project dependencies..
nodejs-bower#0.0.0 D:\workspace\javascript\nodejs-bower
├─┬ bootstrap#3.0.0-rc1 extraneous
│ └── jquery#2.0.3
├── d3#3.2.8
└── jquery#2.0.3
多么智能,一键搞定,这才是高效的开发。
7). 查看本地bower已经缓存的类库
~ D:\workspace\javascript\nodejs-bower>bower cache list
bootstrap=git://github.com/twbs/bootstrap.git#3.0.0-rc1
d3=git://github.com/mbostock/d3.git#3.2.8
jquery=git://github.com/components/jquery.git#1.7.2
jquery=git://github.com/components/jquery.git#2.0.3
8). 查看D3库信息
~ D:\workspace\javascript\nodejs-bower>bower info d3
d3
Versions:
- 3.2.8
- 3.2.7
- 3.2.6
- 3.2.5
- 3.2.4
- 3.2.3
...
9). 查看dojo库的url
~ D:\workspace\javascript\nodejs-bower>bower lookup dojo
dojo git://github.com/dojo/dojo.git
10). 用浏览器打开dojo的发布主页
~ D:\workspace\javascript\nodejs-bower>bower home dojo
bower dojo#* not-cached git://github.com/dojo/dojo.git#*
bower dojo#* resolve git://github.com/dojo/dojo.git#*
bower dojo#* download https://github.com/dojo/dojo/archive/1.9.1.tar.gz
bower dojo#* extract archive.tar.gz
bower dojo#* resolved git://github.com/dojo/dojo.git#1.9.1
浏览器自动打开:https://github.com/dojo/dojo
11). 查询包含dojo的类库
~ D:\workspace\javascript\nodejs-bower>bower search dojo
Search results:
dojo git://github.com/dojo/dojo.git
dojox git://github.com/dojo/dojox.git
dojo-util git://github.com/dojo/util.git
dojo-bootstrap git://github.com/samvdb/Dojo-Bootstrap
真是方便实用的技术。
5. 用bower提交自己类库
1). 生成bower.json配置文件
~ D:\workspace\javascript\nodejs-bower>bower init
bower existing The existing bower.json file will be used and filled in
[?] name: nodejs-bower
[?] version: 0.0.0
[?] main file:
[?] set currently installed components as dependencies? No
[?] add commonly ignored files to ignore list? Yes
查看生成的文件bower.json
{
"name": "nodejs-bower",
"version": "0.0.0",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"d3": "git://github.com/mbostock/d3.git#~3.2.8",
"jquery": "git://github.com/components/jquery.git#~2.0.3"
}
}
2). 在github创建一个资源库:nodejs-bower
3). 本地工程绑定github
~ D:\workspace\javascript\nodejs-bower>git init
Initialized empty Git repository in D:/workspace/javascript/nodejs-bower/.git/
~ D:\workspace\javascript\nodejs-bower>git add .
~ D:\workspace\javascript\nodejs-bower>git commit -m "first commit"
# On branch master
#
# Initial commit
#
# Untracked files:
# (use "git add ..." to include in what will be committed)
#
# app.js
# bower.json
# bower_components/
# node_modules/
# package.json
# public/
# routes/
# views/
nothing added to commit but untracked files present (use "git add" to track)
~ D:\workspace\javascript\nodejs-bower>git remote add origin https://github.com/bsspirit/nodejs-bower
~ D:\workspace\javascript\nodejs-bower>git push -u origin master
Counting objects: 565, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (516/516), done.
Writing objects: 100% (565/565), 803.08 KiB, done.
Total 565 (delta 26), reused 0 (delta 0)
To https://github.com/bsspirit/nodejs-bower
* [new branch] master -> master
Branch master set up to track remote branch master from origin.
4). 注册到bower官方类库
~ D:\workspace\javascript\nodejs-bower>bower register nodejs-bower git@github.com:bsspirit/nodejs-bower.git
bower convert Converted git@github.com:bsspirit/nodejs-bower.git to git://github.com/bsspirit/n
odejs-bower.git
bower nodejs-bower#* resolve git://github.com/bsspirit/nodejs-bower.git#*
bower nodejs-bower#* checkout master
bower nodejs-bower#* resolved git://github.com/bsspirit/nodejs-bower.git#af3ceaac07
Registering a package will make it visible and installable via the registry (https://bower.herokuapp.com), continue? (y/
n) y
bower nodejs-bower register git://github.com/bsspirit/nodejs-bower.git
Package nodejs-bower registered successfully!
All valid semver tags on git://github.com/bsspirit/nodejs-bower.git will be available as versions.
To publish a new version, you just need release a valid semver tag.
Run bower info nodejs-bower to list the package versions.
5). 查询我们自己的包
D:\workspace\javascript\nodejs-bower>bower search nodejs-bower
Search results:
nodejs-bower git://github.com/bsspirit/nodejs-bower.git
6). 安装我们自己的包
D:\workspace\javascript\nodejs-bower>bower install nodejs-bower
bower nodejs-bower#* cached git://github.com/bsspirit/nodejs-bower.git#af3ceaac07
bower nodejs-bower#* validate af3ceaac07 against git://github.com/bsspirit/nodejs-bower.git#*
bower nodejs-bower#* install nodejs-bower#af3ceaac07
nodejs-bower#af3ceaac07 bower_components\nodejs-bower
├── d3#3.2.8
└── jquery#2.0.3
其实模块化,版本依赖,开发类库,发布类库,安装类库,都是一条命令!还能再简单一点么!快把项目模块化,然后分享给大家吧!!未来是属于开发者的。
相关推荐
该工具主要用来帮助用户轻松安装CSS、JavaScript、图像等相关包,并管理这些包之间的依赖。功能有些类似于Component。不同之处是,Component是围绕GitHub系统构建的,而Bower既可以管理基于本地资源的包,也可以管理...
composer-asset-plugin, Composer的npm/Bower 依赖管理器 Composer的 npm/Bower 依赖管理器 Composer 资产插件允许你在不安装NPM或者 Bower的情况下管理 composer.json 中的项目资产( css,js,等等 ) 。这个插件...
该模块提供了一种方便的方法来管理Zend Framework 2应用程序中加载JavaScript依赖项。 如果您的Zend Framework 2应用程序具有复杂的前端并且具有许多外部JavaScript依赖项,那么可能是您的救星。 但是,当同时使用...
bower作为一个js依赖管理的工具,提供一种理想包管理方式,借助了npm的一些思想,为我们提供一个舒服的开发环境。
以交互方式(或不)更新bower.json依赖项的版本 入门 这个插件需要 Grunt ~0.4.0 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程后,您可以使用以下命令...
Laravel 凉亭组件自动加载通过 Bower 安装的所有前端依赖项(即 js/css 资产)。 组件将自动排序,以便组件所需的依赖项在它们之前加载。安装需要 Composer 这个包: composer require kosiec/laravel-bower更新 ...
YarnFacebook 贡献 Javascript 包管理器。特性:离线模式:如果您之前下载了软件包,则可以在没有任何互联网连接的情况下安装。确定性:无论安装顺序如何,相同的依赖关系将以相同的方式安装在计算机上。网络性能:...
这是一个很好的示例,说明如何一起使用npm,bower,grunt来管理html页面的所有javascript和css依赖项。 =======用法示例: 步骤1:运行npm install到instll npm软件包。 步骤2:运行bower install安装Bower软件包...
Composer Asset Plugin允许您在composer.json管理项目资产(css,js等),而无需安装NPM或Bower。 该插件通过将软件包信息从NPM或Bower转换为Composer的兼容版本来工作。 这使您可以非常轻松地在基于PHP的项目中...
Bower为前端软件包管理问题提供了一种通用的,不受质疑的解决方案,同时通过API公开了软件包依赖关系模型,该API可以被更自以为是的构建堆栈使用。 没有系统范围的依赖关系,没有依赖关系在不同应用之间共享,并且...
gulp-web-dependencies 解析HTML / JS文件,并将bower / npm依赖项复制到目标目录安装npm install --save-dev gulp-web-dependencies 用法项目结构: project/├── bower_components│ ├── bootstrap│ │ ...
.bowerrc: 前端模块采用 bower 进行管理,并使用 bower-requirejs 组件,方便组件更新后自动将依赖加入 /js/main.js delete.js: Laravel 删除功能的自动化前端实现,配合 resource controller 使用,只需为删除的...
Bower可以管理包含HTML,CSS,JavaScript,字体甚至图像文件的组件。 没有串联,最小化的代码或其他任何东西-它只是安装您需要的软件包及其依赖项的正确版本。 然后,如何使用软件包将完全取决于您。 Bower在Git之...
每当添加新的Bower依赖项时,都应将哪个文件复制到哪里,并将其复制到Gruntfile "bowercopy"配置中。 然后,运行grunt bowercopy 。 默认情况下,bowercopy将为您运行bower install (使用runbower选项将其关闭)。...
使用 Bower、Gulp 和 Scss 进行前端依赖管理 此示例用于使用当今流行的一些工具管理前端依赖项。 前端的依赖管理第一次让人头疼。 我以为有人可以从他们的头上节省一些头发;)
它为前端程序包管理问题提供了一种通用的,不受质疑的解决方案,同时通过API公开了程序包依赖关系模型,该API可以被更自以为是的构建堆栈使用。 没有系统范围的依赖关系,没有依赖关系在不同应用之间共享,并且依赖...
上传关怀小工具 是用于文件上传、云存储和动态图像转换的 IaaS。 这个包包含 HTML5 小部件和 JavaScript API: 文件 Uploadcare 库,需要 jQuery 作为依赖项: 上传关怀.js ...script src="/bower_compon
合并凉亭将两个凉亭文件合并在一起
r.js + yeoman + bower 依赖示例什么? 以下存储库提供了正确混合以下内容的示例: require.js 优化器“r.js” yeoman 应用程序结构和标准grunt build用法凉亭依赖什么? 主要有两点: 使用grunt serve使开发变得...
凉亭验证安装前的 bower 依赖版本