NPM 工具窗口
使用工具窗口 运行 npm、pnpm 或 Yarn 脚本。
开始之前
运行脚本
当您在 项目 工具窗口中选择 package.json 文件 Alt+1 ，或在编辑器中打开它并从上下文菜单中选择 显示 npm 脚本 时，将打开 npm 工具窗口。
一旦调用 npm、pnpm 或 Yarn，该工具将开始构建在 package.json 文件的 scripts 属性中定义的脚本树。
如果项目中有多个 package.json 文件，您可以为每个文件构建独立的脚本树，并在不移除前一个脚本树的情况下运行脚本。 每棵脚本树会显示在不同的节点下。
工具窗口会显示脚本输出、报告出现的错误、列出未找到的软件包或插件等内容。 工具窗口标题栏上会显示最近执行的脚本名称。
如需构建脚本树，请执行以下任一操作：
在 项目 工具窗口中选择所需的 package.json 文件 Alt+1 ，或者在编辑器中打开文件并从上下文菜单中选择 显示 npm 脚本。
在 npm 工具窗口中，点击工具栏上的
，然后从列表中选择所需的 package.json 文件。 默认情况下，WebStorm 会显示项目根目录下的 package.json 文件。 如果有其他 package.json 文件，请点击 选择 package.json ，然后在打开的对话框中选择所需的 package.json 文件。 WebStorm 会添加一个带有所选 package.json 文件路径的新节点，并在该节点下构建脚本树。
重新生成脚本树
切换到所需节点，并点击工具栏上的
。
按名称对脚本树进行排序
点击工具栏上的
，从菜单中选择 排序方式 ，然后选择 名称。 默认情况下，脚本树按照脚本在 package.json 中定义的顺序（选项 定义顺序 ）显示。
运行单个脚本
双击脚本。
在脚本树中选择脚本，然后按 Enter 或从上下文菜单中选择 运行 <script name>。
运行多个脚本
使用多选模式：按住 Shift （用于选中相邻项）或 Ctrl （用于选中不相邻项）并选中所需脚本，然后在选中项的上下文菜单中选择 运行 或 调试。
工具栏
| 添加 package.json | 点击此按钮以构建另一个 package.json 文件的脚本树。 从列表中选择所需的 package.json 文件。 WebStorm 会添加新节点，并在其下构建脚本树。 |
| 移除 package.json | 点击此按钮可移除选中节点下的脚本树。 |
| 重新加载脚本 | 单击此按钮以重新构建所选节点下的脚本树。 更新相应的 package.json 文件后，可能需要重新构建树，因为 npm 不会即时应用对树的更改。 |
| 全部折叠 | 单击此按钮以隐藏所有脚本树，仅显示 package.json 节点。 |
| 单击此按钮可配置当前视图并更改工具窗口的查看模式。 有关更多信息，请参阅 工具窗口视图模式。 请注意，大多数菜单项是可启用或禁用的选项。 启用的选项其名称左侧将显示对勾标记。 特定于 npm 的选项：
| |
| 隐藏 | 单击此按钮以隐藏工具窗口。 要再次显示该窗口，请在主菜单中选择 。 工具窗口将再次显示，呈现所有先前构建的任务树。 |
树的上下文菜单
npm 设置 | 选择该菜单项以打开 npm 设置 对话框并查看或编辑 Node.js 配置 |
跳转到源 | 选择该菜单项以打开用于构建当前树的 package.json 文件。 |
重新加载脚本 | 选择该菜单项以重新构建所选节点下的脚本树。 |
复制路径 | 选择该菜单项可将用于构建当前树的 package.json 文件路径复制到剪贴板。 |
移除 package.json | 选择该菜单项以移除所选节点下的脚本树。 |
脚本的上下文菜单
运行 <script name> | 选择该菜单项以运行所选脚本。 |
编辑 <script name> 设置 | 选择该菜单项以打开 运行/调试配置 对话框并编辑所选脚本的预定义设置。 |
跳转到源 | 选择该菜单项以打开用于构建当前树的 package.json 文件，并跳转到所选脚本的定义位置。 |