前端包管理器bower的使用

随着前端项目越来越复杂,随便引入几个第三方javascript脚本库貌似已经习以为常,但是随着越来越多的包被引入,开发人员维护起来也是一件相当头疼的事,比如第三方库的版本更新,安装,卸载等.


twitter推出了一个前端包管理器 bower 帮我们解决了这些头疼的事情.


bower 完全借鉴了npm构思和实现原理,所以后面你会看到它的使用几乎和npm是一模一样.


当然,bower 是运行在node.js 基础上,所以你的当前环境确保已经安装 node.js .


bower 的基础功能是什么?
1.注册模块

每个包需要确定一个唯一的 ID 使得搜索和下载的时候能够正确匹配


2.文件存储

把文件存储在一个有效的网络地址上,使用的时候可以直接下载到.


3.上传下载

你可以把你的包注册后上传存储.

使用的时候可以使用一条命令直接下载到当前项目.


4.以来分析

它帮我们解决了包与包直接的依赖关系

当我们下载一个包A的时候,由于它依赖包B,所以bower会自动帮我们下载好包B


如何使用bower ?

npm install bower -g

检查是否安装成功

zhangzhi@moke:~$ bower help

Usage:

    bower <command> [<args>] [<options>]
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 - and possible updates
    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 <command>' for more information on a specific command.

┌───────────────────────────────────────────┐
│ Update available: 1.4.1 (current: 1.3.12) │
│ Run npm update -g bower to update.        │
└───────────────────────────────────────────┘

上面信息说明我们安装成功,我当前的版本 1.3.12  已经比较低,提示我使用命令更新 bower

npm update -g bower

这样就可以轻松更新bower 到最新版


上面help 信息列出 bower 提供的命令

cache:bower缓存管理
help:显示Bower命令的帮助信息
home:通过浏览器打开一个包的github发布页
info:查看包的信息
init:创建bower.json文件
install:安装包到项目
link:在本地bower库建立一个项目链接
list:列出项目已安装的包
lookup:根据包名查询包的URL
prune:删除项目无关的包
register:注册一个包
search:搜索包
update:更新项目的包
uninstall:删除项目的包


现在我们使用 bower init 来创建一个bower.json 的配置文件,我找到自己的一个测试项目来演示

zhangzhi@moke:~/code/test/static$ bower init
? name: test
? version: 0.1.1
? description:
? main file: main.js
? what types of modules does this package expose? (Press <space>? what types of modules does this package expose?
? keywords:
? authors: zhangzhi <zzhi.net@gmail.com>
? license: MIT
? homepage:
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents ? would you like to mark this package as private which prevents it from being accidentally published to the registry? No

{
  name: 'test',
  version: '0.1.1',
  authors: [
    'zhangzhi <zzhi.net@gmail.com>'
  ],
  main: 'main.js',
  license: 'MIT',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'app/bower_components',
    'test',
    'tests'
  ]
}

? Looks good? Yes


然后我们查看 static 目录可以看到有了一个配置文件  bower.json ,里面的内容就是上面的.


这时我们来下载一个jquery 文件,并且指定一个版本

zhangzhi@moke:~/code/test/static$ bower install jquery#1.7.2 --save
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

我下载了一个 jquery 1.7.2 的版本,可以看到我本地有缓存,所以非常快的下载下来. 

# 符号后面就是可以指定一个下载的版本

--save 就是把下载的包信息写入到配置文件的依赖项里.和npm 一模一样.我们看下 bower.json 文件

{
  "name": "test",
  "version": "0.1.1",
  "authors": [
    "zhangzhi <zzhi.net@gmail.com>"
  ],
  "main": "main.js",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "app/bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "1.7.2"
  }
}


ok, jquery 1.7.2 已经写入配置文件.


现在我们通过 info 命令查看一下 jquery 的信息

zhangzhi@moke:~/code/test/static$ bower info jquery
bower cached        git://github.com/jquery/jquery.git#2.1.0
bower validate      2.1.0 against git://github.com/jquery/jquery.git#*
bower new           version for git://github.com/jquery/jquery.git#*
bower resolve       git://github.com/jquery/jquery.git#*
bower download      https://github.com/jquery/jquery/archive/2.1.3.tar.gz
bower progress      jquery#* received 0.6MB of 0.6MB downloaded, 88%
bower extract       jquery#* archive.tar.gz
bower resolved      git://github.com/jquery/jquery.git#2.1.3

{
  name: 'jquery',
  version: '2.1.3',
  main: 'dist/jquery.js',
  license: 'MIT',
  ignore: [
    '**/.*',
    'build',
    'speed',
    'test',
    '*.md',
    'AUTHORS.txt',
    'Gruntfile.js',
    'package.json'
  ],
  devDependencies: {
    sizzle: '2.1.1-jquery.2.1.2',
    requirejs: '2.1.10',
    qunit: '1.14.0',
    sinon: '1.8.1'
  },
  keywords: [
    'jquery',
    'javascript',
    'library'
  ],
  homepage: 'https://github.com/jquery/jquery'
}

Available versions:
  - 2.1.3
  - 2.1.2
  - 2.1.1
  - 2.1.1-rc2
  - 2.1.1-rc1
  - 2.1.1-beta1
  - 2.1.0
  - 2.1.0-rc1
  - 2.1.0-beta3
  - 2.1.0-beta2
  - 2.1.0-beta1
  - 2.0.3
  - 2.0.2
  - 2.0.1
  - 2.0.0
  - 2.0.0-beta3
  - 1.11.2
  - 1.11.1
  - 1.11.1-rc2
  - 1.11.1-rc1
  - 1.11.1-beta1
  - 1.11.0
  - 1.11.0-rc1
  - 1.11.0-beta3
  - 1.11.0-beta2
  - 1.11.0-beta1
  - 1.10.2
  - 1.10.1
  - 1.10.0
  - 1.10.0-beta1
  - 1.9.1
  - 1.9.0
  - 1.8.3+1
  - 1.8.3
  - 1.8.2
  - 1.8.1
  - 1.8.0
  - 1.7.2
  - 1.7.1
  - 1.7.0
  - 1.6.4
  - 1.6.3
  - 1.6.2
  - 1.6.1
  - 1.6.0
  - 1.5.2
  - 1.5.1
  - 1.5.0
  - 1.4.4
  - 1.4.3
  - 1.4.2
  - 1.4.1
  - 1.4.0
  - 1.3.2
  - 1.3.1
  - 1.3.0
  - 1.2.6
  - 1.2.5
  - 1.2.4
  - 1.2.3
  - 1.2.2
  - 1.2.1
  - 1.1.4
  - 1.1.3
  - 1.1.2
  - 1.1.1
  - 1.0.4
  - 1.0.3
  - 1.0.2
  - 1.0.1
You can request info for a specific version with 'bower info jquery#<version>'

它列出了 jquery 相关的所有信息


通过 bower list 查看依赖关系

zhangzhi@moke:~/code/test/static$ bower list
bower check-new     Checking for new versions of the project dependencies..
test#0.1.1 /Users/zhangzhi/code/test/static
└── jquery#1.7.2 extraneous (latest is 2.1.3)


回到顶部