如何在普通script脚本中调用Module类型脚本内的JavaScript函数

报错根因 #

ES Module 类型的脚本拥有独立的模块作用域，内部定义的函数、变量默认都是模块私有，不会自动挂载到全局window对象上。而普通脚本运行在全局作用域，直接访问模块内的私有函数自然会报未定义错误。

解决方法 #

方法1：将需要对外暴露的函数挂载到全局window对象

这是最直接的兼容方案，直接在模块脚本末尾把需要暴露的函数绑定到window上即可：

/// Module stuff that requires this to be a module script
function moduleFunction() {
   alert("This was called from inside a module script");
   // Info only accessible inside module script
}
// 新增：暴露到全局
window.moduleFunction = moduleFunction;

修改后普通脚本就能直接调用moduleFunction()了。

方法2：用自定义事件实现跨脚本通信（无需污染全局）

如果不想挂载全局变量，可以用事件机制实现解耦调用：

1. 模块脚本内监听自定义事件：

function moduleFunction() {
   alert("This was called from inside a module script");
}
// 监听自定义事件
window.addEventListener('callModuleFunc', () => {
  moduleFunction()
})

2. 普通脚本需要调用时派发事件即可：

function myFunction() {
   alert("Calling Module Function!");
   // 派发事件触发模块内函数执行
   window.dispatchEvent(new CustomEvent('callModuleFunc'))
}

方法3：将普通脚本也改为Module类型

如果你的业务场景允许修改普通脚本的加载方式，可以把普通脚本也设置为type="module"，然后直接用ES模块的导入导出语法调用：

1. 先在模块脚本中导出函数：

export function moduleFunction() {
   alert("This was called from inside a module script");
}

2. HTML中修改普通脚本的类型为module，同时导入函数：

<script type="module">
import { moduleFunction } from './你的模块脚本路径.js'
// 把函数挂载到全局，因为内联模块脚本里的函数也不会自动暴露到全局给onclick用
window.myFunction = function() {
   alert("Calling Module Function!");
   moduleFunction();
}
</script>

注意：模块脚本默认是延迟加载的，如需和普通脚本加载时机一致可以加上async属性。

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