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

你可能感兴趣的:(搭建AngularJS开发Webapp的开发环境-安装bower)