bower的基本使用

2017-05-19 本文已影响639人 lvyweb

标签（空格分隔）： bower

bower是什么？

Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源

bower的优点

节省时间。学习Bower会为你节省寻找客户端的依赖关系的时间。每次需要jQuery的时候，都需要去jQuery网站下载包。但有了Bower，咱们只需要输入一个命令，jquery就会下载到本地计算机上，并且不需要去记版本号之类的东西，可以通过Bower的info命令去查看任意库的信息。

脱机工作。Bower会在用户主目录下创建一个.bower的文件夹，这个文件夹会下载所有的资源、并安装一个软件包使它们可以离线使用。可以创建一个名为bower.json的文件，在这个文件里你可以指定所有客户端的依赖关系，任何时候你需要弄清楚你正在使用哪些库，你可以参考这个文件。

让升级变得简单。假设某个库的新版本发布了一个重要的安全修补程序，为了安装新版本，你只需要运行一个命令，bower会自动更新所有有关新版本的依赖关系。

bower的使用

准备工作

安装bower，需要安装如下文件

node：去node官网下载最新版本的node.js。命令是node -v出现版本号说明安装成功

npm : npm是随同Node.js一起安装的包管理工具（能解决Node.js代码部署上的很多问题），由于新版的Node.js已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入npm -v 来测试是否成功安装。命令如下，出现版本提示表示安装成功。

git : 需要从远程git仓库获取一些代码包

安装和卸载bower

如果你已经安装了上面所说的所有必要文件，键入以下命令安装Bower：
$ npm install -g bower 输入bower -v出现版本号表示安装成功

卸载bower
$ npm install -g bower

使用bower安装和卸载包

Bower是一个软件包管理器，可以在应用程序中用它来安装新的软件包。

举例来看一下，使用Bower安装JQuery，在你想要安装该包的地方创建一个新的文件夹，键入如下命令：
$ bower install jquery
上述命令完成以后，你会在你刚才创建的目录下看到一个bower_components的文件夹。

卸载包
$ bower uninstall jquery

bower.json文件的使用

bower.json文件的使用可以让包的安装更容易，可以在应用程序的根目录下创建一个名为“bower.json”的文件，并定义它的依赖关系。使用bower init命令来创建bower.json文件，一路回车。

{
  "name": "test",
  "authors": [
    "liangyuanyuan <lvyweb@163.com>"
  ],
  "description": "",
  "main": "",
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "^3.2.1",
    "layer": "^3.0.3"
  }
}

注意看，已经加入了jQuery、layer依赖关系。
现在假设也想用twitter bootstrap，我们可以用下面的命令安装twitter bootstrap并更新bower.json文件：
$ bower install bootstrap --save
这个命令会自动安装最新版本的bootstrap并更新bower.json文件：

{
  "name": "test",
  "authors": [
    "liangyuanyuan <lvyweb@163.com>"
  ],
  "description": "",
  "main": "",
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "^3.2.1",
    "layer": "^3.0.3",
    "bootstrap": "^3.3.7"
  }
}

自定义包的安装目录

自定义bower包的安装目录

首先进入项目目录下，新建文件1.txt

然后命令行进入项目目录下，输入命令重命名该文件为.bowerrc
$ rename 1.txt .bowerrc

这个.bowerrc文件是自定义bower下载的代码包的目录，比如现在我的项目结构如下图：

目录结构图

那我的.bowerrc文件内容如下

{
  "directory" : "js/lib"
}

其他命令

命令	说明
`bower help`	键入help 命令来查看bower可以完成那些操作
`bower list`	显示所有安装应用程序的包
`bower search bootstrap`	想在应用程序中使用bootstrap框架，但不确定包的名字，这时可以使用search 命令
`bower info bootstrap`	如果想看到关于特定的包的信息，可以使用info 命令来查看该包的所有信息：