Meteor全栈框架

Meteor

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

Meteor是一个全栈框架，允许您在客户端和服务器端使用JavaScript。IntelliJ IDEA与Meteor集成，因此您可以在IDE内部使用它。IntelliJ IDEA中的Meteor支持包括：

• 通过检测.meteor文件夹并从项目中排除.meteor/local文件夹来自动识别Meteor项目。有关详细信息， 请参阅下文的“隐藏排除文件”。
• 将预定义的Meteor库自动附加到项目。这样可以启用语法突出显示，解析引用和代码完成。
• 通过Handlebars支持Spacebars，完成if和each指令。IntelliJ IDEA识别Spacebars模板，但副作用是使用Handlebars/Moustache图标标记Meteor项目中的HTML文件。IntelliJ IDEA通过转到Declaration（Ctrl+B）提供JavaScript源代码和模板之间的导航。
  
• 用于在一个调试会话中调试客户端和服务器端代码的专用复杂Meteor运行/调试配置，请参阅下文的“调试Meteor应用程序”。

在你开始之前

按照插件管理中的说明在插件页面上安装并启用Meteor和Handlebars/Moustache存储库插件 。

安装Meteor

安装过程取决于您使用的操作系统。从Meteor官方网站了解更多信息。

在Windows上安装Meteor：

• 在Meteor官方网站下载LaunchMeteor.exe安装程序。

在macOS或Linux上安装Meteor

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

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

创建一个新的Meteor应用程序

如果您还没有应用程序，可以从Meteor样板模板生成具有Meteor特定结构的IntelliJ IDEA项目。或者，创建一个空的IntelliJ IDEA项目并在其中配置Meteor支持，如下面的“开始使用现有的Meteor应用程序”中所述。

从样板模板创建Meteor项目

1. 在主菜单上选择：文件|新建|项目，或单击欢迎屏幕上的“新建项目”按钮。
2. 在“项目类别和选项”对话框（“新建项目”向导的第一页）中，在左侧窗格中选择“静态Web”。
3. 在右侧窗格中，选择Meteor App，然后单击“下一步”。
4. 在向导的第二页上：
1. 指定项目名称和要在其中创建的文件夹。
2. 指定Meteor可执行文件的位置（请参阅上文中的“安装Meteor”）。
3. 从“模板”下拉列表中，选择要生成的样本。要生成基本项目结构，请选择“默认”选项。

创建一个空的IntelliJ IDEA项目

1. 在主菜单上选择：文件|新建|项目，或单击欢迎屏幕上的“新建项目”按钮。
2. 在“项目类别和选项”对话框（“新建项目”向导的第一页）中，在左侧窗格中选择“静态Web ”。
3. 在右侧窗格中，再次选择Static Web，然后单击“下一步”。
4. 在向导的第二页上，指定项目文件夹和名称，然后单击“完成”。

开始使用现有的Meteor应用程序

如果您要继续开发现有的Meteor应用程序，请在IntelliJ IDEA中打开它，在其中配置Meteor，并按照下面的“下载其他Meteor软件包”中所述下载所需的项。

打开计算机上已有的应用程序源

• 单击“欢迎”屏幕上的“打开”，或在主菜单上选择：文件|打开。在打开的对话框中，选择存储源的文件夹。

从版本控制中检出应用程序源

1. 单击“欢迎”屏幕上的“从版本控制中检出”，或从主菜单上选择：VCS|从版本控制中检出。
2. 从列表中选择您的版本控制系统。
3. 在打开的特定于VCS的对话框中，输入您的凭据和存储库以检出应用程序源。

在现有项目中配置Meteor支持

1. 在“设置/首选项”对话框（Ctrl+Alt+S）中，单击“语言和框架”下的“JavaScript” ，然后选择“Meteor”。将打开该“Meteor”页面。
2. 指定Meteor可执行文件的路径。如果您遵循标准安装过程，IntelliJ IDEA会自动检测文件。
3. 要使.meteor/local文件夹及其内容参与索引，请清除“打开项目时自动排除‘.meteor / local’目录”复选框。有关详细信息，请参阅下面“隐藏排除文件”。
4. 确保选中“自动导入Meteor包作为外部库”复选框。
   • 选中该复选框后，IntelliJ IDEA会自动从meteor/packages文件中导入外部包。因此，IntelliJ IDEA提供全范围编码帮助：解析对Meteor内置函数的引用，例如，check(true)，以及对第三方软件包的函数的引用，提供正确的语法和错误突出显示，支持使用源映射进行调试等。
   • 清除此复选框后，IntelliJ IDEA不会自动从meteor/packages文件导入外部包。结果，没有提供编码辅助。要改善这种情况，请在编辑器中打开该meteor/packages文件，然后单击“将包导入为库”链接或运行该meteor --update命令。
5. 确保IntelliJ IDEA已将Meteor库附加到项目中。
   在“设置/首选项”对话框（Ctrl+Alt+S）中，单击“语言和框架”下的“JavaScript” ，然后选择“库”。在打开的“JavaScript. Libraries”页面，确保选中“库”列表中与Meteor项目库相邻的复选框。
   

导入Meteor包

除了预定义的Meteor库以确保基本的Meteor特定编码辅助之外，您还可以下载.meteor/local/packages文件中定义的其他软件包。

下载其他Meteor软件包

1. 在编辑器中打开.meteor/local/packages文件。
2. 单击屏幕右上角的Import Meteor Packages链接。
3. 在打开的对话框中，根据要在项目中开发的应用程序的类型指定要下载的包。
   • 客户端
   • 服务器
   • Cordova：选择此选项可导入支持iOS和Android Meteor应用程序开发的软件包，有关详细信息，请参阅Meteor Cordova Phonegap Integration。

IntelliJ IDEA自动标记.meteor / local文件夹，用于存储已经构建的应用程序，排除但仍显示在项目树中。

隐藏.meteor/local文件夹

• 单击“项目”工具窗口的工具栏上的按钮，然后删除“显示排除的文件”选项旁边的勾选。

注意：标记为已排除的文件夹和文件不会在代码完成中使用。

运行Meteor应用程序

IntelliJ IDEA根据Meteor类型的运行配置运行Meteor应用程序。如果您从样板模板创建了应用程序，IntelliJ IDEA会为您生成Meteor运行配置。

创建Meteor运行配置

1. 在主菜单上，选择：运行|编辑配置，单击，并从列表中选择Meteor。将打开“运行/调试配置：Meteor”。
2. 在“配置”选项卡中，根据安装指定Meteor可执行文件的路径（请参阅上文中的“安装Meteor”）。
3. 指定存储要运行的应用程序文件的文件夹。此文件夹必须在根目录中有一个子文件夹.meteor，以便IntelliJ IDEA将您的应用程序识别为Meteor项目。默认情况下，工作目录是项目根文件夹。

提示：从技术上讲，IntelliJ IDEA为服务器端和客户端代码创建单独的运行配置，但您可以在一个专用的Meteor运行配置中指定所有设置。

可选

1. 在Program Arguments字段中，指定在启动时要传递给可执行文件的命令行附加参数（如果适用）。这些可以是，例如，--dev，--test，或--prod以指示应用程序是否正在运行（开发，测试，或生产环境中），以便在启动时加载不同的资源。
2. 默认情况下，IntelliJ IDEA在“运行”工具窗口中显示应用程序输出。要查看客户端代码执行的结果，请在“浏览器/实时编辑”选项卡中选择“启动后”复选框，然后从下拉列表中选择要打开的浏览器。在下面的文本框中，指定用于打开应用程序的URL地址。默认值为：http://localhost:3000。

运行Meteor应用程序

1. 从主工具栏的列表中选择所需的运行配置，然后在主菜单上选择：运行|运行<配置名称>（Run | Run <configuration name>），或单击“运行”（）。
2. 如果您将浏览器配置为在应用程序启动时打开，请在“运行”工具窗口或浏览器中查看应用程序输出，如上所述。

调试Meteor应用程序

使用IntelliJ IDEA，您可以在一个调试会话中调试Meteor JavaScript代码的客户端和服务器端。仅通过专用的Meteor运行配置启动调试会话。

从技术上讲，实现不同应用程序的几个Meteor项目可以组合在一个IntelliJ IDEA项目中。要独立运行和调试这些应用程序，请使用相关工作目录为每个应用程序创建单独的运行配置。为避免端口冲突，这些运行配置应使用不同的端口。在“程序参数”字段中，以格式--port=<port_number>为每个运行配置指定单独的端口。

提示：调试器还会在存储在/packages文件夹中的源中设置的断点处暂停。客户端和服务器端代码都支持此功能。

1. 必要时在代码中设置断点。
2. 如上所述，创建Meteor运行/调试配置。在“浏览/实时编辑”选项卡中，选择“启动后”复选框，从列表中选择“Chrome”，然后选中“使用JavaScript调试器”复选框。
3. 要启动调试会话，请从主工具栏的列表中选择所需的调试配置，然后单击列表旁边的：，或选择：运行|运行<配置名称>（Run | Run <configuration name>）。“调试”工具窗口将打开，并且显示出了两个选项卡：一个用于调试服务器端代码，标记是 ，而另一个用于调试客户端代码，标记是。
4. 浏览暂停的程序并逐步完成该程序。

（可选）按照下面的描述动态预览对应用程序的更改。

预览浏览器中的更改

在调试会话期间，您可以动态预览对HTML，CSS或JavaScript代码的更改。您编辑的页面的实时内容显示在“调试”工具窗口的“Elements”选项卡中 。更新策略取决于您正在编辑的应用程序的哪个部分。

要预览客户端代码的更改，请执行以下操作之一：

• 切换到“<Configuration name> JavaScript（）”选项卡，然后单击工具栏上的。
• 通过选择Meteor页面上的Enable Meteor Hot code push复选框配置自动上传更新。从Meteor官方网站了解更多信息。 

要预览服务器端代码的更改，请执行以下操作之一：

• 切换到“<Configuration name>（）”选项卡，然后单击工具栏上的。
• 使用实时编辑功能配置自动上传，如HTML，CSS和JavaScript中的实时编辑中所述。建议您在“实时编辑”页面上选中“Restart if hotswap fails”复选框，则IntelliJ IDEA将在自动上传失败时尝试重新启动服务器。

提示：如果自动上传仍然失败，请通过单击工具栏的 重新启动应用程序 。