Angular 开发学习 01 – 搭建环境

从零开始搭建一个前端工程项目相当不容易,只是那一堆配置文件就足够让人头痛。不过,现在很多框架都提供了命令式项目生成工具,用于简化这一令人痛苦的过程。Angular 同样如此。它提供了一个名为 CLI 的命令行工具,用于生成开箱即用的 Angular 开发工程。本章我们将着重介绍如何使用 CLI 搭建 Angular 开发环境。

在开始 Angular 开发之前,你需要准备好所需要的各种支持工具。

作为一个纯前端项目,最重要的一点是安装 Node.js。Node.js 对前端的重要性无需多言,几乎所有前端项目都依赖于 Node.js。我们可以到 Node.js 的官方网站下载最新版本的 Node.js。打开网页,通常会有两个下载选项:

Node.js 下载页面

正如上面的截图显示的那样,Node.js 提供了“8.9.3 LTS”和“9.3.0 Current”两个下载地址。虽然 8.9.3 版本是推荐大多数用户使用,但这里还是推荐使用最新版的 9.3.0。对于服务器,稳定性通常是第一考虑要素,因而 Node.js 推荐大多数用户使用 LTS 长期支持版,但因为我们只是作为开发使用,所以选择最新版也不会有什么问题,反而可能会获得更好的性能。

下载完毕之后,双击即可安装,与普通 Windows 安装程序没有任何不同。安装完毕之后,打开 cmd 输入命令

如果能够输出安装版本号,说明安装成功。
node -v

检查 Node.js 安装成功之后,输入命令

详细解释一下这行命令。npm是 Node.js 自带的一个包管理器,即 Node.js Package Manager,类似于 Java 的 maven、PHP 的 composer 等。安装好 Node.js,NPM 也就一同被安装了。因此,我们可以直接使用 NPM 命令。installnpm的一个子命令,顾名思义,就是“安装”。除此以外,npm还有很多其它子命令,例如updateremove等。-ginstall子命令的参数,代表 global 全局。最后的nrm是所要安装的模块名。因此,install -g nrm意味着在全局安装 nrm 模块。安装成功的话,应该有如下输出:

install nrm

当你在最后看到“added”字样,说明安装成功。PS:不必理会前面的 WARN 等信息,这是因为安装的 nrm 所依赖的包改变了位置,这并不影响我们的使用。不能成功安装,可以多试几次。如果始终不能成功,后面我们会提供解决方案。

现在我们要解释下为什么要安装 nrm。nrm 是 NPM Registry Manager 的简写。我们知道,NPM 是一个包管理器。所谓包管理器,就是有一个中心服务器,包开发者把自己开发的包集中上传到这个中心服务器,然后其他开发者如果想使用这个包,只需要到这个中心服务器下载相应版本,添加到本地即可。NPM 就是干这个事的,我们告诉 NPM,我需要 A 包的 a 版本,它就是帮我们到中心服务器下载 A 包的 a 版本。NPM 将这个中心服务器称作 Registry,即一个注册中心。但是,NPM 默认的 Registry 是在国外的,由于墙的原因,国内开发者从默认服务器下载包会非常慢,而且非常容易下载失败。好在国内有 Registry 的镜像,我们只要切换到国内镜像,就可以获得非常快的速度。nrm 就是用来实现这个目的的。它可以帮助我们管理、切换 Registry 的地址。我们使用

查看可用的 Registry:
nrm ls

nrm 列出了它内置的若干地址。第一行前面的 * 即代表当前使用的地址。下面,我们把要使用的 Registry 地址切换到淘宝提供的镜像:

然后再用

查看:
nrm use taobao
现在可以看到,当前使用的 Registry 已经切换到淘宝。

nrm 并没有什么魔法。它所做的,仅仅是设置了 NPM 的参数。前面说过,如果 nrm 始终不能安装成功,我们可以直接使用如下命令:

使用

可以查看当前 Registry 的 URL。

如果你懒得安装 nrm,直接使用这些命令也是可以。之所以推荐 nrm,是因为它可以很好地管理 Registry 的当前地址,方便我们日后的维护操作。

现在我们配置好了 Registry。下面使用文本编辑器打开用户目录下的 .npmrc 文件,里面应该只有一行:

使用文本编辑器在这一行后面添加一行,使之内容如下:

这里我们添加了一行“sass_binary_site”的设置。这是 SASS 的二进制文件地址。如果没有这个地址,当我们使用 SASS 的时候需要在我们本地进行编译,但是这需要很多开发环境的支持。为避免这一编译过程,我们设置该地址,要求在安装 SASS 时直接使用已经编译好的二进制文件。

最后的一个并不是必须的,但依然是推荐:使用 Yarn 替代 NPM。我们可以在 Yarn 的官方站点下载页面找到其下载地址。对于 Windows 系统,官方推荐下载 msi 安装文件。下载完成后正常安装即可。使用下面的命令可以判断 Yarn 是否安装成功:

yarn version

万事俱备,目前所需要的开发环境已经准备完毕,下面我们将正式进入 Angular 的开发学习过程。

Leave a Reply