WebStorm 2025.2 Help

运行/调试配置：NPM

创建： 运行(U) | 编辑配置(E) | 添加新配置| NPM

本页介绍了特定配置项以及所有运行/调试配置共有的 选项。 有关使用此配置的更多信息，请参阅 npm、pnpm 和 Yarn。

在此对话框中创建用于本地运行 npm 和 Yarn 脚本的配置。 在当前上下文中，“本地”是指 WebStorm 自行启动安装在您计算机上的 Node.js ，从而启动脚本执行。

详细了解请参见 npm、pnpm 和 Yarn。

如果脚本在开发模式下启动应用程序，您可以修改配置，使其同时启动调试会话。 要执行此操作，请转到 浏览器 / Live Edit 页签 ，并在其中指定应用程序运行的 URL 地址。 详细了解请参见 使用单个 npm 运行/调试配置运行并调试 Angular 应用、 使用单个 npm 运行/调试配置运行并调试 Vue.js 应用 和 使用单一 npm 运行/调试配置运行并调试 Vite 应用。

开始之前

  1. 下载并安装 Node.js。 请注意，npm 也会一同安装，因此如果您打算使用它，则已完成了准备步骤。

  2. 如要使用 Yarn，请按照 Yarn 官方网站 的说明进行安装。

配置页签

项目

描述

package.json

在此字段中，指定要运行脚本的 package.json 文件。 从下拉列表中选择文件，该列表显示了当前项目中检测到的所有 package.json 文件，或单击 浏览按钮 并在打开的对话框中选择所需的 package.json 。

命令

从此列表中选择要执行的 npm CLI 命令 ，默认为 run-script。 请参阅 npm 文档 中的 CLI 命令 章节了解详情。

脚本

在此下拉列表中，选择要应用所选命令的脚本。 该列表包含在 scripts 属性中定义于 package.json 文件里的所有脚本。

参数

在此字段中，指定执行脚本时使用的命令行参数。 详细信息请参见 npm 官方网站。

Node 解释器

在此字段中，指定要使用的 Node.js 解释器。

如果选择 项目 别名，WebStorm 会自动使用 Node.js 页面中 Node 解释器 字段设置的项目默认解释器。 在大多数情况下，WebStorm 会检测项目的默认解释器并自动填写该字段。

您也可以选择另一个已配置的本地或远程解释器，或单击 浏览按钮 来配置新的解释器。

如需了解更多信息，请参阅 配置远程 Node.js 解释器、 配置本地 Node.js 解释器 和 在 Windows 子系统 Linux 上使用 Node.js。

Node 选项

在此字段中，输入要传递给 Node.js 可执行文件的 Node.js 特定命令行选项。 可用选项包括：

  • 使用 --require coffeescript/register 可在运行期间将 CoffeeScript 文件即时编译为 JavaScript。

    该模式要求 register.js 文件（属于 coffeescript 包）位于项目中。 因此，请确保已按照 安装 CoffeeScript 编译器 中的说明在本地安装 coffeescript 包。

  • 使用 --inspect 或 --inspect-brk 参数以支持 Chrome 调试协议。

包管理器

在此字段中。 指定要使用的包管理器。 如果选择 Project 别名，WebStorm 将从 Node.js 页面使用默认项目包管理器。 您还可以选择相关的包别名（npm 或 yarn ），或指定包管理器的自定义安装路径。

环境变量

如果适用，请在此字段中为 Node.js 可执行文件指定 环境变量。 单击 浏览 浏览按钮 来打开字段右侧的 环境变量 对话框，并在其中配置变量列表：

  • 要定义新变量，请单击 添加按钮 并指定变量名称和值。

  • 要放弃变量定义，请在列表中选择该变量并单击 移除按钮。

  • 准备就绪后，单击 确定

变量定义显示在 环境变量 只读字段中，以分号分隔，例如：

  • NODE_PATH ：以 : 分隔的目录列表，在模块搜索路径前添加。

  • NODE_MODULE_CONTEXTS ：设置为 1 可在各自的全局上下文中加载模块。

  • NODE_DISABLE_COLORS ：设置为 1 可在 REPL 中禁用颜色。

Docker 容器设置

此只读字段显示端口和卷绑定。 单击 展开按钮 可打开命令预览。

检查 Docker 容器设置

Docker Compose

在此区域中，指定要传递给 Docker Compose 的命令和选项。 接受默认设置或单击 展开按钮 并指定自定义设置，例如自定义 Docker Compose 标志，如 --rm 或 --service-ports。 详细信息请访问 Docker 官方网站。

请检查 命令预览。

通用设置

在编辑运行配置（而非运行配置模板）时，您可以指定以下选项：

项

描述

名称(N)

为运行配置指定一个名称，以便在编辑或运行时快速识别。

允许多个实例(U)

允许同时运行该运行配置的多个实例。

默认情况下，此选项处于禁用状态，并且当您在另一个实例仍在运行时启动该配置时，WebStorm 会建议停止正在运行的实例并启动另一个实例。 当运行配置消耗大量资源且没有合理理由运行多个实例时，此选项非常有用。

存储为项目文件(S)

将包含运行配置设置的文件保存，以便与其他团队成员共享。 默认位置为 .idea/runConfigurations 。 但是，如果您不希望共享 .idea 目录，您可以将配置保存到项目内的任意其他目录。

默认情况下，此选项处于禁用状态，WebStorm 会将运行配置设置存储在 .idea/workspace.xml 中。

工具栏

运行/调试配置树形视图具有工具栏，可帮助您管理项目中的配置并调整默认配置模板。

项

快捷键

描述

添加按钮

Alt+Insert

创建运行/调试配置。

移除按钮

Alt+Delete

删除选定的运行/调试配置。 请注意，无法删除默认配置。

复制

Ctrl+D

创建所选运行/调试配置的副本。 请注意，您是在创建默认配置的副本。

保存配置

仅在选择 临时配置时才会显示此按钮。 单击此按钮可将临时配置保存为永久配置。

移至新文件夹 / 创建新文件夹

移动到新文件夹／创建新文件夹。 您可以通过 将其放入文件夹来对运行／调试配置进行分组。

要创建文件夹，请在某一类别中选择配置，点击 文件夹 ，并指定文件夹名称。 如果仅聚焦于某个类别，则会创建一个空文件夹。

然后，要将配置移动到文件夹中、文件夹之间或移出文件夹，请使用拖放方式或使用 上移 和 下移 按钮。

若要取消分组，请选择文件夹并点击 移除配置。

排序配置

单击此按钮可按字母顺序对配置进行排序。

启动前

在此区域中，您可以指定在启动所选运行／调试配置之前要执行的任务。 任务将按其在列表中出现的顺序执行。

项目

快捷键

描述

添加按钮

Alt+Insert

单击该图标以添加以下可用任务之一：

  • 启动Web 浏览器 ：选择此选项以启动浏览器。 在打开的对话框中选择浏览器类型并提供启动 URL。 另外，请指明是否需要使用 JavaScript 调试器启动浏览器。

  • 运行外部工具 ：选择此选项以运行外部应用程序。 在打开的对话框中选择要运行的一个或多个应用程序。 如果 WebStorm 中尚未定义该应用程序，请添加其定义。 如需了解详情，请参阅 外部工具 和 外部工具。

  • 运行另一个配置 ：选择此选项可执行另一个运行／调试配置，并等待其完成后再启动当前配置。 如果希望并行运行多个配置，请使用 复合运行／调试配置。

  • 运行File Watcher ：选择此选项可让 WebStorm 应用所有当前处于活动状态的 File Watchers。

  • 运行远程外部工具 ：添加 远程 SSH 外部工具。

  • 运行Grunt 任务 ：选择此选项以运行 Grunt 任务。

    在打开的 Grunt 任务 对话框中，指定包含该任务定义的 Gruntfile.js ，选择要执行的任务，并指定传递给 Grunt 工具的参数。

    指定 Node.js 解释器的位置、要传递的参数以及 grunt-cli 包的路径。

  • 运行 Gulp 任务 ：选择此选项以运行 Gulp 任务。

    在打开的 Gulp 任务 对话框中，指定包含该任务定义的 Gulpfile.js ，选择要执行的任务，并指定传递给 Gulp 工具的参数。

    指定 Node.js 解释器的位置、要传递的参数以及 gulp 包的路径。

  • 运行 npm 脚本 ：选择此选项以执行 npm 脚本。

    在打开的 NPM 脚本 对话框中，指定 npm run/debug configuration settings。

  • 编译TypeScript ：选择此选项以运行内置的 TypeScript 编译器，从而确保您对 TypeScript 代码所做的所有更改都已反映在生成的 JavaScript 文件中。 在打开的 TypeScript 编译设置 对话框中，选中或取消选中 检查错误 复选框，以配置在检测到任何错误时编译器的行为：

    • 如果选中 检查错误 复选框，编译器将显示所有错误，并且运行配置不会启动。

    • 如果取消选中 检查错误 复选框，编译器将显示所有检测到的错误，但运行配置仍会被启动。

  • 生成CoffeeScript 源映射 ：选择此选项以为 CoffeeScript源生成 source map。 在打开的对话框中，指定 CoffeeScript 源文件的位置。

移除按钮

Alt+Delete

单击该图标可将选定的任务从列表中移除。

编辑

Enter

单击该图标可编辑所选任务。 在打开的对话框中进行必要的更改。

方法上移

方法下移

Alt+Up

Alt+Down

单击这些图标可将所选任务在列表中上移或下移一行。 任务将按照其在列表中的顺序执行。

显示此页面

选中此复选框可在实际启动运行／调试配置之前显示运行／调试配置设置。

激活工具窗口

默认情况下，此复选框为选中状态，启动运行／调试配置时将打开 Run 或 Debug 工具窗口。

否则，如果取消选中该复选框，工具窗口将被隐藏。 但是，在配置运行期间，您可以通过按 Alt+4 或 Alt+5 手动打开相应的工具窗口。

浏览器 / Live Edit 页签

如果希望运行／调试配置以开发模式启动应用程序并同时启动调试会话，请使用此选项卡中的控件。 请参阅 使用单个 npm 运行/调试配置运行并调试 Angular 应用、 使用单个 npm 运行/调试配置运行并调试 Vue.js 应用 和 使用单一 npm 运行/调试配置运行并调试 Vite 应用 了解更多信息。

您还可以在此启用 WebStorm 以在浏览器中打开应用程序。

项

描述

打开浏览器

在此区域启用应用在浏览器中打开。

  • 启动后 — 选中此复选框可在启动时打开应用。 从列表中选择在其中打开应用的浏览器。

  • URL — 在此字段中指定应用运行的 URL 地址。

  • 使用 JavaScript 调试器 — 选中此复选框可在开发模式中启动应用的同时开始调试会话。

最后修改日期： 2025年 9月 26日
npm、pnpm 和 YarnNx