Meteor全栈框架

2018-10-10 15:08 更新

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图标fileTypeHandlebars标记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. 在主菜单上,选择:运行|编辑配置,单击图标一般添加svg,并从列表中选择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>),或单击“运行”(icons toolwindows toolWindowRun svg)。
  2. 如果您将浏览器配置为在应用程序启动时打开,请在“运行”工具窗口或浏览器中查看应用程序输出,如上所述。

调试Meteor应用程序

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

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

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

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

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

预览浏览器中的更改

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

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

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

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

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

提示:如果自动上传仍然失败,请通过单击工具栏的图标操作重新运行svg 重新启动应用程序 。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号