03 Sep 2014 Comments

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安装
bower命令
bower使用
用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
....

原创文章，转载请注明：转载自：bower解决js的依赖管理

梦想猪

bower解决js的依赖管理

bower 介绍

bower 安装

bower 命令

bower 使用

用bower提交自己的类库