最终的

npm、pnpm 和 Yarn

安装项目依赖项

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

  

  当依赖项尚未安装或依赖项已更改时，IntelliJ IDEA 会显示此弹出窗口。如果您关闭弹出窗口或通过选择不再询问将其关闭，您仍然可以使用运行“<package_manager> install”操作或在内置终端中安装依赖项。

  如果您不小心忽略了此通知，现在想要将其恢复，请按，开始输入，然后从列表中选择启用有关从 package.json 安装依赖项的通知。CtrlShift0AEnable notifications

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

更新您的项目依赖项

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

  

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

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

  

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

  

  或者，按并从列表中选择将<package> 更新为最新版本：AltEnter

  

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

• 对于全局安装：

  • 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 文件中列出的所有依赖项

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

• npm install

• yarn install

• pnpm install

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

笔记

对于通过 Yarn 2 安装的软件包，IntelliJ IDEA 显示yarn:package.json:< package name>而不是软件包的实际路径。请注意，此格式仅用于在“设置”对话框中显示包，而不用于指定其在代码或其他地方的位置。

• 要解决编辑器中的包漏洞问题，请将鼠标悬停在package.json文件中突出显示的包上。弹出工具窗口显示检测到的漏洞的描述。

  要应用快速修复，请单击更多操作 并选择相关建议。AltEnter

• 要在问题工具窗口中查看易受攻击的包，请单击检查小部件。

  • “问题”工具窗口的“文件”选项卡列出了在活动编辑器选项卡中打开的package.json中的所有易受攻击的包。每个项目都附有说明。

    要解决问题，请在列表中选择存在漏洞的软件包，单击工具栏上的 或按，然后选择相关建议。AltEnter

  • “易受攻击的依赖项”选项卡列出了项目中检测到的所有易受攻击的包。

    

    要修复问题，请在列表中选择易受攻击的包，单击右侧窗格中的将安全版本复制到剪贴板链接，然后将复制的版本粘贴到package.json。

  从获取结果并解决问题中了解更多信息。

• 默认情况下，启用包漏洞检查。要关闭它，请打开“设置”对话框 ( )，转至编辑器 | 检查，并清除安全节点下相关检查旁边的复选框。CtrlAlt0S

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

  

• 您还可以通过按 来运行脚本。CtrlShiftF10

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

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

如果npm工具窗口还没有打开，请打开它

• 选择需要的在项目工具窗口中打开文件，或在编辑器中打开它，然后从上下文菜单中选择“显示 npm 脚本” 。

  

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

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

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

2. 如果您有其他package.json文件，请单击“选择 package.json” ，然后在打开的对话框中选择所需的package.json文件。IntelliJ IDEA 添加一个新节点，其标题上包含所选package.json文件的路径，并在新节点下构建脚本树。

动图

重新构建一棵树

• 切换到需要的节点，点击工具栏上的 。

  

  动图

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

• 单击工具栏上的 ，从菜单中选择“排序依据” ，然后选择“名称”。

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

  

  动图

运行一个脚本

• 双击该脚本。

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

动图

调试一个脚本

• 在树中选择脚本，然后从上下文菜单中选择“调试 <script_name>” 。

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

动图

运行或调试多个脚本

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

  

创建 NPM 运行/调试配置

1. 转到“运行”| 编辑配置。或者，从工具栏的列表中选择编辑配置。

   

2. 在打开的“编辑配置”对话框中，单击工具栏上的“添加”按钮 ( )，然后从列表中选择npm 。运行/调试配置：npm 对话框打开。

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

4. 指定要使用的 Node.js 解释器。

   如果您选择项目别名，IntelliJ IDEA 将自动使用Node.js页面上的节点解释器字段中的项目默认解释器。在大多数情况下，IntelliJ IDEA 会检测项目默认解释器并填充该字段本身。

   您还可以选择另一个已配置的本地或远程解释器，或者单击并配置一个新解释器。

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

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

6. 如果您在 Docker 容器中使用远程 Node.js 解释器，请检查Docker 容器设置字段中的端口和卷绑定值。

   

   通过 Docker和配置远程 Node.js 解释器了解更多关于npm、pnpm 和 YARN 的信息。

运行并调试您的脚本

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

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

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

1. 按两次或单击导航栏。将打开“运行任何内容”弹出窗口。Ctrl

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

   

   要在运行工具窗口中查看命令输出，请按，要在调试工具窗口中显示输出，请按。CtrlEnterShiftEnter

   

   动图

1. 在“设置”对话框 ( ) 中，转至“工具”|“ 启动任务。CtrlAlt0S

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

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

   如果项目中没有可用的配置，请单击并选择编辑配置。然后在打开的运行/调试配置页面上使用所需的设置定义配置。当您保存新配置时，它会自动添加到启动任务列表中。

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

2. 在打开的对话框中，单击“启动前”区域，然后从列表中选择“运行 npm 脚本” 。

3. 在打开的NPM 脚本对话框中，指定npm run/debug 配置设置。