bower解决js的依赖管理
NOTE:本文将介绍如何利用JavaScript作为服务端脚本,通过NodeJs框架进行web开发。NodeJs框架是基于V8引擎。google chrome浏览器就是基于V8作为内核,同时打开多个网页都是很流畅的。
NodeJs标准的web开发框架Express,可以帮助我们迅速建立web站点,比起PHP的开发效率更高,而且学习曲线更低。非常适合小型网站,个性化的网站,而且学习资源丰富,容易上手。
前言
===
一个新的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是twitter推出的一款包管理工具,基于nodejs的模块化思想,把功能分散到各个模块中,让模块和模块之间存在联系,通过Bower 来管理模块之间的这种联系。
包管理工具一般有以下的功能:
-
注册机制: 每个包需要确定一个唯一的 ID 使得搜索和下载的时候能够正确匹配,所以包管理工具需要维护注册信息,可以依赖其他平台.
-
文件存储:确定文件存放的位置,下载的时候可以找到,当然这个地址在网络上是可访问的。
- 上传下载:这是工具的主要功能,能提高包使用的便利性。比如想用 jquery 只需要 install 一下就可以了,不用到处找下载。上传并不是必备的,根据文件存储的位置而定,但需要有一定的机制保障。
- 依赖分析:这也是包管理工具主要解决的问题之一,既然包之间是有联系的,那么下载的时候就需要处理他们之间的依赖。下载一个包的时候也需要下载依赖的包。 ***
bower 安装
Bower插件是通过npm,NodeJs包管理器安装和管理的。
~ /home/JonWang/javascript> node -v v0.10.28 ~ /home/JonWang/javascript> npm -v v1.4.9
在系统中,我们已经安装好了Nodejs和npm。
###安装bower 全局安装bower
~ /home/JonWang/javascript> npm install bower -g
新建一个express3的项目 nodejs-bower
~ /home/JonWang/javascript> express -e nodejs-bower ~ /home/JonWang/javascript> cd nodejs-bower && npm install
bower 命令
Bower安装以后,我们可以使用bower这个命令了。
~ /home/JonWang/javascript> bower Usage: bower[ ] [ ] Commands: cache Manage bower cache help Display help information about Bower home Opens a package homepage into your favorite bro 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 version Bump a package version 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 --version Output Bower version See 'bower help ' for more information on a specific command. </pre> Commands,列出了bower支持的各种命令。 * cache:bower缓存管理 * help:显示Bower命令的帮助信息 * home:通过浏览器打开一个包的github发布页 * info:查看包的信息 * init:创建bower.json文件 * install:安装包到项目 * link:在本地bower库建立一个项目链接 * list:列出项目已安装的包 * lookup:根据包名查询包的URL * prune:删除项目无关的包 * register:注册一个包 * search:搜索包 * update:更新项目的包 * uninstall:删除项目的包 *** bower 使用
###安装JQuery到项目nodejs-bower~ /home/JonWang/javascript/nodejs-bower > bower install jquery bower not-cached git://github.com/jquery/jquery.git#* bower resolve git://github.com/jquery/jquery.git#* bower download https://github.com/jquery/jquery/archive/2.1.1.tar.gz bower progress jquery#* received 0.3MB of 0.6MB downloaded, 51% bower progress jquery#* received 0.3MB of 0.6MB downloaded, 55% bower progress jquery#* received 0.4MB of 0.6MB downloaded, 61% bower progress jquery#* received 0.4MB of 0.6MB downloaded, 67% bower progress jquery#* received 0.5MB of 0.6MB downloaded, 72% bower progress jquery#* received 0.5MB of 0.6MB downloaded, 75% bower progress jquery#* received 0.5MB of 0.6MB downloaded, 80% bower progress jquery#* received 0.5MB of 0.6MB downloaded, 82% bower progress jquery#* received 0.5MB of 0.6MB downloaded, 86% bower progress jquery#* received 0.6MB of 0.6MB downloaded, 89% bower progress jquery#* received 0.6MB of 0.6MB downloaded, 91% bower progress jquery#* received 0.6MB of 0.6MB downloaded, 95% bower progress jquery#* received 0.6MB of 0.6MB downloaded, 98% bower progress jquery#* received 0.6MB of 0.6MB downloaded, 100% bower extract jquery#* archive.tar.gz bower resolved git://github.com/jquery/jquery.git#2.1.1 bower install jquery#2.1.1 jquery#2.1.1 bower_components\jquery通过执行命令,我们可以看到Jquery的最新版本被下载,并安装到项目的bower_components\jquery目录中 查看bower_components/jquery目录~ /home/JonWang/javascript/nodejs-bower > ls bower_components\jquery -a . .. .bower.json MIT-LICENSE.txt bower.json dist src同样地,我们的项目还需要D3类库~ /home/JonWang/javascript/nodejs-bower > bower install d3 bower not-cached git://github.com/mbostock/d3.git#* bower resolve git://github.com/mbostock/d3.git#* bower download https://github.com/mbostock/d3/archive/v3.4.11.tar.gz bower progress d3#* received 0.4MB of 2.9MB downloaded, 15% ... bower progress d3#* received 2.8MB of 2.9MB downloaded, 98% bower progress d3#* received 2.9MB of 2.9MB downloaded, 100% bower extract d3#* archive.tar.gz bower resolved git://github.com/mbostock/d3.git#3.4.11 bower install d3#3.4.11 d3#3.4.11 bower_components\d3下载并安装成功。 ###安装bootstrap库,并查看依赖情况~ /home/JonWang/javascript/nodejs-bower > bower install bootstrap bower not-cached git://github.com/twbs/bootstrap.git#* bower resolve git://github.com/twbs/bootstrap.git#* bower download https://github.com/twbs/bootstrap/archive/v3.2.0.tar.gz bower progress bootstrap#* received 0.3MB of 2.4MB downloaded, 14% ... bower progress bootstrap#* received 2.4MB of 2.4MB downloaded, 100% bower extract bootstrap#* archive.tar.gz bower resolved git://github.com/twbs/bootstrap.git#3.2.0 bower install bootstrap#3.2.0 bootstrap#3.2.0 bower_components\bootstrap └── jquery#2.1.1 ~ /home/JonWang/javascript/nodejs-bower > bower list bower check-new Checking for new versions of the project dependencies.. nodejs-bower F:\learn-nodejs\nodejs-bower ├─┬ bootstrap#3.2.0 extraneous │ └── jquery#2.1.1 ├── d3#3.4.11 extraneous └── jquery#2.1.1 extraneous我们发现bootstrap对jquery是有依赖的 ###删除jquery库,破坏依赖关系~ /home/JonWang/javascript/nodejs-bower > bower uninstall jquery bower conflict bootstrap depends on jquery [?] Continue anyway? (Y/n) y [?] Continue anyway? Yes bower uninstall jquery ~ /home/JonWang/javascript/nodejs-bower > bower list bower check-new Checking for new versions of the project dependencies.. nodejs-bower F:\learn-nodejs\nodejs-bower ├─┬ bootstrap#3.2.0 extraneous │ └── jquery not installed └── d3#3.4.11 extraneous###安装低版本的jquery,制造版本不兼容现象~ /home/JonWang/javascript/nodejs-bower > bower install jquery#1.7.2 bower not-cached git://github.com/jquery/jquery.git#1.7.2 bower resolve git://github.com/jquery/jquery.git#1.7.2 bower cached git://github.com/jquery/jquery.git#2.1.1 bower validate 2.1.1 against git://github.com/jquery/jquery.git#>= 1.9.0 bower download https://github.com/jquery/jquery/archive/1.7.2.tar.gz bower progress jquery#1.7.2 received 0.2MB of 0.4MB downloaded, 37% bower progress jquery#1.7.2 received 0.4MB of 0.4MB downloaded, 91% bower extract jquery#1.7.2 archive.tar.gz bower invalid-meta jquery is missing "ignore" entry in bower.json bower resolved git://github.com/jquery/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#>= 1.9.0 which resolved to 2.1.1 and is required by bootstrap#3.2. 0 Prefix the choice with ! to persist it to bower.json [?] Answer: 1 bower install jquery#1.7.2 jquery#1.7.2 bower_components\jquery ~ /home/JonWang/javascript/nodejs-bower > bower list nodejs-bower F:\learn-nodejs\nodejs-bower ├─┬ bootstrap#3.2.0 extraneous │ └── jquery#1.7.2 incompatible with >= 1.9.0 (2.1.1 available) ├── d3#3.4.11 extraneous └── jquery#1.7.2 extraneous (latest is 2.1.1)我们可以清楚的看到bower,很明确地告诉了我们,jquery和bootstrap是不兼容的,bower很强大很智能! ###升级Jquery,让版本兼容~ /home/JonWang/javascript/nodejs-bower > bower update jquery bower cached git://github.com/jquery/jquery.git#2.1.1 bower validate 2.1.1 against git://github.com/jquery/jquery.git#>= 1.9.0 bower cached git://github.com/jquery/jquery.git#1.7.2 bower validate 1.7.2 against git://github.com/jquery/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 and is required by nodejs-bower 2) jquery#>= 1.9.0 which resolved to 2.1.1 and is required by bootstrap#3.2. 0 Prefix the choice with ! to persist it to bower.json [?] Answer: 2 [?] Answer: 2 bower install jquery#2.1.1 jquery#2.1.1 bower_components\jquery ~ /home/JonWang/javascript/nodejs-bower > bower list bower check-new Checking for new versions of the project dependencies.. nodejs-bower F:\learn-nodejs\nodejs-bower ├─┬ bootstrap#3.2.0 extraneous │ └── jquery#2.1.1 └── d3#3.4.11 extraneous非常智能,已经让管理变得非常灵活! ###查看本地bower已经缓存的类库~ /home/JonWang/javascript/nodejs-bower > bower cache list bootstrap=git://github.com/twbs/bootstrap.git#3.2.0 d3=git://github.com/mbostock/d3.git#3.4.11 jquery=git://github.com/jquery/jquery.git#1.7.2 jquery=git://github.com/jquery/jquery.git#2.1.1###查看D3库信息~ /home/JonWang/javascript/nodejs-bower > bower info d3 bower cached git://github.com/mbostock/d3.git#3.4.11 bower validate 3.4.11 against git://github.com/mbostock/d3.git#* { name: 'd3', version: '3.4.11', main: 'd3.js', scripts: [ 'd3.js' ], ignore: [ '.DS_Store', '.git', '.gitignore', '.npmignore', '.travis.yml', 'Makefile', 'bin', 'component.json', 'index.js', 'lib', 'node_modules', 'package.json', 'src', 'test' ], homepage: 'https://github.com/mbostock/d3' } Available versions: - 3.4.11 - 3.4.10 ... - 1.0.1 - 1.0.0 You can request info for a specific version with 'bower info d3#' </pre> ###查看dojo库url ~ /home/JonWang/javascript/nodejs-bower > bower lookup dojo dojo git://github.com/dojo/dojo.git###用浏览器打开dojo的发布主页~ /home/JonWang/javascript/nodejs-bower > bower home dojo bower not-cached git://github.com/dojo/dojo.git#* bower resolve git://github.com/dojo/dojo.git#* bower download https://github.com/dojo/dojo/archive/1.10.0.tar.gz bower extract dojo#* archive.tar.gz bower invalid-meta dojo is missing "main" entry in bower.json bower invalid-meta dojo is missing "ignore" entry in bower.json bower resolved git://github.com/dojo/dojo.git#1.10.0浏览器会自动打开 [https://github.com/dojo/dojo]("https://github.com/dojo/dojo") ###查询包含dojo的类库~ /home/JonWang/javascript/nodejs-bower > bower search dojo Search results: dojo git://github.com/dojo/dojo.git dijit git://github.com/dojo/dijit.git dojox git://github.com/dojo/dojox.git dojo-util git://github.com/dojo/util.git dojo-underscore git://github.com/spalax/dojo-underscore.git dojo-bootstrap git://github.com/xsokev/Dojo-Bootstrap.git dojo-slideshow git://github.com/spalax/dojo-slideshow.git dojo-html5-router git://github.com/gpbl/dojo-html5-router.git qrcodejs-dojo-widget git://github.com/willgriffin/qrcodejs-dojo-widget.git dojo-onx git://github.com/eduardo-matos/onx.git dui git://github.com/ibm-dojo/dui.git janitor git://github.com/classdojo/janitor.js.git dojo-ckeditor git://github.com/spalax/dojo-ckeditor.git protoclass git://github.com/classdojo/protoclass.js.git br-angular-dojo git://github.com/wiseguy/angular-dojo-esri.git br-angular git://github.com/wiseguy/angular-dojo-esri.git dojoExtension git://github.com/xgzx123/dojoExtension.git---用bower提交自己的类库
###生成bower.json配置文件~ /home/JonWang/javascript/nodejs-bower > bower init [?] name: nodejs-bower [?] version: 0.0.1 [?] description: this is a bower test library [?] main file: [?] what types of modules does this package expose? [?] keywords: [?] authors: JonWang [?] license: MIT [?] homepage: [?] set currently installed components as dependencies? No [?] add commonly ignored files to ignore list? Yes [?] would you like to mark this package as private which prevents it from being [?] would you like to mark this package as private which prevents it from being accidentally published to the registry? No { name: 'nodejs-bower', version: '0.0.1', authors: [ 'JonWang' ], description: 'this is a bower test library', license: 'MIT', ignore: [ '**/.*', 'node_modules', 'bower_components', 'test', 'tests' ] } [?] Looks good? Yes###在github创建一个资源库:nodejs-bower .... ###在本地工程中绑定github~ /home/JonWang/javascript/nodejs-bower > git init .... ~ /home/JonWang/javascript/nodejs-bower > git add . .... ~ /home/JonWang/javascript/nodejs-bower > git commit -m "command" .... ~ /home/JonWang/javascript/nodejs-bower > git remote add origin https://yourgithub address .git .... ~ /home/JonWang/javascript/nodejs-bower > git push -u origin master ....###注册到bower官方类库~ /home/JonWang/javascript/nodejs-bower > bower register package-name yougitaddres ....