WebStorm 2021.1 Help

Node.js 与 Docker

使用 Docker，您可以快速引导您的 Node.js 应用程序以从 WebStorm 运行、调试和分析它。IDE 将通过自动创建新的Dockerfile、构建和运行映像、同步源代码以及在容器中安装npm依赖项来处理初始配置。

您可以在快速浏览 WebStorm 和 Docker中找到一些示例。

在你开始前

  1. 确保在Settings/Preferences |上启用了Node.js、Node.js Remote Interpreter和Docker所需的插件。插件页面，选项卡Installed，有关详细信息，请参阅管理插件。

  2. 按照Docker中的说明下载、安装和配置Docker

在 Docker 中配置 Node.js 解释器

Docker 中的 Node.js 解释器在“配置 Node.js 远程解释器”对话框中进行配置。当您创建或编辑 Node.js 运行/调试配置以在 Docker 中运行或调试应用程序时，您可以从“设置/首选项”对话框的Node.js页面或稍后打开此对话框。

推荐的方法是在Settings/Preferences对话框中配置一个远程 Node.js 解释器。在这种情况下，您可以将解释器和相关的包管理器设置为项目的默认值。因此，您不仅可以在 Docker 中使用已配置的 Node.js 解释器运行和调试您的应用程序，还可以管理您的项目依赖项、运行测试和 lint 代码。请参阅下面的使用 Docker 的 npm、pnpm 和 yarn、测试您的应用程序以及使用 Docker 的 ESLint。

您在 Node.js 运行/调试配置中正确配置的远程 Node.js 解释器只能用于此运行/调试配置。

  1. 打开设置/首选项对话框 ( Ctrl+Alt+S) 并转到语言和框架 | 节点.js。

  2. 单击节点解释器字段浏览按钮旁边的。

  3. 在包含所有当前配置的解释器列表的Node.js 解释器对话框中，单击工具栏并从上下文菜单中添加按钮选择添加远程。

    在 Docker 容器中配置 Node.js 解释器：添加远程

  4. 在打开的配置 Node.js 远程解释器对话框中，选择Docker。

  5. 从服务器列表中，选择要使用的 Docker 配置。

    在 Docker 容器中配置 Node.js 解释器：选择 Docker 服务器

    或者，单击字段旁边的新建并按照启用 Docker 支持中的说明配置 Docker 服务器。

  6. 从图像名称列表中，选择要使用的图像。

    在 Docker 容器中配置 Node.js 解释器：选择 Docker 镜像

    Node.js 可执行文件会自动检测并显示在Node.js 解释器路径字段中。

  7. 单击确定返回到Node.js 解释器对话框，在该对话框中将新解释器添加到列表中。

    远程解释器对话框：Docker 中的新 Node.js 解释器已添加到列表中

  8. 要将新配置的解释器设置为项目默认值，请在列表中选择它。每次您从节点解释器Project列表中选择别名时，WebStorm 都会自动使用此解释器，例如，在创建运行/调试配置时。单击确定返回到Node.js对话框。

    要使用与新解释器关联的包管理器来管理项目依赖项，请将此包管理器设置为项目中的默认值。为此，请在包管理器字段中指定包管理器的位置。

    • npm 可执行文件的默认位置是/usr/local/lib/node_modules/npm.

    • pnpm 的默认位置取决于安装方法：

      • /usr/local/lib/node_modules/pnpm通过 npm 安装。

      • /usr/local/pnpm-global/<version>/node_modules/pnpm用于通过 curl ( curl -f https://get.pnpm.io/<version>.js | node - add --global pnpm) 安装。

      从pnpm 官方网站了解更多信息。

    • yarn 的默认位置是/opt/yarn-<version>5，例如/opt/yarn-v1.22.5。

    在 Docker 容器中配置 Node.js 解释器：设置为默认项目解释器

在项目中指定默认的 Node.js 解释器和包管理器

每次您从节点解释器Project列表中选择别名时，WebStorm 都会自动使用默认项目解释器，例如，在创建运行/调试配置时。

默认项目包管理器自动用于管理依赖项，例如，当您<package manager> install从package.json文件运行或安装第三方工具（如 ESLint、Prettier 等）时。

  1. 打开设置/首选项对话框 ( Ctrl+Alt+S) 并转到语言和框架 | 节点.js。

  2. 从节点解释器列表中，选择在当前项目中默认使用的配置。

  3. 在包管理器字段中，指定要使用的包管理器的位置。npm 可执行文件的默认位置是/usr/local/lib/node_modules/npm.

npm、pnpm 和 yarn 与 Docker

使用 WebStorm，您可以像处理本地项目一样管理项目依赖项并在 Docker 容器中运行脚本。

  1. 确保您已在 Docker 中配置了远程 Node.js 解释器。

  2. 在项目中指定默认的 Node.js 解释器和包管理器

  3. 管理您的项目依赖项。

    • 打开您的package.json文件并继续进行本地开发，例如，从上下文菜单中选择Run '<package manager> install' 。使用 Docker 容器内的默认包管理器安装依赖项，并且node_modules文件夹出现在您的项目中。

    • 或者，打开嵌入式终端( Alt+F12) 并手动安装您需要的软件包，例如，运行npm install --save-dev eslint.

    从安装和更新包和编辑 package.json了解更多信息。

  4. 运行和调试脚本

创建 Node.js 运行配置

  1. 从主菜单中，选择运行 | 编辑配置。在打开的编辑配置对话框中，单击工具栏并从上下文菜单中添加新配置按钮选择Node.js。运行/调试配置：Node.js对话框打开。

  2. 在JavaScript 文件字段中，指定启动它的应用程序的主文件的路径（例如，用于Express应用程序的bin/www）。

    Node.js 运行/调试配置：指定的 JavaScript 文件

  3. 如有必要，请指定一些可选设置，如运行和调试 Node.js 应用程序中所述。

  4. 从节点解释器列表中，选择 Docker 环境中的相关远程 Node.js 解释器。

    Node.js 与 Docker：运行/调试配置，选择解释器

    或者，单击节点解释器浏览按钮字段旁边的并配置远程 Node.js 解释器，如上所述。

    Node.js 与 Docker：运行/调试配置，配置解释器，选择添加远程

  5. 指定 Docker 容器设置。

    单击Edit Docker Container Settings字段浏览按钮旁边的并在打开的Edit Docker Container Settings对话框中指定设置。

    基本上，您需要将运行应用程序的端口与容器的端口绑定。

    绑定端口：

    1. 展开端口绑定区域并单击添加按钮工具栏上的 。打开的端口绑定对话框，映射端口如下：

    2. 单击修改选项并选择要指定的选项：

      配置 Docker 容器设置：选择要指定的端口绑定选项

      • 在容器端口字段中，输入您的应用程序中指定的端口。

      • 在主机端口字段中，键入您希望从您的计算机访问应用程序的任意端口。

      • 在主机 IP字段中，输入 Docker 主机的 IP 地址。如果您正在使用localhost，请键入127.0.0.1。

        Docker：指定端口绑定

      • 单击OK返回到Edit Docker Container Settings对话框，在该对话框中新的端口绑定被添加到列表中。

      Docker：添加了端口绑定

    4. 单击确定返回到运行/调试配置：Node.js对话框，其中端口绑定显示到Docker 容器设置字段。

运行您的应用程序

在 Docker 容器中运行 Node.js 应用程序

  1. 如上所述创建Node.js运行/调试配置。

  2. 从工具栏上的选择运行/调试配置列表中，选择新创建的 Node.js 配置。

  3. 单击运行按钮选择运行/调试配置列表。

检查应用程序输出

为确保应用程序按预期工作，您可以从 WebStorm内置 HTTP 客户端运行 HTTP 请求。

Node.js 与 Docker：使用 HTTP 请求连接到正在运行的应用程序

  1. 创建一个 HTTP 请求文件。

  2. 编写以下请求：

    GET http://<主机 IP>:<容器端口>/

    例如：

    获取 http://127.0.0.1:3010/

  3. 单击运行 HTTP 请求按钮装订线，然后单击Run http://<host IP>:<container port>/运行 HTTP 请求按钮旁边的。

    启动 HTTP 请求

    应用程序输出显示在运行工具窗口的单独选项卡中。

    应用程序输出显示在运行工具窗口中

调试您的应用程序

在 Docker 容器中调试 Node.js 应用程序

  1. 根据需要在 Node.js 代码中设置断点。

  2. 如上所述创建一个Node.js配置，从工具栏上的Select run/debug configuration列表中选择它，然后单击列表旁边的。调试按钮

  3. 与在本地启动调试器和 Node.js 应用程序时一样。

测试您的应用程序

使用 WebStorm，您可以在 Docker 容器中运行Mocha和Jest测试，就像在本地执行一样，请参阅Mocha和Jest了解详细信息。

  1. 确保 Docker 中的相关远程 Node.js 解释器已配置并选择为项目的默认值。还要确保与此远程解释器关联的包管理器设置为项目默认值。有关详细信息，请参阅在 Docker 中配置 Node.js 解释器以及使用 Docker和npm、pnpm 和 yarn。

  2. 打开您的package.json并确保所需的测试框架在以下devDependencies部分中列出：

    {“名称”：“节点快递”，“版本”：“0.0.0”，“私有”：true，“依赖项”：{“cookie-parser”：“~1.4.4”，“调试”：“ ~2.6.9", "express": "~4.16.1", "http-errors": "~1.6.3", "morgan": "~1.9.1", "pug": "^3.0.2 " }, "devDependencies": { "chai": "^4.3.4", "concurrently": "^6.3.0", "eslint": "^8.1.0", "http-server": "^14.0 .0”、“开玩笑”：“^27.3.1”、“摩卡”：“^9.1.3”、“nyc”：“^15.1.0”}}

  3. 右键单击编辑器中的任意位置，然后从上下文菜单中选择Run '<package manager> install' 。

  4. 根据Mocha 官网或Jest 官网的说明创建测试。

  5. 直接从编辑器运行和调试单个测试或创建运行/调试配置以启动部分或全部测试，如运行 Mocha 测试、调试 Mocha 测试、运行 Jest 测试和调试 Jest 测试中所述。

ESLint 与 Docker

使用 WebStorm，您可以在 Docker 容器中对您的代码运行ESLint，就像在本地执行操作一样，JavaScript linters和ESLint以获取详细信息。

  1. 确保 Docker 中的相关远程 Node.js 解释器已配置并选择为项目的默认值。还要确保与此远程解释器关联的包管理器设置为项目默认值。有关详细信息，请参阅在 Docker 中配置 Node.js 解释器以及使用 Docker和npm、pnpm 和 yarn。

  2. 打开你的package.json并确保 ESLint 在以下devDependencies部分中列出：

    {“名称”：“节点快递”，“版本”：“0.0.0”，“私有”：true，“依赖项”：{“cookie-parser”：“~1.4.4”，“调试”：“ ~2.6.9", "express": "~4.16.1", "http-errors": "~1.6.3", "morgan": "~1.9.1", "pug": "^3.0.2 " }, "devDependencies": { "eslint": "^8.1.0" } }

  3. 右键单击编辑器中的任意位置，然后从上下文菜单中选择Run '<package manager> install' 。

  4. 之后，ESLint 的工作方式与您在本地处理代码时的方式相同。直接在编辑器或问题工具窗口中查看检测到的差异的描述，并应用建议的快速修复。有关详细信息，请参阅JavaScript linter和ESLint。

    Docker 容器中的 ESLint
最后修改：2021 年 11 月 23 日
使用 Vagrant 对 Node.js 进行V8 CPU 和内存分析