JSRUN 用代码说话

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图标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项目

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

创建一个空的IntelliJ IDEA项目

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

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

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

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

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

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

单击“欢迎”屏幕上的“从版本控制中检出”,或从主菜单上选择:VCS|从版本控制中检出。

从列表中选择您的版本控制系统。

在打开的特定于VCS的对话框中,输入您的凭据和存储库以检出应用程序源。

在现有项目中配置Meteor支持

在“设置/首选项”对话框(Ctrl+Alt+S)中,单击“语言和框架”下的“JavaScript” ,然后选择“Meteor”。将打开该“Meteor”页面。

指定Meteor可执行文件的路径。如果您遵循标准安装过程,IntelliJ IDEA会自动检测文件。

要使.meteor/local文件夹及其内容参与索引,请清除“打开项目时自动排除‘.meteor / local’目录”复选框。有关详细信息,请参阅下面“隐藏排除文件”。

确保选中“自动导入Meteor包作为外部库”复选框。

选中该复选框后,IntelliJ IDEA会自动从meteor/packages文件中导入外部包。

因此,IntelliJ IDEA提供全范围编码帮助:解析对Meteor内置函数的引用,例如,check(true),以及对第三方软件包的函数的引用,提供正确的语法和错误突出显示,支持使用源映射进行调试等。

清除此复选框后,IntelliJ IDEA不会自动从meteor/packages文件导入外部包。结果,没有提供编码辅助。要改善这种情况,请在编辑器中打开该meteor/packages文件,然后单击“将包导入为库”链接或运行该meteor --update命令。

确保IntelliJ IDEA已将Meteor库附加到项目中。
在“设置/首选项”对话框(Ctrl+Alt+S)中,单击“语言和框架”下的“JavaScript” ,然后选择“库”。在打开的“JavaScript. Libraries”页面,确保选中“库”列表中与Meteor项目库相邻的复选框。

导入Meteor包

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

下载其他Meteor软件包

在编辑器中打开.meteor/local/packages文件。

单击屏幕右上角的Import Meteor Packages链接。

在打开的对话框中,根据要在项目中开发的应用程序的类型指定要下载的包。

客户端

服务器

Cordova:选择此选项可导入支持iOS和Android Meteor应用程序开发的软件包,有关详细信息,请参阅Meteor Cordova Phonegap Integration

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

隐藏.meteor/local文件夹

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

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

运行Meteor应用程序

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

创建Meteor运行配置

在主菜单上,选择:运行|编辑配置,单击图标一般添加svg,并从列表中选择Meteor。将打开“运行/调试配置:Meteor”。

在“配置”选项卡中,根据安装指定Meteor可执行文件的路径(请参阅上文中的“安装Meteor”)。

指定存储要运行的应用程序文件的文件夹。此文件夹必须在根目录中有一个子文件夹.meteor,以便IntelliJ IDEA将您的应用程序识别为Meteor项目。默认情况下,工作目录是项目根文件夹。

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

可选

在Program Arguments字段中,指定在启动时要传递给可执行文件的命令行附加参数(如果适用)。这些可以是,例如,--dev,--test,或--prod以指示应用程序是否正在运行(开发,测试,或生产环境中),以便在启动时加载不同的资源。

默认情况下,IntelliJ IDEA在“运行”工具窗口中显示应用程序输出。要查看客户端代码执行的结果,请在“浏览器/实时编辑”选项卡中选择“启动后”复选框,然后从下拉列表中选择要打开的浏览器。在下面的文本框中,指定用于打开应用程序的URL地址。默认值为:http://localhost:3000。

运行Meteor应用程序

从主工具栏的列表中选择所需的运行配置,然后在主菜单上选择:运行|运行<配置名称>(Run | Run <configuration name>),或单击“运行”(icons toolwindows toolWindowRun svg)。

如果您将浏览器配置为在应用程序启动时打开,请在“运行”工具窗口或浏览器中查看应用程序输出,如上所述。

调试Meteor应用程序

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

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

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

必要时在代码中设置断点。

如上所述,创建Meteor运行/调试配置。在“浏览/实时编辑”选项卡中,选择“启动后”复选框,从列表中选择“Chrome”,然后选中“使用JavaScript调试器”复选框。

要启动调试会话,请从主工具栏的列表中选择所需的调试配置,然后单击列表旁边的:图标动作startDebugger svg,或选择:运行|运行<配置名称>(Run | Run <configuration name>)。

“调试”工具窗口将打开,并且显示出了两个选项卡:一个用于调试服务器端代码,标记是图标流星 ,而另一个用于调试客户端代码,标记是图标javascript

浏览暂停的程序并逐步完成该程序。

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

预览浏览器中的更改

在调试会话期间,您可以动态预览对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 重新启动应用程序 。

JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
支付宝
9.99
无法付款,请点击这里
金额: 0
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟