Angular 学习之路 01 – 搭建环境

从零开始搭建一个前端项目要比同样搭建后端项目复杂得多。一定程度上是因为前端项目各种零零散散的工具都有着自己的配置文件，缺乏一个统一的开发框架。好在现在很多成熟的前端框架都提供了命令式的项目生成工具，用于简化这一流程。Angular 从最初的版本就提供了一个名为 CLI 的命令行工具，可以生成开箱即用的 Angular 项目环境。本章我们将着重介绍如何安装并使用 CLI 搭建一个完备的 Angular 开发环境。

如同其它的前端项目一样，在开始 Angular 开发之前，你需要准备好所需要的各种工具。

作为一个前端开发项目，首先要安装的就是著名的 Node.js 。虽然 Node.js 最初目的是使用 JavaScript 开发服务器端应用，但现在 Node.js 已经成为整个前端开发的基础。几乎所有前端项目都依赖于 Node.js。安装 Node.js 很简单，我们可以到  Node.js 的官方网站 下载安装包。打开网页，通常会有两个下载选项（由于 Node.js 发展迅速，打开页面的版本号可能与下面的截图有所不同）：

上面的截图显示，Node.js 提供了“10.15.3 LTS”和“12.1.0 Current”两个下载地址。虽然网页说明 LTS 版本推荐大多数用户使用，但我们还是建议下载最新版本。对于服务器，稳定性通常是第一考虑要素，因此 Node.js 推荐使用 LTS 长期支持版，但考虑到现在我们只是开发学习，所以选择最新版也不会有什么问题，反而可能会获得更好的性能。

下载之后双击安装。安装完毕之后，打开命令控制符窗口，输入命令：

node -v

如果能够输出安装版本号，说明安装成功：

安装完 Node.js 之后，也就有了 NPM。这是非常重要的一个工具，默认随 Node.js 一起安装。NPM 是 N ode.js  P ackage  M anager 的缩写，即 Node.js 包管理器，其作用类似于 Java 的 maven 以及 PHP 的 composer，用于管理整个项目的依赖包。早期的 NPM 存在速度慢、版本管理混乱的缺点，所以 Facebook 开发了另外一套包管理工具 yarn。新版本的 NPM 解决了一部分问题，较之老版本已经有了长足的进步，但豆子还是习惯使用 yarn。因此，下一步我们将安装 yarn 作为默认的包管理工具。 注意，这一步不是必须的，如果你不想再安装一个新的包管理工具，使用 NPM 完全可以。

我们可以在 yarn 的官方站点下载页面 找到其下载地址。对于 Windows 系统，官方推荐使用 msi 安装文件。下载完成后正常安装即可。使用下面的命令可以判断 yarn 是否安装成功：

之后，我们将一直使用 yarn 作为包管理工具。

yarn 直接使用 NPM 包。受限于国内的网络环境，NPM 中心库在国内是不可访问的，因此我们需要使用另外的镜像库。修改 NPM 镜像库地址的方法有很多种，这里我们推荐一种比较简单的方法。

运行命令：

yarn global add nrm

最开始的 yarn 表明这是一条 yarn 命令； global add 意味着在全局安装；最后的 nrm 意味着安装对象是 nrm。 综合起来就是，使用 yarn 在全局安装 nrm 包。安装完成之后，运行：

与之前的 yarn 命令类似。开头的 nrm 说明这是一条 nrm 命令；后面的 ls 与 Linux 命令类似，即列出所有可用的地址。

现在我们解释下 nrm 的作用。nrm 是 N PM  R egistry  M anager 的简写。前面我们说过，NPM 是一个包管理器。它有一个中心服务器，开发者把自己开发的可重用模块（也就是包）上传到这个中心服务器，其他开发者如果想使用这个包，只需要到这个中心服务器下载相应版本，添加到本地即可。比如，我们告诉 NPM，我需要 A 包的 1.0 版本，它就帮我们到中心服务器下载 A 包的 1.0 版本到本地，因此我们就可以在本地开发中使用这个包。NPM 将这个中心服务器称作 Registry，即注册中心。但是，NPM 默认的 Registry 服务器在国外，国内开发者从默认服务器下载包会非常慢，而且非常容易下载失败。好在国内有很多 Registry 镜像，我们只要切换到国内镜像，就可以获得非常快的速度。nrm 就是用来实现这个目的的。它可以帮助我们管理、切换 Registry 的地址。注意，yarn 也是使用的 NPM Registry，所以修改 NPM 的 Registry 地址也会影响到 yarn。

nrm 内置了很多开放的 Registry 地址，即前面使用 ls 命令返回的信息。第一行前面的 * 说明该地址是当前正在使用的地址。我们将默认的 npm 地址切换到 taobao，即阿里的镜像地址，使用 use 命令即可：

可以看到，在使用了 nrm use 命令之后，当前使用的 Registry 地址就已经改为 taobao 了。

如果你懒得安装 nrm，NPM 也提供了自己的命令，用于切换 Registry 地址。只不过你需要事先知道要切换到的地址：

npm set registry https://registry.npm.taobao.org

另外，查看当前 Registry 地址的命令是：

npm config get registry

在安装或更新 nrm 或其它包的时候，可能会出现下面的错误：

TypeError: log.gauge.isEnabled is not a function
    at Object. (C:\Users\devbe\AppData\Local\Yarn\Data\global\node_modules\npm\node_modules\npmlog\log.js:57:33)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object. (C:\Users\devbe\AppData\Local\Yarn\Data\global\node_modules\npm\lib\utils\umask.js:2:14)
    at Module._compile (internal/modules/cjs/loader.js:702:30)

如果出现，使用下面的命令之后再次运行即可：

yarn global add npm-check-updates

在做好准备工作之后，接下来我们安装 Angular CLI。Angular CLI 也是一个 NPM 包，因此我们在全局安装即可：

yarn global add @angular/cli

安装之后可以查看是否安装成功：

不必担心 Version 下面的 <error>，这是因为我们运行命令的目录不是 CLI 生成的目录，找不到本地安装的 Angular 版本导致的。只要能出现这一界面，就说明 Angular CLI 安装成功。

Angular CLI 默认使用 NPM 作为包管理工具。如果我们希望使用 yarn，只需运行下面的命令：

ng config -g cli.packageManager yarn

现在，我们已经安装好 Angular CLI，完成了所有的准备工作。接下来即将开始 Angular 的正式学习。