Meteor全棧框架

Meteor

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

Meteor是一個(gè)全?？蚣埽试S您在客戶端和服務(wù)器端使用JavaScript。IntelliJ IDEA與Meteor集成，因此您可以在IDE內(nèi)部使用它。IntelliJ IDEA中的Meteor支持包括：

• 通過檢測.meteor文件夾并從項(xiàng)目中排除.meteor/local文件夾來自動識別Meteor項(xiàng)目。有關(guān)詳細(xì)信息， 請參閱下文的“隱藏排除文件”。
• 將預(yù)定義的Meteor庫自動附加到項(xiàng)目。這樣可以啟用語法突出顯示，解析引用和代碼完成。
• 通過Handlebars支持Spacebars，完成if和each指令。IntelliJ IDEA識別Spacebars模板，但副作用是使用Handlebars/Moustache圖標(biāo)標(biāo)記Meteor項(xiàng)目中的HTML文件。IntelliJ IDEA通過轉(zhuǎn)到Declaration（Ctrl+B）提供JavaScript源代碼和模板之間的導(dǎo)航。
  
• 用于在一個(gè)調(diào)試會話中調(diào)試客戶端和服務(wù)器端代碼的專用復(fù)雜Meteor運(yùn)行/調(diào)試配置，請參閱下文的“調(diào)試Meteor應(yīng)用程序”。

在你開始之前

按照插件管理中的說明在插件頁面上安裝并啟用Meteor和Handlebars/Moustache存儲庫插件 。

安裝Meteor

安裝過程取決于您使用的操作系統(tǒng)。從Meteor官方網(wǎng)站了解更多信息。

在Windows上安裝Meteor：

• 在Meteor官方網(wǎng)站下載LaunchMeteor.exe安裝程序。

在macOS或Linux上安裝Meteor

• 打開嵌入式終端（查看|工具窗口|終端，或使用Alt+F12）并在命令提示符下輸入：$ curl https://install.meteor.com | /bin/sh。

注意：需要macOS 10.6或更高版本。

創(chuàng)建一個(gè)新的Meteor應(yīng)用程序

如果您還沒有應(yīng)用程序，可以從Meteor樣板模板生成具有Meteor特定結(jié)構(gòu)的IntelliJ IDEA項(xiàng)目?；蛘撸瑒?chuàng)建一個(gè)空的IntelliJ IDEA項(xiàng)目并在其中配置Meteor支持，如下面的“開始使用現(xiàn)有的Meteor應(yīng)用程序”中所述。

從樣板模板創(chuàng)建Meteor項(xiàng)目

1. 在主菜單上選擇：文件|新建|項(xiàng)目，或單擊歡迎屏幕上的“新建項(xiàng)目”按鈕。
2. 在“項(xiàng)目類別和選項(xiàng)”對話框（“新建項(xiàng)目”向?qū)У牡谝豁摚┲?，在左?cè)窗格中選擇“靜態(tài)Web”。
3. 在右側(cè)窗格中，選擇Meteor App，然后單擊“下一步”。
4. 在向?qū)У牡诙撋希?/li>
   1. 指定項(xiàng)目名稱和要在其中創(chuàng)建的文件夾。
   2. 指定Meteor可執(zhí)行文件的位置（請參閱上文中的“安裝Meteor”）。
   3. 從“模板”下拉列表中，選擇要生成的樣本。要生成基本項(xiàng)目結(jié)構(gòu)，請選擇“默認(rèn)”選項(xiàng)。

創(chuàng)建一個(gè)空的IntelliJ IDEA項(xiàng)目

1. 在主菜單上選擇：文件|新建|項(xiàng)目，或單擊歡迎屏幕上的“新建項(xiàng)目”按鈕。
2. 在“項(xiàng)目類別和選項(xiàng)”對話框（“新建項(xiàng)目”向?qū)У牡谝豁摚┲?，在左?cè)窗格中選擇“靜態(tài)Web ”。
3. 在右側(cè)窗格中，再次選擇Static Web，然后單擊“下一步”。
4. 在向?qū)У牡诙撋?，指定?xiàng)目文件夾和名稱，然后單擊“完成”。

開始使用現(xiàn)有的Meteor應(yīng)用程序

如果您要繼續(xù)開發(fā)現(xiàn)有的Meteor應(yīng)用程序，請?jiān)贗ntelliJ IDEA中打開它，在其中配置Meteor，并按照下面的“下載其他Meteor軟件包”中所述下載所需的項(xiàng)。

打開計(jì)算機(jī)上已有的應(yīng)用程序源

• 單擊“歡迎”屏幕上的“打開”，或在主菜單上選擇：文件|打開。在打開的對話框中，選擇存儲源的文件夾。

從版本控制中檢出應(yīng)用程序源

1. 單擊“歡迎”屏幕上的“從版本控制中檢出”，或從主菜單上選擇：VCS|從版本控制中檢出。
2. 從列表中選擇您的版本控制系統(tǒng)。
3. 在打開的特定于VCS的對話框中，輸入您的憑據(jù)和存儲庫以檢出應(yīng)用程序源。

在現(xiàn)有項(xiàng)目中配置Meteor支持

1. 在“設(shè)置/首選項(xiàng)”對話框（Ctrl+Alt+S）中，單擊“語言和框架”下的“JavaScript” ，然后選擇“Meteor”。將打開該“Meteor”頁面。
2. 指定Meteor可執(zhí)行文件的路徑。如果您遵循標(biāo)準(zhǔn)安裝過程，IntelliJ IDEA會自動檢測文件。
3. 要使.meteor/local文件夾及其內(nèi)容參與索引，請清除“打開項(xiàng)目時(shí)自動排除‘.meteor / local’目錄”復(fù)選框。有關(guān)詳細(xì)信息，請參閱下面“隱藏排除文件”。
4. 確保選中“自動導(dǎo)入Meteor包作為外部庫”復(fù)選框。
   • 選中該復(fù)選框后，IntelliJ IDEA會自動從meteor/packages文件中導(dǎo)入外部包。因此，IntelliJ IDEA提供全范圍編碼幫助：解析對Meteor內(nèi)置函數(shù)的引用，例如，check(true)，以及對第三方軟件包的函數(shù)的引用，提供正確的語法和錯(cuò)誤突出顯示，支持使用源映射進(jìn)行調(diào)試等。
   • 清除此復(fù)選框后，IntelliJ IDEA不會自動從meteor/packages文件導(dǎo)入外部包。結(jié)果，沒有提供編碼輔助。要改善這種情況，請?jiān)诰庉嬈髦写蜷_該meteor/packages文件，然后單擊“將包導(dǎo)入為庫”鏈接或運(yùn)行該meteor --update命令。
5. 確保IntelliJ IDEA已將Meteor庫附加到項(xiàng)目中。
   在“設(shè)置/首選項(xiàng)”對話框（Ctrl+Alt+S）中，單擊“語言和框架”下的“JavaScript” ，然后選擇“庫”。在打開的“JavaScript. Libraries”頁面，確保選中“庫”列表中與Meteor項(xiàng)目庫相鄰的復(fù)選框。
   

導(dǎo)入Meteor包

除了預(yù)定義的Meteor庫以確保基本的Meteor特定編碼輔助之外，您還可以下載.meteor/local/packages文件中定義的其他軟件包。

下載其他Meteor軟件包

1. 在編輯器中打開.meteor/local/packages文件。
2. 單擊屏幕右上角的Import Meteor Packages鏈接。
3. 在打開的對話框中，根據(jù)要在項(xiàng)目中開發(fā)的應(yīng)用程序的類型指定要下載的包。
   • 客戶端
   • 服務(wù)器
   • Cordova：選擇此選項(xiàng)可導(dǎo)入支持iOS和Android Meteor應(yīng)用程序開發(fā)的軟件包，有關(guān)詳細(xì)信息，請參閱Meteor Cordova Phonegap Integration。

IntelliJ IDEA自動標(biāo)記.meteor / local文件夾，用于存儲已經(jīng)構(gòu)建的應(yīng)用程序，排除但仍顯示在項(xiàng)目樹中。

隱藏.meteor/local文件夾

• 單擊“項(xiàng)目”工具窗口的工具欄上的按鈕，然后刪除“顯示排除的文件”選項(xiàng)旁邊的勾選。

注意：標(biāo)記為已排除的文件夾和文件不會在代碼完成中使用。

運(yùn)行Meteor應(yīng)用程序

IntelliJ IDEA根據(jù)Meteor類型的運(yùn)行配置運(yùn)行Meteor應(yīng)用程序。如果您從樣板模板創(chuàng)建了應(yīng)用程序，IntelliJ IDEA會為您生成Meteor運(yùn)行配置。

創(chuàng)建Meteor運(yùn)行配置

1. 在主菜單上，選擇：運(yùn)行|編輯配置，單擊，并從列表中選擇Meteor。將打開“運(yùn)行/調(diào)試配置：Meteor”。
2. 在“配置”選項(xiàng)卡中，根據(jù)安裝指定Meteor可執(zhí)行文件的路徑（請參閱上文中的“安裝Meteor”）。
3. 指定存儲要運(yùn)行的應(yīng)用程序文件的文件夾。此文件夾必須在根目錄中有一個(gè)子文件夾.meteor，以便IntelliJ IDEA將您的應(yīng)用程序識別為Meteor項(xiàng)目。默認(rèn)情況下，工作目錄是項(xiàng)目根文件夾。

提示：從技術(shù)上講，IntelliJ IDEA為服務(wù)器端和客戶端代碼創(chuàng)建單獨(dú)的運(yùn)行配置，但您可以在一個(gè)專用的Meteor運(yùn)行配置中指定所有設(shè)置。

可選

1. 在Program Arguments字段中，指定在啟動時(shí)要傳遞給可執(zhí)行文件的命令行附加參數(shù)（如果適用）。這些可以是，例如，--dev，--test，或--prod以指示應(yīng)用程序是否正在運(yùn)行（開發(fā)，測試，或生產(chǎn)環(huán)境中），以便在啟動時(shí)加載不同的資源。
2. 默認(rèn)情況下，IntelliJ IDEA在“運(yùn)行”工具窗口中顯示應(yīng)用程序輸出。要查看客戶端代碼執(zhí)行的結(jié)果，請?jiān)凇盀g覽器/實(shí)時(shí)編輯”選項(xiàng)卡中選擇“啟動后”復(fù)選框，然后從下拉列表中選擇要打開的瀏覽器。在下面的文本框中，指定用于打開應(yīng)用程序的URL地址。默認(rèn)值為：http://localhost:3000。

運(yùn)行Meteor應(yīng)用程序

1. 從主工具欄的列表中選擇所需的運(yùn)行配置，然后在主菜單上選擇：運(yùn)行|運(yùn)行<配置名稱>（Run | Run <configuration name>），或單擊“運(yùn)行”（）。
2. 如果您將瀏覽器配置為在應(yīng)用程序啟動時(shí)打開，請?jiān)凇斑\(yùn)行”工具窗口或?yàn)g覽器中查看應(yīng)用程序輸出，如上所述。

調(diào)試Meteor應(yīng)用程序

使用IntelliJ IDEA，您可以在一個(gè)調(diào)試會話中調(diào)試Meteor JavaScript代碼的客戶端和服務(wù)器端。僅通過專用的Meteor運(yùn)行配置啟動調(diào)試會話。

從技術(shù)上講，實(shí)現(xiàn)不同應(yīng)用程序的幾個(gè)Meteor項(xiàng)目可以組合在一個(gè)IntelliJ IDEA項(xiàng)目中。要獨(dú)立運(yùn)行和調(diào)試這些應(yīng)用程序，請使用相關(guān)工作目錄為每個(gè)應(yīng)用程序創(chuàng)建單獨(dú)的運(yùn)行配置。為避免端口沖突，這些運(yùn)行配置應(yīng)使用不同的端口。在“程序參數(shù)”字段中，以格式--port=<port_number>為每個(gè)運(yùn)行配置指定單獨(dú)的端口。

提示：調(diào)試器還會在存儲在/packages文件夾中的源中設(shè)置的斷點(diǎn)處暫停?？蛻舳撕头?wù)器端代碼都支持此功能。

1. 必要時(shí)在代碼中設(shè)置斷點(diǎn)。
2. 如上所述，創(chuàng)建Meteor運(yùn)行/調(diào)試配置。在“瀏覽/實(shí)時(shí)編輯”選項(xiàng)卡中，選擇“啟動后”復(fù)選框，從列表中選擇“Chrome”，然后選中“使用JavaScript調(diào)試器”復(fù)選框。
3. 要啟動調(diào)試會話，請從主工具欄的列表中選擇所需的調(diào)試配置，然后單擊列表旁邊的：，或選擇：運(yùn)行|運(yùn)行<配置名稱>（Run | Run <configuration name>）?！罢{(diào)試”工具窗口將打開，并且顯示出了兩個(gè)選項(xiàng)卡：一個(gè)用于調(diào)試服務(wù)器端代碼，標(biāo)記是 ，而另一個(gè)用于調(diào)試客戶端代碼，標(biāo)記是。
4. 瀏覽暫停的程序并逐步完成該程序。

（可選）按照下面的描述動態(tài)預(yù)覽對應(yīng)用程序的更改。

預(yù)覽瀏覽器中的更改

在調(diào)試會話期間，您可以動態(tài)預(yù)覽對HTML，CSS或JavaScript代碼的更改。您編輯的頁面的實(shí)時(shí)內(nèi)容顯示在“調(diào)試”工具窗口的“Elements”選項(xiàng)卡中 。更新策略取決于您正在編輯的應(yīng)用程序的哪個(gè)部分。

要預(yù)覽客戶端代碼的更改，請執(zhí)行以下操作之一：

• 切換到“<Configuration name> JavaScript（）”選項(xiàng)卡，然后單擊工具欄上的。
• 通過選擇Meteor頁面上的Enable Meteor Hot code push復(fù)選框配置自動上傳更新。從Meteor官方網(wǎng)站了解更多信息。 

要預(yù)覽服務(wù)器端代碼的更改，請執(zhí)行以下操作之一：

• 切換到“<Configuration name>（）”選項(xiàng)卡，然后單擊工具欄上的。
• 使用實(shí)時(shí)編輯功能配置自動上傳，如HTML，CSS和JavaScript中的實(shí)時(shí)編輯中所述。建議您在“實(shí)時(shí)編輯”頁面上選中“Restart if hotswap fails”復(fù)選框，則IntelliJ IDEA將在自動上傳失敗時(shí)嘗試重新啟動服務(wù)器。

提示：如果自動上傳仍然失敗，請通過單擊工具欄的 重新啟動應(yīng)用程序 。