Angular 开发学习 01 – 搭建环境

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

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

作为一个前端开发项目,首先要安装的就是著名的 Node.js。虽然 Node.js 最初目的是使用 JavaScript 开发服务器端应用,但现在 Node.js 已经成为整个前端开发的基础。几乎所有前端项目都依赖于 Node.js。安装 Node.js 很简单,我们可以到 Node.js 的官方网站下载安装包。打开网页,通常会有两个下载选项:

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

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

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



成功安装 Node.js 之后,接下来安装 yarn。这一步并不是必须的,但强烈推荐:使用 yarn 替代 NPM。NPM是 Node.js 自带的一个包管理器,即 Node.js Package Manager,类似于 Java 的 maven、PHP 的 composer 等。NPM 与 Node.js 一起安装,因此,我们可以直接使用 NPM 命令。但是 NPM 有一些问题,比如速度较慢、早期的 NPM 无法固定版本等(不过最新版的 NPM 已经解决了这一问题),于是,Facebook 开发了 yarn,用于替代 NPM 的一些工作。yarn 直接使用 NPM 的库,性能比 NPM 好一些,命令也比 NPM 简洁。

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

之后,我们将一直使用 yarn 作为包管理工具。现在输入命令

详细解释一下这行命令。global代表全局,会在全局安装后面的包。add顾名思义,就是“安装”。除此以外,yarn还有很多命令,例如upgraderemove等。最后的nrm是所要安装的模块名。因此,global add nrm意味着在全局安装 nrm 模块。

运行命令
nrm ls

安装成功的话,应该有如下输出:

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

之前我们执行的命令nrm ls用于查看可用的 Registry。例如上图显示,nrm 中有 npm、cnpm、taobao 等。第一行最前面的 * 代表当前使用的地址。下面,我们把要使用的 Registry 地址切换到淘宝提供的镜像:

然后再用
nrm ls

查看:

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

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

使用
npm config get registry

可以查看当前 Registry 的 URL。

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

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

使用文本编辑器在这一行后面添加一行,使之内容如下:
registry=https://registry.npm.taobao.org/
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

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

在安装 nrm 的时候可能会有下面的错误:

TypeError: log.gauge.isEnabled is not a function
    at Object.<anonymous> (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.<anonymous> (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)

出现这个问题,可以安装 npm-check-updates 包来解决:

npm-check-updates 安装成功之后再重新尝试。

万事俱备,目前所需要的开发环境已经准备完毕。

安装 CLI 的过程很简单,与安装其它工具、甚至是安装一个普通开发包没什么区别。我们前面已经配置好 NPM Registry、安装成功 yarn,那么就使用 yarn 来安装这个工具。具体的命令是:
yarn global add @angular/cli

安装完毕之后执行

运行结果如下所示:


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

刚刚安装完成的 CLI 默认使用 NPM 作为包管理工具。我们希望使用 yarn,只需运行下面的命令:
ng config -g cli.packageManager yarn

反之,如果想换回 NPM,只需使用

即可。针对中国开发者,Angular CLI 甚至支持 CNPM:
ng config -g cli.packageManager cnpm

安装好 Angular CLI,下面我们来创建第一个示例工程,了解 Angular CLI 的基本使用。使用命令

创建一个演示项目。

Angular CLI 的所有命令都是以 ng 开头。new是创建一个全新项目,后面的 demo 是项目的名字。Angular CLI 会帮我们生成完整的项目框架——包括项目所需所有文件、文件结构以及各种辅助文件等。之后,Angular CLI 会自动运行yarn install,安装项目所需要的各种依赖。安装过程会比较漫长,需要耐心等待一段时间。当提示“successfully”时,表示项目已经创建完成。如果有错误,需要检查安装过程或者网络连接等。

项目创建完毕,会在当前目录下生成一个项目文件夹。之后我们可以进入项目目录
cd demo

然后运行

当出现“Compiled successfully.”时,表示编译成功。


ng serve命令会编译项目,然后启动一个内置的小型服务器,我们就可以通过浏览器查看项目的运行结果。注意上面的提示:Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/,也就是说,这个服务器的地址应该是 http://localhost:4200,我们只要用浏览器访问这个地址即可:

demo page

可以看到 Angular CLI 默认生成的项目页面的运行结果。

这一内置服务器仅适用于开发测试用,并不能作为实际使用的服务器。因此,我们如果要部署到正式的服务器,需要将项目编译成一个发布版。编译发布版也很简单,只需使用一条命令:
ng build --prod

编译完成后,打开项目文件夹,可以看到一个 dist 目录,这里面的文件就是整个项目运行所需要的文件。当我们部署应用时,只需要将这个文件夹中的所有文件部署到服务器即可。

我们从创建项目开始,到项目的开发测试,最后是项目打包部署,全部利用 Angular CLI 提供的各种功能。可以看到,Angular CLI 提供了一站式的开发模式,我们可以利用 Angular CLI 很简单的开发 Angular 项目。不过,这里我们演示的只是最简单的用法,在正式使用中,可能会添加很多额外的参数,以便生成我们所需要的文件和项目。这需要通过阅读 Angular CLI 的文档来获取更多信息。在后面的章节中,如果遇到相关内容,我们会再次进行介绍。

Leave a Reply