將CoffeeScript編譯為JavaScript

將CoffeeScript編譯為JavaScript

此功能僅在Ultimate版本中受支持。

IntelliJ IDEA支持與coffee-script編譯器的集成。該工具將CoffeeScript代碼轉(zhuǎn)換為JavaScript并創(chuàng)建源映射，以便在CoffeeScript代碼和生成的JavaScript代碼中設(shè)置行之間的對(duì)應(yīng)關(guān)系，否則您的斷點(diǎn)將無(wú)法被識(shí)別并正確處理。要在IntelliJ IDEA中使用編譯器，需要將其配置為File Watcher（文件監(jiān)視程序）。對(duì)于每個(gè)支持的編譯器，IntelliJ IDEA提供了一個(gè)預(yù)定義的File Watcher模板。要在項(xiàng)目中運(yùn)行編譯器，請(qǐng)根據(jù)相關(guān)模板創(chuàng)建項(xiàng)目特定的File Watcher。

在開始此操作之前，你需要有以下的條件：

1. 安裝Node.js運(yùn)行時(shí)環(huán)境并將其配置為本地Node.js解釋器。
2. 如安裝、更新和卸載存儲(chǔ)庫(kù)插件以及啟用和禁用插件中所述，在插件頁(yè)面上安裝并啟用NodeJS和File Watchers存儲(chǔ)庫(kù)插件 。

安裝CoffeeScript

提示：您還可以在Node.js和NPM頁(yè)面上安裝coffeescript包，如NPM和Yarn中所述。

打開內(nèi)置的IntelliJ IDEA終端（Alt+F12），并在命令提示符處鍵入以下命令之一：

• npm install --global coffeescript：用于全局安裝。
• npm install --save-dev coffeescript：將CoffeeScript安裝為開發(fā)依賴項(xiàng)。

創(chuàng)建文件觀察器（File Watcher）

IntelliJ IDEA提供了用于創(chuàng)建所有類型的文件觀察器的通用過程和用戶??界面。唯一的區(qū)別在于您在每種情況下選擇的預(yù)定義模板。

1. 要開始創(chuàng)建File Watcher，請(qǐng)選擇主菜單上的：File |設(shè)置（File | Settings）（對(duì)于Windows和Linux系統(tǒng)）或IntelliJ IDEA|首選項(xiàng)（IntelliJ IDEA | Preferences）（對(duì)于macOS系統(tǒng)）以打開Settings/Preferences對(duì)話框，然后單擊工具節(jié)點(diǎn)下的File Watchers。打開的File Watchers頁(yè)面顯示項(xiàng)目中已配置的File Watcher列表。
2. 單擊添加按鈕 或按Alt+Insert ，然后從彈出列表中選擇CoffeeScript預(yù)定義模板。您的代碼將被翻譯為JavaScript并提供生成的源映射。
3. 在“項(xiàng)目（Program）”文本框中，指定coffee.cmd文件的路徑。手動(dòng)鍵入路徑或單擊“瀏覽”按鈕 ，并在打開的對(duì)話框中選擇文件位置。
4. 按照使用文件查看器頁(yè)面中的說明進(jìn)行操作。

自定義編譯器行為的示例

任何編譯器都是外部的第三方工具。因此，影響編譯器的唯一方法是將參數(shù)傳遞給它，就像您在命令行模式下工作一樣。以下是為CoffeeScript編譯器自定義默認(rèn)輸出位置的兩個(gè)示例。

假設(shè)你有一個(gè)具有以下文件夾結(jié)構(gòu)的項(xiàng)目：

默認(rèn)情況下，生成的文件將存儲(chǔ)在原始文件所在的文件夾中。

您可以更改此默認(rèn)位置并將生成的文件存儲(chǔ)在js文件夾中。此外，您可以將它們存儲(chǔ)在一個(gè)平面列表中，或者安排在重復(fù)app節(jié)點(diǎn)下的原始結(jié)構(gòu)的文件夾結(jié)構(gòu)中。

將所有生成的文件存儲(chǔ)在 "輸出 js" 文件夾中, 而不保留應(yīng)用程序文件夾下的原始文件夾結(jié)構(gòu):

• 要將所有生成的文件存儲(chǔ)在輸出js文件夾中，而不保留app文件夾下的原始文件夾結(jié)構(gòu)：
  1. 在參數(shù)（Arguments）文本框中，輸入：

     --output $ProjectFileDir$\js\ --compile --map $FileName$

  2. 在“要刷新的輸出路徑（Output paths to refresh）”文本框中，鍵入：

     $ProjectFileDir$\js\$FileNameWithoutExtension$.js:$ProjectFileDir$\js\$FileNameWithoutExtension$.map 

     結(jié)果，項(xiàng)目樹看起來如下所示：
     
     
• 要將該app節(jié)點(diǎn)下的原始文件夾結(jié)構(gòu)保留在輸出js文件夾中：
  1. 在參數(shù)（Arguments）文本框中，輸入：

     --output $ProjectFileDir$\js\$FileDirRelativeToProjectRoot$\ --compile --map $FileName$

  2. 在“要刷新的輸出路徑（Output paths to refresh）”文本框中，鍵入：

     $ProjectFileDir$\js\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.js:$ProjectFileDir$\js\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.map

      結(jié)果，項(xiàng)目樹看起來如下所示：
     
     

編譯CoffeeScript代碼

當(dāng)您打開CoffeeScript文件時(shí)，IntelliJ IDEA會(huì)檢查當(dāng)前項(xiàng)目中是否有可用的文件觀察器。如果此文件觀察器已配置但已禁用，IntelliJ IDEA會(huì)顯示一個(gè)彈出窗口，通知您有關(guān)已配置的文件觀察器，并建議啟用它。

如果在當(dāng)前項(xiàng)目中配置并啟用了適用的文件觀察器，則IntelliJ IDEA將在“新觀察器（New Watcher）”對(duì)話框中指定的事件后自動(dòng)啟動(dòng)它。

• 如果選擇“自動(dòng)保存編輯文件以觸發(fā)觀察器（Auto-save edited files to trigger the watcher）”復(fù)選框，則只要對(duì)源代碼進(jìn)行任何更改，就會(huì)調(diào)用文件觀察器。
• 如果“自動(dòng)保存編輯的文件來觸發(fā)觀察者（Auto-save edited files to trigger the watcher）”復(fù)選框被取消勾選，則文件觀察器是在保存時(shí)啟動(dòng)（文件|全部保存（File | Save All），Ctrl+S），或者當(dāng)你從IntelliJ IDEA的移動(dòng)焦點(diǎn)（在幀停用）。

編譯器將生成的輸出存儲(chǔ)在單獨(dú)的文件中。該文件具有源CoffeeScript文件的名稱和擴(kuò)展名，js或者js.map取決于編譯器類型。生成文件的位置在“新觀察器（New Watcher）”對(duì)話框的"要刷新的輸出路徑（Output paths to refresh）"中定義?；诖嗽O(shè)置，IntelliJ IDEA會(huì)檢測(cè)編譯器輸出。但是，在項(xiàng)目樹中，它們顯示在.coffee源文件下，它現(xiàn)在顯示為節(jié)點(diǎn)。 

在不運(yùn)行編譯器的情況下預(yù)覽編譯結(jié)果

IntelliJ IDEA可以對(duì)您的CoffeeScript代碼執(zhí)行靜態(tài)分析，而無(wú)需實(shí)際運(yùn)行編譯器，并將預(yù)測(cè)的編譯輸出顯示在專用的只讀查看器中。

1. 在編輯器中打開所需的CoffeeScript文件，然后右鍵單擊編輯器背景。
2. 在上下文菜單上，選擇：預(yù)覽編譯的CoffeeScript文件（Preview Compiled CoffeeScript File）。預(yù)覽在專用只讀查看器中打開：左側(cè)窗格顯示原始CoffeeScript源代碼，右側(cè)窗格顯示編譯器運(yùn)行時(shí)將生成的JavaScript代碼。