Javascript 在Svelte中导入emscripten生成的模块

我正在尝试制作一个包含画布的轻巧组件，它将在内部显示emscripten编译的webgl应用程序。 在传统html中，它需要以下设置：

<script>
  var canv = document.getElementById('canvas');
  var Module = { canvas: canv };
</script>
<script src="index.js"></src>

这基本上是index.js无法看到

模块

——如果我根本不初始化

模块

，则此错误保持不变

我知道我可以用<代码>模块化< /COD>编译器选项（我还没有查看它），但是由于它是WebGL应用程序，我更喜欢让它像传统的HTML一样加载，这样我就可以专注于C++而不需要设置管道。p>

---

正确的做法是什么？

这里有几件事

首先，组件相当于JavaScript模块，这意味着组件中声明的任何变量都是该组件的本地变量。如果您需要

模块

全局可用，则应将其设置在

窗口

：

window.Module={canvas:canv}；

其次，无论何时使用

bind:this

，都需要等待组件实际安装完毕。组件的

中的代码在创建任何DOM之前运行（因为它通常决定创建什么DOM）

在这种情况下，请尝试使用

onMount

：

从“svelte”导入{onMount}；
让canv；
onMount（（）=>{
Module={canvas:canv}；
});

谢谢！必须在辅助脚本周围添加一个if块来检查组件是否首先装入，但现在我至少可以正确地传递画布

eventHandler.target为null

错误仍然存在，但必须深入挖掘。我将其追溯到emscripten调用

document.querySelector（“#canvas”）

，在本例中返回null。你知道吗？

把它整理好了。干杯

<script>
  let canv;
  let Module = { canvas: canv };
</script>

<svelte:head>
  <script src="index.js"></src>
</svelte:head>

<canvas bind:this={canv}></canvas>

exception thrown: TypeError: eventHandler.target is null,registerOrRemoveHandler