首页 > 解决方案 > 如何在 Haxe 中引用 JavaScript 库

问题描述

我正在阅读有关流体动力学的内容,并遇到了这个很棒的项目。构建完成后,我注意到演示中出现的小选项菜单没有显示。

因此,由于我对 Haxe 完全陌生,我认为添加小 GUI 选项面板将是一个很大的挑战,以尝试让自己熟悉 Haxe。但是,我遇到了第一个障碍,因为在尝试构建位于流体实验之上的 GUI 时出现以下错误,如演示中所示:

未捕获的 ReferenceError:未定义 dat

在项目路由目录中,我有一个src文件夹,然后Main.hx;在函数Main.hx的底部init(),我正在执行以下操作:

import dat.GUI;

function init():Void {
    //other unrelated code goes here

    var gui = new dat.GUI({autoPlace: true});
    //particle count
    var particleCountGUI = gui.add(particles, 'count').name('Particle Count').listen();
}

当我运行程序时,控制台会打印出提到的错误。

我做过的事情:

project.flow路由目录中,我在构建依赖项中引用了 dat(当然还下载了 dat.gui)。

我什至尝试过使用其他框架来构建 GUI,但即使构建成功,我也会在控制台日志中不断收到错误消息。我确实很幸运地添加了一个面板,但不是坐在流体实验的顶部,而是将整个东西向下推,因此面板和流体实验之间有一个空间。

理想情况下,我想重新创建演示中显示的选项面板,但将其改为可滚动列表。但是,我需要先了解为什么我会遇到问题dat

标签: javascripthaxe

解决方案


我能想到的最简单的解决方案是将其添加到init()(假设.js位于项目根目录中):

haxe.macro.Compiler.includeFile("dat.gui.min.js");

includeFile()是直接将文件嵌入到Haxe 生成的.js中(默认在文件顶部)。这足以让 UI 出现在我面前:

另一种方法是向文件添加<script>标签,如此所述。我对流程构建工具不够熟悉,无法知道在这种情况下已经完成,但您必须找到一种方法:index.html

  • 修改index.html模板以包含<script>标签
  • 让它复制min.jsbin/web目录。

所以,是的,这includeFile()绝对是更方便的选择。:)


推荐阅读