WebStorm 2021.1 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文件。默认情况下,WebStorm在项目的根目录中显示package.json文件。如果您有另一个package.json文件,请单击选择 package.json并在打开的对话框中选择您需要的package.json文件。WebStorm 在其标题上添加一个带有所选package.json文件路径的新节点,并在新节点下构建一个脚本树。

重建一棵树

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

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

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

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

运行一个脚本

  1. 双击脚本。

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

运行多个脚本

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

工具栏

图标一般添加

添加 package.json

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

减号.png

删除 package.json

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

重新加载脚本

重新加载脚本

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

全部收缩

全部收缩

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

查看模式

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

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

  • 编辑 npm 配置:选择此选项以打开npm 运行/调试配置对话框并更新npm节点解释器的当前设置,请参阅npm、pnpm 和 Yarn

  • 排序方式:选择此选项可配置脚本在树中的显示顺序。单击设置工具栏上的 ,从菜单中选择排序方式,然后选择名称

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

隐藏

隐藏

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

树的上下文菜单

npm 设置

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

跳转到源

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

重新加载脚本

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

复制路径

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

删除 package.json

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

脚本的上下文菜单

运行 <脚本名称>

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

编辑 <脚本名称> 设置

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

跳转到源

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

最后修改:2021 年 9 月 23 日