PhpStorm 2021.3 Help

NPM 工具窗口

package.json 的上下文菜单 - 显示 npm 脚本

查看 | 工具窗口 | npm

使用工具窗口运行 npm、pnpm 或 Yarn 脚本。

在你开始前

  1. 下载并安装Node.js。请注意,npm 也已安装,因此如果您要使用它,您已经完成了初步步骤。

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

运行脚本

当您在Project工具窗口中选择package.json文件或在编辑器中打开它并从上下文菜单中选择Show npm Scripts时, npm工具窗口将打开。

一旦您调用 npm、pnpm 或 Yarn,该工具就会开始构建在调用它的package.jsonscripts文件的属性中定义的脚本树。

如果您的项目中有多个package.json文件,您可以为每个文件构建一个单独的脚本树并运行脚本,而不会删除之前构建的树。每棵树都显示在一个单独的节点下。

工具窗口显示脚本输出,报告发生的错误,列出尚未找到的包或插件等。最后执行的脚本的名称显示在工具窗口的标题栏上。

要构建脚本树,请执行以下操作之一:

  • 在Project工具窗口中选择所需的package.json文件或在编辑器中打开它,然后从上下文菜单中选择Show npm Scripts 。

  • npm工具窗口中,单击添加按钮工具栏上的 并从列表中选择所需的package.json文件。默认情况下,PhpStorm在项目的根目录中显示package.json文件。如果您有另一个package.json文件,请单击选择 package.json并在打开的对话框中选择您需要的package.json文件。PhpStorm 在其标题上添加一个带有所选package.json文件路径的新节点,并在新节点下构建一个脚本树。

重建一棵树

  • 切换到所需节点并单击重新加载脚本工具栏上的 。

按名称对树中的脚本进行排序

  • 单击设置工具栏上的 ,从菜单中选择排序方式,然后选择名称

    默认情况下,树会按照它们在package.json中定义的顺序显示脚本(选项定义顺序)。

运行一个脚本

  1. 双击脚本。

  2. 在树中选择脚本,然后从上下文菜单中按Enter或选择运行 <脚本名称> 。

运行多个脚本

  • 使用多选模式:按住Shift(对于相邻项目)或Ctrl(对于非相邻项目)键并选择所需的脚本,然后从选择的上下文菜单中选择运行调试。

工具栏

图标一般添加

添加 package.json

单击此按钮以生成另一个package.json文件的脚本树。从列表中选择所需的package.json文件。PhpStorm 添加一个新节点并在其下构建一个脚本树。

减号.png

删除 package.json

单击此按钮可删除所选节点下的脚本树。

重新加载脚本

重新加载脚本

单击此按钮可重新构建所选节点下的脚本树。在更新相应的package.json文件后,您可能需要重新构建树,因为npm不会动态地将更改应用于树。

全部收缩

全部收缩

单击此按钮可隐藏所有脚本树并仅显示package.json节点。

查看模式

单击此按钮可配置当前视图并更改工具窗口的查看模式,详见工具窗口查看模式

请注意,大多数菜单项都是您可以打开或关闭的选项。启用的选项在其名称左侧有一个复选标记。npm特定选项是:

  • Edit npm Configurations: select this option to open the npm Run/Debug Configuration dialog and update the current settings for npm and for the Node interpreter, see npm, pnpm, and Yarn.

  • Sort by: select this option to configure the order in which scripts are shown in trees. Click 设置 on the toolbar, choose Sort by from the menu, and then choose Name.

    By default, a tree shows the scripts in the order in which they are defined in package.json (option Definition order).

隐藏

Hide

单击此按钮可隐藏工具窗口。要让它再次显示,请选择查看 | 工具窗口 | npm在主菜单上。工具窗口再次出现,显示所有先前构建的任务树。

树的上下文菜单

npm 设置

选择此菜单项以打开npm 设置对话框并查看或编辑Node.js配置

跳转到源

选择此菜单项以打开为其构建当前树的package.json文件。

重新加载脚本

选择此菜单项以重新构建所选节点下的脚本树。

复制路径

选择此菜单项以保存package.json文件的路径,当前树根据该路径构建到剪贴板。

删除 package.json

选择此菜单项以删除所选节点下的脚本树。

脚本的上下文菜单

运行 <脚本名称>

选择此菜单项以运行选定的脚本。

编辑 <脚本名称> 设置

选择此菜单项以打开“运行/调试配置”对话框并编辑所选脚本的预定义设置。

跳转到源

选择此菜单项以打开为其构建当前树的package.json文件并导航到所选脚本的定义。

最后修改:2021 年 9 月 23 日