将main.js设为模块后，导入的JS变量在HTML中显示未定义的问题

问题现象 #

通过export.js导出MainNumber变量，在main.js中导入后以模块方式引入HTML，页面内的脚本打印该变量时会报错Uncaught ReferenceError: MainNumber is not defined；但如果不用模块模式，直接在main.js定义变量，页面脚本就能正常输出128。使用VSCode的Live Server运行代码。

问题原因 #

ES模块（即带type="module"的脚本）拥有独立的模块作用域，模块内的变量、函数默认不会挂载到全局window对象上。而普通脚本（不带type="module"）的变量默认属于全局作用域，页面内其他脚本可以直接访问。

你之前的模块模式中，MainNumber只存在于main.js的模块作用域里，页面内的普通脚本无法跨作用域访问这个变量，所以报错。

解决方法 #

方法1：将变量挂载到全局对象 #

修改main.js，把导入的变量挂载到window上，让全局作用域能访问：

import { MainNumber } from "./export.js";
window.MainNumber = MainNumber;

这样页面内的脚本就能正常打印MainNumber了。

方法2：让页面脚本也作为模块 #

把页面内的脚本标记为模块，直接导入变量使用：
修改index.html的脚本部分：

<script type="module">
    import { MainNumber } from "./export.js";
    console.log(MainNumber);
</script>

这种方式更符合ES模块的规范，避免污染全局作用域。

方法3：在模块内直接执行打印逻辑 #

直接在main.js里完成打印操作，不需要页面脚本单独访问：

import { MainNumber } from "./export.js";
console.log(MainNumber);

这样HTML里只需要引入模块脚本即可，无需额外的打印脚本。

修正后的代码示例 #

方法1的完整代码 #

export.js：

export let MainNumber = 128;

main.js：

import { MainNumber } from "./export.js";
window.MainNumber = MainNumber;

index.html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <script type="module" src="main.js"></script>
    </head>
    <body>
        <script>
            console.log(MainNumber);
        </script>
    </body>
</html>

方法2的完整代码 #

export.js：

export let MainNumber = 128;

index.html：

<!DOCTYPE html>
<html lang="en">
    <head>
    </head>
    <body>
        <script type="module">
            import { MainNumber } from "./export.js";
            console.log(MainNumber);
        </script>
    </body>
</html>

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