WebStorm 2021.2 Help

NPM tool window工具窗口

Context menu of a package.json - Show npm Scripts
View | Tool Windows | npm

Use the tool window to run npm, pnpm, or Yarn scripts.使用工具窗口运行npm、pnpm或脚本。

Before you start在你开始之前

  1. Download and install Node.js. 下载并安装Node.jsNote that npm is also installed so if you are going to use it you are through with the preliminary steps.请注意,还安装了npm,所以如果您打算使用它,您就完成了初步步骤。

  2. To use Yarn, install it as described on the Yarn official website.要使用Yarn,请按照Yarn官方网站上的说明进行安装。

Running scripts运行脚本

The npm tool window opens when you select a package.json file in the Project tool window or open it in the editor and select Show npm Scripts from the context menu.当您在项目工具窗口中选择package.json文件或在编辑器中打开它并从上下文菜单中选择Show npm Scripts时,npm工具窗口将打开。

As soon as you invoke npm, pnpm, or Yarn, the tool starts building a tree of scripts defined within the scripts property of the package.json file on which it was invoked.一旦您调用npm、pnpm或Yarn,该工具就会开始构建一个脚本树,该脚本树是在调用它的package.json文件的scripts属性中定义的。

If you have several package.json files in your project, you can build a separate script tree for each of them and run scripts without dropping the previously built trees. 如果项目中有多个package.json文件,则可以为每个文件构建单独的脚本树,并在不删除以前构建的树的情况下运行脚本。Each tree is shown under a separate node.每个树都显示在单独的节点下。

The tool window shows the script output, reports the errors occurred, lists the packages or plugins that have not been found, etc. 工具窗口显示脚本输出、报告发生的错误、列出尚未找到的包或插件等。The name of the last executed script is displayed on the title bar of the tool window.最后执行的脚本的名称显示在工具窗口的标题栏上。

To build a tree of scripts, do one of the following:要构建脚本树,请执行以下操作之一:

  • Select the required package.json file in the Project tool window or open it in the editor and choose Show npm Scripts from the context menu.项目工具窗口中选择所需的package.json文件,或在编辑器中打开它,然后从上下文菜单中选择Show npm Scripts

  • In the npm tool window, click the Add button on the toolbar and choose the required package.json file from the list. npm工具窗口中,单击工具栏上的the Add button并从列表中选择所需的package.json文件。By default, WebStorm shows the package.json file in the root of your project. 默认情况下,WebStorm在项目根目录中显示package.json文件。If you have another package.json file, click Choose package.json and select the package.json file you need in the dialog that opens. 如果您有另一个package.json文件,请单击选择package.json并在打开的对话框中选择所需的package.json文件。WebStorm adds a new node with the path to the chosen package.json file on its title and builds a scripts tree under the new node.WebStorm添加了一个新节点,其标题上带有所选package.json文件的路径,并在新节点下构建了一个脚本树。

To re-build a tree重建一棵树

  • Switch to the required node and click Reload Scripts on the toolbar.切换到所需的节点并单击工具栏上的Reload Scripts

To sort the scripts in a tree by their names按脚本名称对树中的脚本进行排序

  • Click Settings on the toolbar, choose Sort by from the menu, and then choose Name. 单击工具栏上的Settings,从菜单中选择“排序依据”,然后选择“名称”。
    By default, a tree shows the scripts in the order in which they are defined in package.json (option Definition order).默认情况下,树按照在package.json(选项定义顺序)中定义的顺序显示脚本。

To run one script运行一个脚本

  • Double-click the script.双击脚本。

  • Select the script in the tree and press Enter or choose Run <script name> from the context menu.在树中选择脚本,然后按Enter键或从上下文菜单中选择运行<script name>

To run several scripts运行多个脚本

  • Use the multiselect mode: hold Shift (for adjacent items) or Ctrl (for non-adjacent items) keys and select the required scripts, then choose Run or Debug from the context menu of the selection.使用多选模式:按住Shift键(对于相邻项)或Ctrl键(对于非相邻项)并选择所需的脚本,然后从所选内容的关联菜单中选择运行调试

Toolbar工具栏

Icons general addAdd 添加package.jsonClick this button to have a tree of scripts for another package.json file built. 单击此按钮可生成另一个package.json文件的脚本树。Choose the required package.json file from the list. 从列表中选择所需的package.json文件。WebStorm adds a new node and builds a tree of scripts under it.WebStorm添加了一个新节点,并在其下构建了一个脚本树。
minusSign.pngRemove package.json删除package.jsonClick this button to remove the tree of scripts under the selected node.单击此按钮可删除选定节点下的脚本树。
Reload scriptsReload scripts重新加载脚本Click this button to have the tree of scripts under the selected node re-built. 单击此按钮可重新构建所选节点下的脚本树。You may need a tree re-built after updating the corresponding package.json file because npm does not apply changes to trees on the fly.您可能需要在更新相应的package.json文件后重新构建树,因为npm不会动态地将更改应用于树。
Collapse allCollapse all全部折叠Click this button to hide all the scripts trees and have only package.json nodes displayed.单击此按钮可隐藏所有脚本树,并仅显示package.json节点。
View Modes

Click this button to configure the current view and to change the viewing modes of the tool window, see Tool window view modes for details.单击此按钮可配置当前视图并更改工具窗口的查看模式,有关详细信息,请参阅工具窗口视图模式

Note that most of the menu items are options that you can turn on or off. 请注意,大多数菜单项都是可以打开或关闭的选项。An option which is on has a check mark to the left of its name. 启用的选项在其名称的左侧有一个复选标记。The npm -specific options are:npm的具体选项包括:

  • Edit npm Configurations:编辑npm配置: 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.选择此选项可打开npm运行/调试配置对话框,并更新npm的当前设置。对于节点解释器,请参阅npm、pnpm和Yarn

  • Sort by:排序方式: select this option to configure the order in which scripts are shown in trees. 选择此选项可配置脚本在树中的显示顺序。Click Settings on the toolbar, choose Sort by from the menu, and then choose Name. 单击工具栏上的Settings,从菜单中选择“排序方式”,然后选择“名称”。
    By default, a tree shows the scripts in the order in which they are defined in package.json (option Definition order).默认情况下,树按照在package.json(选项定义顺序)中定义的顺序显示脚本。

HideHide隐藏Click this button to hide the tool window. 单击此按钮可隐藏工具窗口。To have it displayed again, choose View | Tool Windows | npm on the main menu. 要再次显示,请选择主菜单上的“查看|工具窗口|npm”。The tool window appears again showing all the previously built trees of tasks.工具窗口再次出现,显示所有以前构建的任务树。

Context Menu of a Tree树的上下文菜单

npm Settingsnpm设置Choose this menu item to open the npm Settings dialog and view or edit the Node.js configuration选择此菜单项可打开npm设置对话框并查看或编辑Node.js配置
Jump to Source跳转到源Choose this menu item to open the package.json file for which the current tree is built.选择此菜单项打开为其生成当前树的package.json文件。
Reload scripts重新加载脚本Choose this menu item to have the tree of scripts under the selected node re-built.选择此菜单项可重建所选节点下的脚本树。
Copy Path复制路径Choose this menu item to save the path to the package.json file according to which the current tree was built to the clipboard.选择此菜单项以保存package.json文件的路径,根据该文件将当前树构建到剪贴板。
Remove 去除package.jsonChoose this menu item to remove the tree of scripts under the selected node.选择此菜单项可删除选定节点下的脚本树。

Context Menu of a Script脚本的上下文菜单

Run <script name>Choose this menu item to run the selected script.选择此菜单项以运行所选脚本。
Edit 编辑<script name> settingsChoose this menu item to open the Run/Debug Configuration dialog box and edit the predefined settings for the selected script.选择此菜单项可打开“运行/调试配置”对话框,并编辑所选脚本的预定义设置。
Jump to Source跳转到源Choose this menu item to open the package.json file for which the current tree is built and navigate to the definition of the selected script.选择此菜单项打开为其构建当前树的package.json文件,并导航到所选脚本的定义。
Last modified: 18 June 2021