搭建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下面配置的目录也删除了。