npm、pnpm 和 Yarn

安装您的项目依赖项

• 单击弹出窗口中的Run 'npm install'、Run 'yarn install'或Run 'pnpm install'链接：

  

  当依赖项尚未安装或已更改时，WebStorm 会显示此弹出窗口。如果您关闭弹出窗口或通过选择Don't ask again将其关闭，您仍然可以使用Run '<package_manager> install'操作或在内置终端中安装依赖项。

  如果您不小心忽略了此通知，现在想要取回它，请按Ctrl+Shift+A，开始输入，然后从列表中Enable notifications选择Enable Notifications about Installation Dependencies from package.json 。

• 或者，在编辑器中打开相关的package.json文件或在Project工具窗口中选择它，然后从上下文菜单中选择Run 'npm install' 。

更新您的项目依赖项

• 在弹出窗口中单击运行“<package manager> install”。

  

  每次打开项目、从版本控制更新项目或编辑package.json时，WebStorm 都会显示此弹出窗口。

• WebStorm 还会运行检查，检查来自dependencies或devDependencies已安装的软件包及其版本是否与指定范围匹配。如果检查发现任何不匹配，则建议快速修复。要应用它，请单击Run '<package manager> install'链接。

  

• WebStorm 还检测有更高版本可用的包，并在您将鼠标悬停在包版本上时提供快速修复。

  

  或者，按Alt+Enter并从列表中选择更新 <package> 到最新版本：

  

在嵌入式终端( Alt+F12) 中，键入以下命令之一：

• 对于全局安装：

  • npm install --global <package_name>

  • yarn global add <package_name>

  • pnpm --global add <package_name>

• 要将包安装为项目依赖项或开发依赖项：

  • npm install --save <package_name>要么npm install --save-dev <package_name>

  • yarn add <package_name> --dev

  • pnpm add --save-dev <package_name>

安装 package.json 文件中列出的所有依赖项

在嵌入式终端( Alt+F12) 中，键入以下命令之一：

• npm install

• yarn install

• pnpm install

结果，您可以从当前文件夹中获取package.json中列出的所有依赖项。从编辑 package.json了解更多信息。

• 在编辑器中打开package.json文件，单击脚本旁边的装订线，然后从上下文菜单中选择Run <script_name>或Debug <script_name> 。

  

• 您也可以按 运行脚本Ctrl+Shift+F10。

脚本输出显示在运行工具窗口中。

如果您在调试模式下启动脚本，WebStorm 会打开调试工具窗口，您可以在其中 单步执行脚本、 停止和恢复脚本执行、暂停时检查它、在调试器控制台中运行 JavaScript 代码片段，等等。

如果 npm 工具窗口尚未打开，请打开它

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

  

  npm工具窗口打开，显示根据所选或打开的package.json文件构建的脚本树。

在已打开的 npm 工具窗口中构建脚本树

1. 在npm工具窗口中，单击工具栏上的 并从列表中选择所需的package.json文件。默认情况下，WebStorm在项目的根目录中显示package.json文件。

2. 如果您有另一个package.json文件，请单击选择 package.json并在打开的对话框中选择您需要的package.json文件。WebStorm 在其标题上添加一个带有所选package.json文件路径的新节点，并在新节点下构建一个脚本树。

重建一棵树

• 切换到所需节点并单击工具栏上的 。

  

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

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

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

  

运行一个脚本

• 双击脚本。

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

调试一个脚本

• 在树中选择脚本并从上下文菜单中选择调试 <script_name> 。

  WebStorm 打开调试工具窗口，您可以在其中 单步执行脚本、 停止和恢复脚本执行、暂停时检查它、在调试器控制台中运行 JavaScript 代码片段，等等。

运行或调试多个脚本

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

  

1. 从主菜单中，选择运行 | 编辑配置。或者，从工具栏上的列表中选择编辑配置。

2. 单击工具栏上的 并从列表中选择npm 。运行/调试配置：npm 对话框打开。

3. 指定要执行的 CLI 命令、要运行的脚本（使用空格作为分隔符）以及定义这些脚本的package.json文件的位置。（可选）键入用于执行脚本的命令行参数。

4. 指定要使用的 Node.js 解释器。这可以是本地 Node.js 解释器或Windows Subsystem for Linux 上的 Node.js。

   （可选）指定特定于 Node.js 的选项参数和要传递给 Node.js的环境变量。

5. 指定要使用的包管理器。如果您选择Project别名，WebStorm 将使用Node.js页面中的默认项目包管理器。您还可以选择相关的包别名（npm或yarn）或指定自定义安装包管理器的显式路径。

6. 从工具栏上的列表中选择新创建的运行配置，然后单击列表旁边的或。

   脚本执行的结果显示在运行工具窗口中。

   如果单击，WebStorm 将打开调试工具窗口，您可以在其中 单步执行脚本、 停止和恢复脚本执行、暂停时检查它、在调试器控制台中运行 JavaScript 代码片段，等等。

1. 按Ctrl两次或单击导航栏。运行任何东西弹出窗口打开。

2. 在搜索字段中输入或npm run。yarn run在您键入时，WebStorm 会显示匹配的脚本。从列表中选择所需的一项，然后按Enter。

   

   要在“运行”工具窗口中查看命令输出，请按 ，要在“调试Ctrl+Enter工具”窗口中显示输出，请按。Shift+Enter

   

1. 在设置/首选项对话框 ( Ctrl+Alt+S) 中，转到工具 | 启动任务。

2. 在打开的启动任务页面上，单击工具栏上的 。

3. 从列表中，选择所需的npm run 配置。配置将添加到列表中。

   如果项目中没有可用的配置，请单击并选择Edit Configurations。然后在打开的Run/Debug Configuration: NPM页面上定义具有所需设置的配置。当您保存新配置时，它会自动添加到启动任务列表中。

1. 通过选择Run |打开Run/debug 配置对话框对话框。从主菜单编辑配置，然后从列表中选择所需的配置，或者通过单击并选择相关的运行配置类型来重新创建它。

2. 在打开的对话框中，单击Before launch区域并从列表中选择Run npm script 。

3. 在打开的NPM 脚本对话框中，指定npm 运行/调试配置设置。