Cordova Android应用无法识别JavaScript module中定义的函数如何解决

问题根因 #

Android端Cordova内置WebView对ES Module的支持存在兼容性缺陷，且模块加载执行时序晚于普通脚本，当前场景下general.js调用函数时，xxxReceiver.js模块还未完成执行、未将目标函数挂载到window对象上，因此抛出未定义错误。

解决方案 #

方案1：打包模块为普通脚本（最稳妥，兼容性最好） #

使用打包工具（Rollup、Webpack、Vite均可）将xxxReceiver.js及其依赖的Receiver.js打包为非模块化的单文件脚本，打包后产物自动合并所有依赖、移除ES Module语法。

1. 打包后在HTML中直接引入产物，删除type="module"声明：

<script src="xxxReceiver.bundle.js"></script>

2. 原有挂载到window的函数无需修改，general.js可直接调用。
   该方案无需调整原有业务逻辑，仅新增打包流程即可兼容所有Cordova版本，优先推荐使用。

方案2：调整调用时序，等待模块加载完成 #

如果暂时不想修改模块结构，可以将调用逻辑放在Cordova的deviceready事件（优先级更高）或者DOM加载完成事件中触发，确保模块已经执行完成：
修改general.js代码如下：

document.addEventListener('deviceready', function() {
  var result = receiver_addController();
  // 原有后续业务逻辑放在此处
}, false);

方案3：全量切换为模块化加载 #

如果你的Cordova Android平台版本≥10.0.0，内置WebView已经支持ES Module，可以将general.js也改为模块引入，直接导入函数无需挂载到window：

1. 修改HTML引入逻辑：

<script type="module" src="xxxReceiver.js"></script>
<script type="module" src="general.js"></script>

2. 修改xxxReceiver.js导出函数：

// 原有代码保持不变，新增导出
export { receiver_init, receiver_addController }

3. 修改general.js导入后调用：

import { receiver_addController } from './xxxReceiver.js'
var result = receiver_addController();

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