1.1、什么是bower
是什么 ?:a package manager for the web(JavaScriptHTMLCSS
开发语言:Node.js
官方主页:https://bower.io
源码仓库:https://github.com/bower/bower

bower的实现很大程度上参考了npmbower的用法也与npm几乎一致。

bower官方推荐使用yarn代替bowerbower目前只是在维护状态,不再开发新功能了。

1.2、为什么要使用bower
  • 节省时间
    bower为你节省寻找客户端的依赖关系的时间。在没有bower的年代,每次我需要安装jQuery的时候, 我都需要去jQuery网站下载包或使用CDN版本。但是有了bower, 你只需要输入一个命令,jQuery就会安装在本地计算机上, 你不需要去记版本号之类的东西,你也可以通过bower info命令去查看任意库的信息。 如果您非常熟悉Debain系操作系统中的apt安装包管理器 或Red Hat系操作系统中的yum包管理器,就会非常知道他的好处。
  • 脱机工作
    bower会在用户主目录下创建一个.bower的文件夹,这个文件夹会下载所有的资源、并安装一个软件包使它们可以离线使用。 如果你熟悉Java,bower即是一个类似于现在流行的Maven构建系统的.m2仓库。 每次你下载任何资源库都将被安装在两个文件夹中:一个在应用程序文件夹,另一个在用户主目录下的.bower文件夹。 因此,下一次你需要这个仓库时,就会用那个用户主目录下.bower中的版本。
  • 让升级变得简单
    假设某个库的新版本发布了一个重要的安全修补程序, 为了安装新版本,你只需要运行一个命令,bower会自动更新所有有关新版本的依赖关系。
1.2、通过包管理器安装Bower
包管理器安装命令
npmnpm install -g bower
yarnyarn global add bower
1.4、bower命令

安装完bower之后就可以使用bower命令了。查看bower命令的帮助,如下:

1.4.1、bower help <sub-command>

其实,bower子命令的用法大部分与npm子命令的用法完全一样。下面我们依依来看

1.4.2、bower search

假如你想在你的应用程序中使jQuery框架, 但你不确定包的名字,这时你就可以使用bower search jquery进行查询。

查看bower search的帮助:

示例:

1.4.3、bower info

如果你想看到关于特定的包的信息,可以使用bower info命令来查看该包的所有信息:

查看bower info的帮助:

示例:

bower info jquery

结果如下:

bower jquery#*                  cached git://github.com/jquery/jquery.git#2.1.4
bower jquery#*                validate 2.1.4 against git://github.com/jquery/jquery.git#*

{
  name: 'jquery',
  version: '2.1.4',
  main: 'dist/jquery.js',
  license: 'MIT',
  ignore: [
    '**/.*',
    'build',
    'dist/cdn',
    '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.4
  - 2.1.3
  - 2.1.2
  - 2.1.1
  - 2.1.0
  - 2.0.3
  - 2.0.2
  - 2.0.1
  - 2.0.0
  - 1.11.3
  - 1.11.2
  - 1.11.1
  - 1.11.0
  - 1.10.2
  - 1.10.1
  - 1.10.0
  - 1.9.1
  - 1.9.0
  - 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

Show 19 additional prereleases with ‘bower info jquery --verbose’
You can request info for a specific version with 'bower info jquery#'

上面这是列出了所有包的信息。如果想查看指定版本的包的信息,可以以“package-name#version”的形式获取。

示例:

1.4.4、bower install

安装包。

查看bower install的帮助:

示例:使用bower安装jQuery, 在你想要安装该包的地方创建一个新的文件夹,键入如下命令:

bower install jquery

上述命令完成以后,你会在当前目录下看到一个bower_components的文件夹,其中目录如下:

1.4.5、bower list

用于查看当前目录下或者指定的路径下安装的包的列表。

查看bower list的帮助:

示例:

1.4.6、bower uninstall

卸载安装包。

查看bower uninstall的帮助:

示例:

1.4.7、bower init

创建bower.jsonbower.json文件的使用可以让包的安装更容易, 你可以手动在应用程序的根目录下创建一个名为bower.json的文件,并定义它的依赖关系。 也可以使用bower init命令来自动创建bower.json文件。

查看bower init的帮助:

示例:

现在假设也想用BootStrap, 我们可以用下面的命令安装BootStrap并更新bower.json文件:

bower install bootstrap --save

它会自动安装最新版本的BootStrap并更新bower.json文件:

{
  "name": "Order",
  "authors": [
    "leleliu008 <792793182@qq.com>"
  ],
  "description": "订餐系统",
  "main": "",
  "moduleType": [
    "node"
  ],
  "keywords": [
    "Order"
  ],
  "license": "MIT",
  "homepage": "https://github.com/leleliu008/Order",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "~2.1.4",
    "bootstrap": "~3.3.6"
  }
}