使用import语句维持作用域，解决模块变量未定义报错问题

当helper.js被标记为type="module"后，它会进入模块作用域，内部定义的importantValue不会自动挂载到全局window对象上，而main.js（即使是模块）也无法直接访问其他模块的内部变量，所以抛出ReferenceError。

方案1：将需要共享的变量挂载到全局（最简单） #

既然要让main.js访问importantValue，可以在helper.js里手动把变量挂到window上，不用改变模块属性：

// helper.js
import { f1 } from "./module1.js";

// 挂载到全局window对象
window.importantValue = f1();

main.js无需修改，因为window上的变量可以直接访问。

方案2：把main.js改为模块，直接导入变量 #

如果能接受main.js作为模块，直接从helper.js导入importantValue，这是ES模块的标准用法：

// main.js
import { importantValue } from './helper.js';

(() => {/*STUFF*/})();

let res = importantValue;

helper.js需要导出变量：

// helper.js
import { f1 } from "./module1.js";

export const importantValue = f1();

这种方式不需要依赖全局作用域，更符合模块化规范。

方案3：不把helper.js设为模块，用动态导入加载module1.js #

如果坚持不让helper.js成为模块，可以用动态导入（异步加载模块），同时处理异步问题：

1. 修改helper.js为普通脚本，去掉type="module"：

// helper.js
(async () => {
  // 动态导入module1.js
  const { f1 } = await import('./module1.js');
  window.importantValue = f1();
  // 发送自定义事件通知main.js变量已准备好
  document.dispatchEvent(new CustomEvent('helperReady'));
})();

2. 修改index.html里的helper.js脚本标签：

<script src='helper.js'></script>
<script type="module" src='main.js'></script>

3. 修改main.js，等待变量准备好再使用：

// main.js
(() => {/*STUFF*/})();

// 等待helper加载完成
document.addEventListener('helperReady', () => {
  let res = importantValue;
  // 这里写依赖importantValue的逻辑
});

注意：动态导入是异步的，必须等待加载完成才能访问变量，否则会拿到undefined。

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