搭建AngularJS开发Webapp的开发环境-安装bower

接下来说的几个工具都是基于node.js的插件，所有要先下载安装好node.js。下载node安装完成后打开控制台输入

node -v

如果显示版本号，就说明安装好了。

---

因为npm在国内安装的比较慢，所有在中国境内推荐大家使用淘宝国内的镜像源cnpm。使用它来安装速度会快点。

npm i -g cnpm

---

bower：是第三方依赖的管理工具

第三方依赖指那些别人开发出来供我们调用的JS，如angular.js，jquery.js、bootstrap等都属于第三方的依赖。

这样的工具就是给我们提供一种管理方式，通过配置文件来自动下载拉取那些第三方依赖的js和css。

bower常用的命令：

bower init：初始化，创建项目的时候使用；创建一个bower.json的配置文件；
bower install：安装第三方依赖
bower uninstall：卸载第三方依赖

bower的配置文件

.bowerrc：主要作用就是修改我们的安装目录，因为bower它自动安装的话安装在bower_components目录。如果我们要安装到其它目录，就给它指定配置一个目录。

bower.json：是否则管理第三方依赖的，

bower的安装配置文件 bower.json：

1、创建一个目录，如叫做Webapp
2、git初始化

git init

3、通过cnpm安装bower

cnpm i -g bower

4、输入bower -v显示版本号，则意味着安装成功。

bower -v

5、在webapp目录下，初始化bower

bower init

bower初始化参数解释：

name //name 是必须的字段
description //描述、description是可选字段，npm search的时候会用到的。
main file   //主文件
keywords    //可选，方便注册后容易被其他人搜索到。
authors     //作者
license     //授权方式(GPL-3.0,CC-BY-4.0.....)
homepage    //主页，包介绍页
set currently installed components as dependencies?(y/n)
//如果你已经安装了一些依赖的话，是否将这些添加到配置文件?
add commonly ignored file to list?(y/n)
//将常见的忽略文件添加到列表中吗？
would you like to mark this package as private which prevents it from being accidentally published to the registry?(y/n)
//您想将此包标记为私有，防止它意外地发布到注册表吗？
Looks good?(y/n)
//看起来不错

这时bower.json文件就生成完成了。

---

演示使用bower安装angularjs

bower install --save angular
//只有写上--save才能添加到配置文件,不然它是不会默认写到bower.json的配置文件的
//一般从github上拉取的是Angular.js最新的版本

我们发现我们默认的安装目录webapp下面多了一个bower_components的目录，它下面有个angular文件夹，里面有Angular依赖

如果我们需要安装Angular的指定版本，可以使用 #版本号的方式，如：我们安装angular1.2版本

bower install --save angular#1.2

打开bower.json文件，我们发现除了刚刚的配置相比多了一个dependencies属性，这就是依赖，这是个json格式，是依赖名和版本号的形式。

{
  "name": "webapp",
  "description": "angularjs webapp",
  "main": "",
  "keywords": [
    "angularjs"
  ],
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular": "1.5.8",
  }
}

---

bower的.bowerrc配置文件：修改我们的安装目录

在windows系统下面是无法直接创建这个文件的，系统会提示“必须键入文件名”;
我们可以在命令行输入

null>.bowerrc
//输入后提示：'null'不是内部或外部命令，也不是可运行的程序或批处理文件。（直接无视）

这样我们就可以创建一个空的.bowerrc文件，这也是一个json格式的文件，比如我们写上如下，保存。

{
    "directory" : "lib"
}

---

我们再安装一下require.js

bower install --save requirejs

我们发现webapp目录下创建了一个lib目录，下面是angular和require目录。之前配置的也进行了重新的安装。

我们在演示一下bower uninstall卸载命令

bower uninstall --save requirejs

卸载成功，我们发现bower.json里面的dependencies配置进行了删除，然后lib下面配置的目录也删除了。