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

在本文中,你将了解如何通过 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)

创建应用

  1. 在“开始”窗口中(选择“文件”>“开始窗口”并打开),选择“新建项目”。

    Create a new project

  2. 在顶部的搜索栏中搜索“Express”,然后选择“JavaScript Express 应用程序”。

    Choose a template

  3. 为你的项目和解决方案命名。

查看项目属性

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

注意

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 进程(而不重新配置端口)将会失败。

注意

目前,仅支持将 edgechrome 浏览器类型用于调试。

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
      }
    }

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