JavaScript全栈开发
上QQ阅读APP看书,第一时间看更新

1.4 运行环境的搭建

“工欲善其事,必先利其器。”在进入具体的学习任务之前,我们需要先将JavaScript的运行环境搭建起来。众所周知,JavaScript的运行环境主要分为Web浏览器环境和Node.js运行环境两种。如果不考虑Web浏览器特有的BOM和DOM组件,只是单纯学习ECMAScript,那么Node.js应该被优先考虑。因为它可以让我们像使用Shell、Ruby或Python脚本语言一样直接在命令行终端中执行JavaScript指令和脚本文件,在某种程度上更便于我们在初期的学习过程中随时查看代码的执行结果。

1.4.1 Node.js的安装

接下来,就让我们一起来安装Node.js运行环境吧。它主要有两种安装方式:通常在Windows操作系统和macOS中下载.msi和.dmg格式的安装包,然后使用安装包的图形化向导来进行安装,而在Linux和FreeBSD这一类操作系统中,则往往会使用apt和yum这样的包管理器来安装。这两种方式都不复杂,下面分别以Windows和Ubuntu操作系统为例,简单介绍一下这两种安装方式。

1.4.1.1 使用安装包

在Windows操作系统中想要安装Node.js,首先要选择一个合适的版本。打开Node.js的官网,可以看到有LTS和Current两种版本可供下载,如图1-1所示。LTS版即得到长期支持的版本,其组件通常都经过了充分的测试,比较稳定,适合用于正式的生产开发。而Current版本则是最新的版本,通常包含了最新加入的特性,比较适合想对Node.js本身进行研究的朋友。

0101

图1-1 选择版本

下载完.msi格式的安装包之后,打开安装包启动它的图形化安装向导。在安装的开始阶段,需要设置一些选项,大多数时候只需采用默认选项,直接单击“Next”按钮即可。只是在组件选择的窗口中(如图1-2所示)需要注意一下,如果你对Node.js的组件并不熟悉,最好选择安装全部组件。另外,请记得点开图1-2中“Add to PATH”选项前面的“+”号,这样安装程序就会主动把Node.js和npm这两个模块的命令路径添加到系统环境变量里,这对初学者来说是非常方便的。

Picture

图1-2 选择安装组件

待一切选项设置完成之后,单击下面的“Install”按钮即可完成安装,如图1-3所示。

Picture

图1-3 完成安装

如果一切顺利,在Windows操作系统中打开cmd终端,在其中输入node-v命令并按“Enter”键后,就会看到相关的版本信息,如图1-4所示。

Picture

图1-4 在Windows中检查版本

1.4.1.2 使用包管理器

对于Ubuntu这类Linux操作系统,安装软件往往都会选择使用apt这一类的包管理器,简单而方便,依次执行以下命令即可:

sudo apt update
sudo apt install nodejs
# 最新的 Node.js 已经集成了npm,所以某些情况下是无须单独安装npm的
sudo apt install npm

除此之外,安装n管理器也能管理Node.js的版本,其安装命令如下:

sudo npm install -g n

该工具的具体使用方式如下:

sudo n lts            # 长期支持
sudo n stable         # 稳定版
sudo n latest         # 最新版
sudo n 12.4.0         # 直接指定版本
sudo n                # 使用上下键切换已有版本

同样地,如果一切顺利,打开cmd终端,并在其中输入node -v命令并按“Enter”键后,就会看到图1-5所示的版本信息。

关于在Node.js中如何具体执行/调试JavaScript脚本,第2章介绍ECMAScript标准语法时会做具体演示,这里只需知道如何搭建并启动这个运行环境。

Picture

图1-5 在Linux中检查版本

1.4.2 浏览器端运行环境

目前,大部分开发者都会将Google Chrome或Mozilla Firefox设为自己的默认Web浏览器,因为它们本身都自带了一款非常不错的JavaScript运行环境。其中的Google Chrome浏览器,我们只需下载并安装它,然后在其主菜单中依次单击“更多工具”→“开发者工具”,在弹出的页面中单击“Console”选项卡,就可以看到图1-6所示的JavaScript运行环境了。

0106

图1-6 Google Chrome浏览器的JavaScript控制台

Mozilla Firefox则是另一款可扩展的浏览器,在Windows、Linux以及macOS这些主流操作系统上都有相应的版本,读者可根据自己的操作系统下载并安装相应的版本。安装完成之后,在任何网页中按“F12”键或在菜单栏中依次单击“工具”→“Web开发者”→“Web控制台”,就可以看到图1-7所示的JavaScript运行环境。

0107

图1-7 Mozilla Firefox浏览器的JavaScript控制台

关于如何在浏览器中具体执行/调试JavaScript脚本,本书的第二部分在讨论浏览器端的JavaScript时会做具体演示,这里只需知道如何搭建并启动这个运行环境。