模块脚本声明的函数无法被普通脚本调用的解决方案咨询

问题原因 #

带有type="module"的脚本会创建独立的模块作用域，内部定义的函数、变量默认不会暴露到全局window对象中，所以普通脚本（无type="module"属性）无法访问模块内的foo1函数。

方案1：将函数挂载到全局对象 #

直接把foo1挂载到window上，让普通脚本能从全局作用域访问到它，这是最直接的解决方式：

<script type="module">
    function foo1() {
        console.log("Ray cast is called");
    }
    // 挂载到全局window对象
    window.foo1 = foo1;
</script>
<script>
    foo1(); // 现在可正常调用
</script>

注意：这种方式会增加全局变量，若项目中有同名变量可能引发冲突，适合快速调试或小型场景使用。

方案2：用自定义事件实现无全局依赖调用 #

通过自定义事件触发函数执行，避免全局变量污染，适合需要解耦的场景：

<script type="module">
    function foo1() {
        console.log("Ray cast is called");
    }
    // 监听自定义事件
    window.addEventListener('triggerFoo1', () => {
        foo1();
    });
</script>
<script>
    // 触发事件调用foo1
    window.dispatchEvent(new Event('triggerFoo1'));
</script>

方案3：保持模块规范（你原本的思路） #

将foo1写入单独的模块文件，然后在需要调用的脚本中导入：

1. 创建fooModule.js文件：

export function foo1() {
    console.log("Ray cast is called");
}

2. 在页面中导入并调用：

<script type="module">
    // 导入第三方库的代码保留在这里
    import { foo1 } from './fooModule.js';
    foo1();
</script>
<!-- 或者如果需要在另一个模块脚本中调用 -->
<script type="module">
    import { foo1 } from './fooModule.js';
    foo1();
</script>

这种方式符合ES模块规范，无全局污染，是长期维护的最优选择。

内容的提问来源于stack exchange，提问作者user2300947