IntelliJ IDEA：運(yùn)行和調(diào)試腳本

運(yùn)行和調(diào)試腳本

您可以根據(jù)專用的運(yùn)行配置從編輯器中的package.json文件、專用的NPM工具窗口中的腳本樹，啟動npm或Yarn腳本，或者自動啟動npm或Yarn腳本作為啟動或啟動前任務(wù)。

腳本執(zhí)行的結(jié)果顯示在“運(yùn)行工具”窗口中。工具窗口顯示npm或Yarn腳本輸出，報告發(fā)生的錯誤，列出尚未找到的包或插件等。最后執(zhí)行的腳本的名稱顯示在工具窗口的標(biāo)題欄上。

在腳本調(diào)試會話期間，IntelliJ IDEA打開調(diào)試工具窗口，您可以在其中單步執(zhí)行程序，停止和恢復(fù)程序執(zhí)行，暫停時檢查它，查看實(shí)際的HTML DOM等。

啟動調(diào)試腳本：

• 將$NODE_DEBUG_OPTION添加到package.json文件中的定義，例如：

  {
  "name": "application-name",
  "version": "0.0.1",
  "scripts": {
      "main": "node $NODE_DEBUG_OPTION ./app-compiled.js"
      }
  }

從package.json運(yùn)行和調(diào)試腳本

IntelliJ IDEA允許您從package.json文件中快速啟動單個腳本。要運(yùn)行或調(diào)試多個腳本，請使用運(yùn)行配置或npm工具窗口。

• 在編輯器中打開package.json文件，單擊腳本旁邊的裝訂線中的 ，然后在上下文菜單中選擇“運(yùn)行<script_name>”或“調(diào)試<script_name>”。（您也可以按下Ctrl+Shift+F10運(yùn)行腳本。）
  

  

從npm工具窗口運(yùn)行和調(diào)試腳本

在“項(xiàng)目”工具窗口中選擇package.json文件或在編輯器中打開文件并在上下文菜單中選擇“顯示npm腳本”時，將打開工具窗口。一旦調(diào)用npm或Yarn，它就會開始構(gòu)建一個在調(diào)用它的package.json文件的scripts屬性中定義的腳本樹。如果項(xiàng)目中有多個package.json文件，則可以為每個文件構(gòu)建單獨(dú)的腳本樹，并運(yùn)行腳本而不刪除以前構(gòu)建的樹。每棵樹都顯示在一個單獨(dú)的節(jié)點(diǎn)下。

如果尚未打開npm工具窗口，則打開它：

• 在“項(xiàng)目”工具窗口中選擇所需的package.json文件，或在編輯器中將其打開，然后在上下文菜單中選擇“顯示npm腳本”。將打開npm工具窗口，其中顯示根據(jù)所選或已經(jīng)打開的package.json文件構(gòu)建的腳本樹。

在已打開的npm工具窗口中構(gòu)建腳本樹：

• 在npm工具窗口中，單擊工具欄上的，然后從列表中選擇所需的package.json文件。默認(rèn)情況下，IntelliJ IDEA會在項(xiàng)目的根目錄中顯示package.json文件。

• 如果您有其他package.json文件，請單擊“選擇package.json”，然后在打開的對話框中選擇所需的package.json文件。IntelliJ IDEA在其標(biāo)題上添加一個新節(jié)點(diǎn)，其中包含所選package.json文件的路徑，并在新節(jié)點(diǎn)下構(gòu)建一個腳本樹。

重建一顆樹：

• 切換到所需的節(jié)點(diǎn)，然后單擊工具欄上的。

按照名稱對樹中的腳本進(jìn)行排序：

• 單擊工具欄上的，選擇菜單上的“排序依據(jù)”，然后選擇“名稱”。 

• 默認(rèn)情況下，樹按照在package.json中定義的順序顯示腳本。

運(yùn)行一個腳本：

• 雙擊腳本。

• 在樹中選擇腳本，然后按下Enter或在上下文菜單中選擇“運(yùn)行<腳本名稱> ”。

調(diào)試一個腳本：

• 在樹中選擇腳本，然后在上下文菜單中選擇“調(diào)試<腳本名稱>”。

運(yùn)行或調(diào)試多個腳本：

• 使用多選模式：按下Shift（對于相鄰項(xiàng)）或Ctrl （對于非相鄰項(xiàng)）鍵并選擇所需腳本，然后在選擇的上下文菜單中選擇“運(yùn)行”或“調(diào)試”。

通過運(yùn)行配置運(yùn)行腳本

當(dāng)您從編輯器或npm工具窗口運(yùn)行或調(diào)試腳本時，IntelliJ IDEA會自動創(chuàng)建臨時運(yùn)行配置。除了使用它們，您還可以創(chuàng)建和啟動自己的npm運(yùn)行配置。

1. 在主菜單上選擇：運(yùn)行|編輯配置。

2. 單擊工具欄上的，然后從彈出列表中選擇npm。該“運(yùn)行/調(diào)試配置：NPM”對話框打開。

3. 指定要執(zhí)行的CLI命令，要運(yùn)行的腳本（使用空格作為分隔符）以及定義這些腳本的package.json文件的位置。（可選）鍵入用于執(zhí)行腳本的命令行參數(shù)。

4. 指定要使用的Node.js解釋器。這可能是一個本地Node.js解釋器或適用在Linux的Windows子系統(tǒng)的Node.js。

   （可選）指定Node.js特定的選項(xiàng)參數(shù)以及要傳遞給Node.js的環(huán)境變量。

5. 指定要使用的包管理器。如果選擇Project別名，IntelliJ IDEA將使用Node.js頁面中的默認(rèn)項(xiàng)目包管理器。您還可以選擇相關(guān)的包別名（npm或yarn），或指定包管理器的自定義安裝的顯式路徑。

6. 從主工具欄的列表中選擇新創(chuàng)建的運(yùn)行配置，然后單擊。輸出顯示在“運(yùn)行”工具窗口中。

在啟動時自動運(yùn)行腳本

如果您有一些定期運(yùn)行的腳本，則可以將相應(yīng)的運(yùn)行配置添加到啟動任務(wù)列表中。任務(wù)將在項(xiàng)目啟動時自動執(zhí)行。

1. 在“設(shè)置/首選項(xiàng)”對話框（Ctrl+Alt+S）中，單擊“工具”下的“啟動任務(wù)”。

2. 在打開的“啟動任務(wù)”頁面上，單擊工具欄上的。

3. 從下拉列表中，選擇所需的npm運(yùn)行配置。配置將添加到列表中。

   如果項(xiàng)目中沒有可用的適用配置，請單擊，并選擇“編輯配置”。然后在打開的“運(yùn)行/調(diào)試配置：NPM”頁面上定義具有所需設(shè)置的配置。保存新配置時，它會自動添加到啟動任務(wù)列表中。

將腳本作為啟動前任務(wù)運(yùn)行

1. 在主菜單上選擇：運(yùn)行|編輯配置，以打開“運(yùn)行/調(diào)試配置對話框”，從列表中選擇所需的配置，或通過單擊并選擇相關(guān)的運(yùn)行配置類型重新創(chuàng)建。

2. 在打開的對話框中，單擊“啟動前”區(qū)域的，然后從下拉列表中選擇“運(yùn)行npm腳本”。

3. 在打開的“NPM腳本”對話框中，指定npm運(yùn)行/調(diào)試配置設(shè)置。