NPM tool window工具窗口
Use the tool window to run npm, pnpm, or Yarn scripts.使用工具窗口运行npm、pnpm或脚本。
Before you start在你开始之前
-
Download and install Node.js.下载并安装Node.js。Note that npm is also installed so if you are going to use it you are through with the preliminary steps.请注意,还安装了npm,所以如果您打算使用它,您就完成了初步步骤。 -
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 一旦您调用npm、pnpm或Yarn,该工具就会开始构建一个脚本树,该脚本树是在调用它的package.json文件的scripts
property of the package.json file on which it was invoked.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在npm工具窗口中,单击工具栏上的on the toolbar and choose the required package.json file from the list.
并从列表中选择所需的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切换到所需的节点并单击工具栏上的on the toolbar.
。
To sort the scripts in a tree by their names按脚本名称对树中的脚本进行排序
-
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).默认情况下,树按照在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工具栏
![]() | ||
| ||