A-Frame 组件不适用于 ES6 模块？答案

【问题标题】：A-Frame component doesn't work with ES6 Modules?A-Frame 组件不适用于 ES6 模块？
【发布时间】：2022-04-09 02:29:02
【问题描述】：

我想在我的 AFRAME 组件的 init 函数中调用另一个 javascript 文件 (a.js) 中的某个函数 (foo)。

在我的 index.html 中是这样的：

<script type="module">
    import {foo} from "a.js";
    AFRAME.registerComponent('registerevents', {
     init: function () {
         foo();
     }
    }
}

当我这样做时，初始化函数甚至没有被调用。

然后我尝试了这样的事情：

<script type="module" src="a.js"></script>
<script>
    AFRAME.registerComponent('registerevents', {
     init: function () {
         foo();
     }
    }
}

在这种情况下，我得到了一个未定义的函数。

然后我在a.js中尝试了

window.foo = foo;

在我的 index.html 中：

<script type="module" src="a.js"></script>
<script>
    AFRAME.registerComponent('registerevents', {
     init: function () {
         window.foo();
     }
    }
}

然后我得到一个 window.foo is not a function 错误。在 init 函数中调用函数的正确方法应该是什么？谢谢！

【问题讨论】：

我怀疑你对框架和模块不能很好地协同工作的说法是正确的？？？
init 如果组件未设置为实体，则不会调用方法

标签： aframe ar.js

【解决方案1】：

模块和 A-Frame 工作正常。问题在于，直到在实体上设置组件后才会调用 init 方法。例如，您可以将其设置在a-scene 上，如下所示：

<script type="module">
    import {foo} from './a.mjs';
    AFRAME.registerComponent('registerevents', {
     init: function () {
         foo();
     }
    }); 
    AFRAME.scenes[0].setAttribute('registerevents','');                         
</script>

a.mjs 在哪里：


export function foo(){ console.log('Fooing is believing!')}

工作示例：https://glitch.com/edit/#!/little-coral

【讨论】：

那行得通！谢谢！ AFRAME.scenes[0].setAttribute('registerevents',''); 和 <a-scene registerevents> 有什么区别？我使用的是<a-scene registerevents>，init 没有被调用。
啊，我现在知道为什么了。在<a-scene registerevents> 之后调用模块脚本。现在一切都说得通了。谢谢！

【解决方案2】：

你可以这样做：

const AFRAME = window.AFRAME;

const Initialize = () => {
  AFRAME.registerComponent("a-scene", {
    schema: {
      background: { type: "color", default: "#000" },
    },
  });
};

然后使用效果：

useEffect(()=>{
   Initialize()
})

【讨论】：