Skip to content

2. 工作环境的安装

我们将使用以下工具（在 Windows 10 x64 系统下）：

  • [Laragon] 用于运行 Web 服务器 PHP；
  • [Netbeans] 用于修改代码 PHP；
  • [Visual Studio Code] 用于编写 JavaScript 代码；
  • [node.js] 用于执行这些代码；
  • [npm] 用于下载并安装所需的 JavaScript 库；

2.1. Web 服务器的工作环境

PHP脚本是在以下环境中编写和测试的：

  • 名为 Laragon 的 Apache / SGBD MySQL / PHP 7.3 Web 服务器环境；
  • NetBeans 10.0 开发环境；

2.1.1. Laragon的安装

Laragon 是一个集成了多款软件的软件包：

  • Apache Web 服务器。我们将使用它来编写 PHP 格式的 Web 脚本；
  • SGBD MySQL；
  • PHP脚本语言；
  • 一个为 Web 应用程序实现缓存的 Redis 服务器：

Laragon 可于 2019 年 3 月从以下地址下载：

https://laragon.org/download/

Image

Image

Image

  • 安装 [1-5] 会生成以下目录结构：

Image

  • 在 [6] 中包含 PHP 的安装文件夹；

启动 [Laragon] 后将显示以下窗口：

Image

  • [1]：Laragon的主菜单；
  • [2]：[Start All]按钮用于启动Apache Web服务器，以及SGBD和MySQL；
  • [3]： [WEB] 按钮显示网页 [http://localhost]，该网页对应文件 PHP [<laragon>/www/index.php]，其中 <laragon> 是 Laragon 的安装目录；
  • [4]：[Database]按钮可通过[phpMyAdmin]工具管理SGBD和MySQL。 需先安装该工具；
  • [5]：[Terminal] 按钮将打开一个命令终端；
  • [6]：[Root]按钮将打开Windows资源管理器，并定位到[<laragon>/www]文件夹，该文件夹是[http://localhost]网站的根目录。 所有由 Laragon 的 Apache 服务器管理的 Web 应用程序都应放置在此处；

现在打开一个 Laragon [5] 终端：

Image

  • 在 [1] 中，终端类型。[6] 中提供三种终端类型；
  • 在 [2, 3] 中：当前目录；
  • 在 [4] 中，输入命令 [echo %PATH%] 可显示搜索可执行文件时遍历的文件夹列表。 Laragon的所有主要文件夹都包含在此可执行文件路径中，而在Windows中打开命令窗口时则并非如此。在本文档中，当需要输入命令来安装某款软件时，这些命令通常是在Laragon终端中输入的；

2.1.2. 安装 IDE NetBeans 10.0

NetBeans 10.0 可从以下地址下载（2019年3月）：

https://netbeans.apache.org/download/index.HTML

Image

下载的文件为 ZIP 压缩包，只需解压即可。安装并启动 NetBeans 后，即可创建首个 PHP 项目。

Image

  • 在 [1] 中，选择“文件 / 新建项目”选项；
  • 在 [2] 中，选择类别 [PHP]；
  • 在 [3] 中，选择项目类型 [PHP Application]；

Image

  • 在 [4] 中，为项目命名；
  • 在 [5] 中，为项目选择一个文件夹；
  • 在 [6] 中，选择已下载的 PHP 版本；
  • 在 [7] 中，为 PHP 文件选择 UTF-8 编码；
  • 在 [8] 中，选择 [Script] 模式，以在命令行模式下执行 PHP 脚本。 选择 [Local WEB Server] 以在 Web 环境中执行脚本 PHP；
  • 在 [9,10] 中，指定 Laragon 软件包中 PHP 解释器的安装目录：

Image

  • 选择 [Finish] 以完成 PHP 项目创建向导；

Image

  • 在 [11] 中，项目将通过脚本 [index.php] 创建；
  • 在 [12] 中，编写一个简化的脚本 PHP；
  • 在 [13] 中，执行 [index.php]；

Image

  • 在 [14] 中，将结果输出到 NetBeans 的 [output] 窗口中；
  • 在 [15] 中，创建一个新脚本；
  • 在 [16] 中，显示新脚本；

读者可以在同一项目 PHP 的不同文件夹中创建后续的所有脚本。本文档中脚本的源代码以以下 NetBeans 目录结构提供：

Image

本文档中的脚本位于项目目录 [scripts-console] [1] 中。 我们还将使用 PHP 库，该库将放置在 [<laragon-lite>/www/vendor] [2] 文件夹中，其中 <laragon-lite> 是 Laragon 软件的安装目录。 为了让 NetBeans 识别 [2] 库属于 [scripts-console] 项目， 我们需要将文件夹 [vendor] [2] 包含到项目分支 [Include Path] [3] 中。 我们将配置 NetBeans，使文件夹 [<laragon-lite>/www/vendor] [2] 被包含在所有新项目 PHP 中，而不仅仅是在项目 [scripts-console] 中：

Image

  • 在 [1-2] 中，进入 NetBeans 选项；
  • 在 [3-4] 中，配置 PHP 的选项；
  • 在 [5-7] 中，配置 [Global Include Path] 的 PHP： [7]中指定的文件夹会自动包含在所有PHP项目的[Include Path]中；

Image

  • 在 [9] 中，可访问 [Include Path] 分支的属性；
  • 在 [10-11] 中，NetBeans 会扫描这些库中的新库。NetBeans 会扫描这些库中的 PHP 代码，并记录其类、接口、函数等，以便为开发人员提供帮助；

Image

  • 在 [12] 中，一段代码使用了 [vendor/php-mime-mail-parser] 库中的 [PhpMimeMailParser\Parser] 类；
  • 在 [13] 中，NetBeans 会提供该类的各种方法；
  • 在 [14-15] 中，NetBeans 会显示所选方法的文档；

此处的 [Include Path] 概念是 NetBeans 特有的。PHP 也有这个概念，但原则上这是两个不同的概念。

现在工作环境已安装完毕，我们可以开始学习PHP的基础知识了。

2.2. JavaScript的工作环境

这些工具可通过 Laragon 安装（参见链接部分）：

Image

在 [4] 中，需先安装 [node.js]。 安装完成后，打开 Laragon 终端（参见链接部分），查询已安装的 [node.js] 版本（1）以及 [npm] 版本（2）：

Image

接下来，我们安装常被称为 [code]、[VSCode] 或 [3-6] 的 Visual Studio Code。完成安装后，我们可以启动该开发工具：

Image

Image

2.2.1. Visual Studio Code 的配置

接下来我们将展示如何配置 [VSCode]，以便读者理解文中不时出现的屏幕截图。 读者可以自由地按自己的意愿配置 [VSCode]。甚至可以安装自己喜欢的工作环境。这对我们后续的操作并不重要。

首先，我们将[VSCode]窗口的外观调整为浅色背景，而非黑色：

Image

接着，我们将左侧工具栏 [1-2] 隐藏起来，该工具栏中的各项功能在菜单中同样可用。在 [3-6] 中，我们设置了每次保存文件以及每次复制/粘贴时自动对代码进行格式化。

Image

保存配置 [Ctrl-S] 后，即可关闭窗口 [Settings] [7]。 您可以随时返回 [VSCode] [8-10] 的配置：

Image

这些配置保存在文件 [settings.json] 中，可直接进行编辑。按照之前所见，打开配置窗口 [Settings]：

Image

在 [4] 中，可以直接编辑文件 [settings.json]：

Image

  • 在 [1] 中，是文件 [settings.json] 的路径。恢复默认配置的一种方法是删除该文件；
  • 在 [2] 中，我们刚刚进行的配置；

现在，在 [VSCode] [1-2] 内打开一个终端：

Image

  • 在 [3] 中，显示已打开的终端类型，此处为 PowerShell；
  • 在 [4] 中，可以输入 Windows 命令；
  • 在 [6] 中，可以打开其他终端；
  • 在 [5] 模式下，显示已打开的终端列表；
  • 在 [7] 中，关闭当前活动终端；

我们将使用 [VSCode] 终端，通过 [npm]（Node Package Manager）工具安装 JavaScript 包（库）。 与之前在 Laragon 终端中操作一样，查询已安装的 [npm] 版本：

Image

可以看到，系统未识别 [npm] 命令。这意味着该命令不属于终端中的 PATH（用于搜索可执行文件的文件夹列表，此处为 [npm]）。 我们可以查明终端使用的 PATH：

Image

未在这些文件夹中找到可执行文件 [npm]。 与 Laragon 安装的其他工具一样，它位于 Laragon 的 [<laragon>\bin] 文件夹中，更确切地说是在 [nodejs] [4-6] 文件夹内。

Image

要启动 [VSCode] 并访问 [npm]，我们需要在 Laragon 终端中运行 [VSCode]。 通过这种方式启动后，[VSCode]将继承来自Laragon终端的PATH，而该终端包含可执行文件[node]和[npm]的文件夹：

Image

  • 在 [1] 中：输入命令 [path]；
  • 在 [2] 中：显示 PATH 的文件夹列表。 其中可见文件夹 [node-v10] [2]，这确保了可执行文件 [node] 和 [npm] 能够被找到；

[VSCode] 是通过 Laragon 终端使用命令 [code] 启动的：

Image

  • 在 [2] 中，通过 PowerShell 在 [VSCode] 中打开了一个终端；
  • 在 [3-4] 中，可以看到可执行文件 [node] 和 [npm] 已可访问；

注意：请勿关闭启动了 [VSCode] 开发环境的 Laragon 终端，否则 VSCode 本身也会关闭。

我们将进行最后一项配置：更改 [VSCode] 的默认终端：

Image

Image

文件 [settings.json] 随即更新：

Image

现在，我们打开一个新的终端 [VSCode] [1]：

Image

  • 在 [2] 中，终端 [cmd]（而非 PowerShell）；
  • 在 [3] 中，命令 [path] 返回终端的 PATH；
  • 在 [4] 中，可以清楚地看到可执行文件 [node] 和 [npm] 的文件夹

2.2.2. 为 Visual Studio Code 添加扩展

使用 [VSCode] 创建一个 JavaScript 文件：

Image

Image

  • 在 [3-4] 中创建一个文件夹；
  • 在 [5] 中，将其设为 [VSCode] 的当前目录；
  • 在 [6] 中，打开一个终端；
  • 在 [7] 中，可见当前位于所选文件夹内。后续操作将在该文件夹中进行；

Image

  • 在 [1-3] 中：创建一个新文件夹；
  • 在 [4] 中：向该文件夹添加一个文件；

Image

  • 在 [5-7] 中：创建我们的第一个 JavaScript 程序；

Image

  • 在 [8-9] 中：执行 JavaScript 程序；
  • 结果显示在 [10] 执行控制台中。 在 [11] 中可以看到已执行的命令：是应用程序 [node] 执行了脚本 [test-01.js]。 之所以能实现这一点，是因为该可执行文件位于 [VSCode] 的 PATH 中；否则将会出现错误，提示不认识命令 [node]；

我们以同样的方式执行第二个脚本 [test-02.js]：

Image

  • 在 [1-3] 中，我们定义了新的脚本。第 1 行中的指令 [use strict] 要求进行严格的语法检查。在此上下文中，所有变量都必须使用某个关键字 [let, const, var] 进行声明。 第2行的变量[x]并非如此；
  • 当通过 [Ctrl-F5] 执行此代码时，会引发 [5] 错误。在执行前可对这类错误进行预警，这更为理想。我们将采取两项措施：
    • 使用 [npm] 安装一个名为 [eslint] 的库，该库用于验证脚本语法是否符合 ECMAScript 6 标准；
    • 安装一个名为 ESLINT 的 Visual Studio Code 扩展，该扩展有助于在 [VSCode] 中使用 [eslint] 库；

首先，我们使用工具 [npm] 安装 JavaScript 库 [eslint]。要安装一个 [npm] 库（通常称为包），必须知道其确切名称。 如果不知道，可以访问 [npm] 的网站，在 URL (2019) [https://www.npmjs.com/] 页面上：

Image

  • 在 [3] 中，查找以 [esl] 开头的软件包；
  • 在 [4-6] 中，包含 [eslint] 包；

Image

  • 在 [7] 中，包含用于安装 [eslint] 包的命令 [npm]；
  • 在 [8] 中，是该软件包的配置；
  • 在 [9] 中，用于检查 JavaScript 脚本的语法；

我们将 [eslint] 软件包安装到 [VSCode] 的 [Terminal] 窗口中。 首先，我们需要在 [VSCode] 工作目录的根目录下创建一个名为 [package.json] 的文件。该文件将包含项目 [VSCode] 所使用的 jS 包列表：

Image

  • 在 [1] 中，在项目资源管理器中右键单击（不要在 tests 文件夹上）；
  • 在 [3-4] 中， 在项目 [javascript] 的根目录下创建文件 [package.json]，该文件与文件夹 [tests] 位于同一层级（但不在 [tests] 内）；
  • 在 [4-6] 中，将一个空的 jSON 对象放入 [package.json] 文件中；

然后打开终端 [VSCode] 来安装 [eslint]：

Image

  • 在 [2] 中，我们位于项目 [javascript] 的根目录下；
  • 在 [3] 中，执行安装 [eslint] 包的命令；
  • 执行后，
    • 在 [4-5] 中，文件 [package.json] 已被修改。第 3 行显示了已安装的 [eslint] 版本。 第 2 行，[devDependencies] 对应于安装时的参数 [--save-dev]。 该参数表示，已安装的依赖项必须作为 [devDependencies] 属性的元素写入 [package.json] 文件中。该属性列出了项目在开发模式下需要、但在生产模式下不需要的依赖项。 实际上，[eslint] 依赖项仅在开发阶段需要，用于验证所编写的代码是否符合 ECMAScript 标准；
    • 在 [6] 中，项目中出现了一个名为 [node_modules] 的文件夹。这是安装项目依赖项的文件夹；

Image

  • 在 [7] 中，显示了部分已安装的包。这些包数量众多。实际上，不仅安装了 [eslint] 包，还安装了该包所依赖的所有包；

Image

  • [1-2]，在终端 [VSCode] 中执行 [eslint] 软件包的配置命令。 配置程序将提出一系列问题 [3]，以了解您希望如何使用 [eslint]。如有疑问，请保留默认选项。要选择选项，请使用键盘上的上下方向键进行选择，然后确认；
  • 在 [4] 中，项目根目录下已生成一个名为 [.eslintrc.js] 的文件；
  • 在 [6] 中，是该文件的内容。您可以将内容复制到您自己的文件中； 

module.exports = {
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": "eslint:recommended",
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "rules": {
  }
};

仅凭以上信息尚不足以指出文件 [test-02.js] 中的错误：

Image

  • 必须输入命令 [2-3] 才能对文件 [tests/test-02.js] 进行分析；
  • 在 [4] 中，检测到了未声明变量的错误；

我们将为 [VSCode] 添加一个扩展，以便实时查看 JavaScript 错误。该扩展基于我们已安装的 [eslint] 包：

Image

  • 在 [3-5] 中，我们安装名为 [ESLint] 的扩展；

Image

  • 变为 [1]，显示新安装扩展程序的信息页面；
  • 在 [2] 中， 可以看到 [ESLint] 的验证模式是 [type]，这意味着 jS 脚本的语法将在输入文本的同时进行验证；

ESLint 可通过 [VSCode] 的通用配置文件进行配置：

Image

  • 在 [6-7] 中，[ESLint] 的配置。您可以在这里对其进行修改；

现在让我们回到 [test-02.js] 文件：

Image

  • 在 [3-4] 中，[x] 变量中的错误现已得到报告；
  • 在 [5] 中：文件中 ESLint 的错误数量；
  • 在 [6] 中，表示 [tests] 文件夹中存在错误文件；

如果修正了错误，ESLint的警告将消失：

Image

现在安装一个名为 [Code Runner] 的扩展：

Image

  • 安装完 [Code-Runner] 和 [1-5] 扩展后，可以使用 [6-7]（如上）对其进行配置；

Image

  • 在 [1-2] 中，包含 [Code-Runner] 的配置项；
  • 将其配置为 [3]，要求在每次执行前清理输出终端；
  • 在 [4] 中，定位列出不同语言执行工具的 [Executor Map] 元素；
  • 在 [5-6] 中，将配置复制到剪贴板；
  • 在 [7-8] 中，修改文件 [settings.json]；

Image

  • 在 [2] 中，在 [settings.json] [1] 文件的最后一个元素后添加逗号；
  • 在 [3] 中，粘贴之前复制到 [5-6] 中的内容：这是用于执行 [VSCode] 所支持的各种语言的命令列表；
  • 在 [4] 中，是用于执行 JavaScript 文件的命令。该命令仅在 [node] 位于 PATH 的 [VSCode] 中时才有效。 如果不是这种情况，可以输入可执行文件 [5] 的完整路径；

完成上述操作后，保存配置（Ctrl-S）。使用 [Code Runner] 扩展名后，只需右键单击 [6] 代码（如上所示），即可执行 JavaScript 文件：

Image

2.2.3. 一些有用的 [VSCode] 命令

  • 要格式化代码，请右键单击代码 [1]；
  • 要关闭打开的窗口，请右键单击其标题 [2-3]；

Image

  • 要显示特定窗口，请右键单击 [4-5]；
  • 保存项目（Workspace）时，请右键单击 [6-9]；
  • 要保存项目 [10-11]；

Image

Image

  • 打开项目 [11-16]：

Image

  • 查看已安装的扩展 [19-20]：

Image

如今我们已拥有优秀的JavaScript开发工具。接下来我们将通过简短的代码片段来介绍这种语言。由于本介绍紧随课程PHP之后，我们有时会对这两种语言进行比较，以指出它们之间的差异。

https://stahe.github.io
本教程由 Serge Tahé 编写，根据 知识共享 署名-非商业性使用- 相同方式共享 3.0 未本地化.