教程：在 Visual Studio 中创建 Node.js 和 Express 应用

项目
01/13/2024

在本文中，你将了解如何通过 Visual Studio 生成一个使用 Express 框架的简单Node.js Web 应用。

在开始之前，下面是一个快速 FAQ，介绍一些关键概念：

什么是 Node.js？

Node.js 是执行 JavaScript 代码的服务器端 JavaScript 运行时环境。
什么是 npm？

一个包管理器，它让使用和共享 Node.js 源代码库变得更加简单。 Node.js 的默认包管理器是 npm。 npm 包管理器可简化库的安装、更新和卸载过程。
Express 是什么？

Express 是一个服务器 Web 应用程序框架，Node.js 使用它来生成 Web 应用。借助 Express，可通过多种不同的方法来创建用户界面。本教程中提供的实现使用 Express 应用程序生成器的默认模板引擎（称为 Pug）来呈现前端。

先决条件

确保安装以下内容：

安装了 ASP.NET 和 Web 开发工作负载的 Visual Studio 2022 版本 17.4 或更高版本。请转到 Visual Studio 下载页，进行免费安装。如果需要安装工作负载，但已安装 Visual Studio，请转到“工具”>“获取工具和功能...”，这会打开 Visual Studio 安装程序。选择“ASP.NET 和 web 开发”工作负载，然后选择“修改” 。
npm (https://www.npmjs.com/)，随 Node.js 提供
npx (https://www.npmjs.com/package/npx)

创建应用

在“开始”窗口中（选择“文件”>“开始窗口”并打开），选择“新建项目”。
在顶部的搜索栏中搜索“Express”，然后选择“JavaScript Express 应用程序”。
为你的项目和解决方案命名。

查看项目属性

使用默认项目设置可以生成和调试项目。但是，如果需要更改设置，请右键单击解决方案资源管理器中的项目，选择“属性”，然后转到“生成”或“调试”部分。

注意

launch.json 存储与“调试”工具栏中的“开始”按钮关联的启动设置。目前，launch.json 必须位于 .vscode 文件夹下。

生成项目

选择“生成”>“生成解决方案”以生成项目。

启动应用

按 F5 或选择窗口顶部的“开始”按钮，你将看到命令提示：

npm 正在运行 Node ./bin/www 命令

注意

检查消息的控制台输出，例如指示你更新 Node.js 版本的消息。

接下来，你应会看到基本 Express 应用！

调试应用

现在，我们将介绍几种调试应用的方法。

首先，如果应用仍在运行，请按 Shift + F5 或选择窗口顶部的红色停止按钮以停止当前会话。你可能会注意到，停止会话会关闭显示应用的浏览器，但会留下运行 Node 进程的命令提示符窗口。现在，继续并关闭任何存留的命令提示符。在本文的后面，我们将介绍为何要让 Node 进程保持运行状态。

调试 Node 进程

在“启动”按钮旁边的下拉菜单中，应会看到以下启动选项：

localhost (Edge)
localhost (Chrome)
调试开发环境
启动 Node 和浏览器

继续并选择“启动 Node 和浏览器”选项。现在，在按 F5 或再次选择“启动”按钮之前，通过选择以下代码行前的左侧槽，在 index.js（位于“routes”文件夹中）中设置一个断点：res.render('index', { title: 'Express' });

提示

还可以将光标放在代码行上，然后按 F9 切换该行的断点。

然后，按 F5 或选择“调试”>“开始调试”以调试应用。

应会看到调试程序在刚刚设置的断点处暂停。当它暂停时，你可以检查应用的状态。将鼠标悬停在变量上可以检查其属性。

检查完状态后，按 F5 继续，应用应按预期加载。

这一次，如果点击停止，将注意到浏览器和命令提示符窗口都会关闭。若要了解原因，请仔细看一下 launch.json。

了解 launch.json

launch.json 目前位于 .vscode 文件夹中。如果在“解决方案资源管理器”中看不到 .vscode 文件夹，请选择“显示所有文件”。

如果你以前使用过 Visual Studio Code，launch.json 文件看起来会很熟悉。这里的 launch.json 的工作方式与在 Visual Studio Code 中的工作方式大致相同，用来指示用于调试的启动配置。每个条目指定要调试的一个或多个目标。

前两个条目是浏览器条目，它们应如下所示：

    {
      "name": "localhost (Edge)",
      "type": "edge",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public"
    },
    {
      "name": "localhost (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public"
    }

在上述条目中，可以看到 type 已设置为浏览器类型。如果你只用浏览器类型作为唯一的调试目标启动，Visual Studio 将只调试前端浏览器进程，而 Node 进程将在没有附加调试器的情况下启动，这意味着在 Node 进程中设置的任何断点都不会绑定。

停止会话后，Node 进程也将继续运行。当浏览器是调试目标时，有意让其保持运行状态，因为如果仅在前端完成工作，让后端进程持续运行可简化开发工作流。

在本部分开始时，你关闭了存留的命令提示符窗口，以便在 Node 进程中设置断点。要使 Node 进程可调试，必须在附加了调试程序的情况下重启它。如果让不可调试的 Node 进程保持运行状态，那么，尝试在调试模式下启动 Node 进程（而不重新配置端口）将会失败。

注意

目前，仅支持将 edge 和 chrome 浏览器类型用于调试。

launch.json 中的第三个条目将 node 指定为调试类型，它应如下所示：

    {
      "name": "Debug Dev Env",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}/bin",
      "program": "${workspaceFolder}/bin/www",
      "stopOnEntry": true
    }

在调试模式下，此条目将只启动 Node 进程。不会启动任何浏览器。

“launch.json”中提供的第四个条目是以下复合启动配置。

    {
      "name": "Launch Node and Browser",
      "configurations": [
        "Debug Dev Env",
        "localhost (Edge)"
      ]
    }

此复合配置与 vscode 复合启动配置相同，选择它可同时调试前端和后端。可以看到，它只是引用 Node 和浏览器进程的单个启动配置。

你可以在启动配置中使用许多其他属性。例如，可以通过将 presentation 对象中的 hidden 属性设置为 true 来隐藏下拉菜单中的配置，但仍使其可引用。

    {
      "name": "localhost (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public",
      "presentation": {
        "hidden": true
      }
    }

单击“选项”可以获取可用于增强调试体验的属性列表。请注意，目前仅支持“启动”配置。任何使用“附加”配置的尝试都将导致部署失败。

通过