ES模块场景下浏览器控制台访问变量出现ReferenceError问题

问题原因 #

ES模块（通过type="module"加载的脚本）拥有独立的模块级作用域，模块内部用const/let/var声明的变量不会自动挂载到全局window对象上。你在script.js里定义的smallWardrobe仅存在于该模块的作用域内，控制台直接访问时处于全局作用域，因此会抛出ReferenceError；而模块内的console.log(smallWardrobe)能正常输出，是因为它在模块作用域内部执行。

另外，你的index.html中无需单独加载Wardrobe.js——script.js已经通过import导入了该模块，重复加载属于冗余操作。

解决方案 #

1. 手动挂载到全局（适合调试，不推荐生产环境）

修改script.js，将变量挂载到window对象，使其成为全局变量：

import Wardrobe from "./Wardrobe.js";

// 挂载到全局window对象
window.smallWardrobe = new Wardrobe(
    "IKEA",
    2,
    10,
    20,
    15,
    "White",
    "Wood"
);

console.log(smallWardrobe);

此时控制台直接输入smallWardrobe即可访问该对象。

2. 添加调试用的全局获取函数（更安全）

如果不想直接暴露变量到全局，可以定义一个全局函数来返回对象：

import Wardrobe from "./Wardrobe.js";

const smallWardrobe = new Wardrobe(
    "IKEA",
    2,
    10,
    20,
    15,
    "White",
    "Wood"
);

// 全局暴露获取函数
window.getSmallWardrobe = () => smallWardrobe;

console.log(smallWardrobe);

控制台输入getSmallWardrobe()即可获取该对象。

3. 利用浏览器调试工具查看模块作用域

打开浏览器开发者工具的Sources面板，找到script.js，在console.log(smallWardrobe)行添加断点。页面运行到断点时，控制台会自动进入模块作用域，此时直接输入smallWardrobe即可查看对象。

优化后的index.html（移除冗余加载） #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Practice: Making classes and objects</title>
    <!-- 仅保留script.js的模块加载 -->
    <script type="module" src="script.js"></script>
  </head>
  <body></body>
</html>

内容的提问来源于stack exchange，提问作者João Almeida