我对为什么将脚本类型设置为type="module"时为什么无法访问浏览器控制台中的已定义变量感到好奇。
以下是一个假设的设置：
<!DOCTYPE html>
<html>
<head>
<div id="containerFirst">...</div>
<div id="differentContainer">...</div>
</head>
<body>
...
</body>
<script type="module" src="module.js"></script>
<script src="normal.js"></script>
</html>
这是两个JS文件，第一个是module.js：
export const firstContainer = document.getElementById('containerFirst');
和normal.js中类似的变量结构：
const otherContainer = document.getElementById('differentContainer');
在浏览器中运行此代码时，可以直接在控制台中输入normal.js中定义的变量，但不能从module.js中键入该变量。我希望在这件事上能找到一些清晰的地方。
谢谢！
最佳答案
如果您在相关模块的代码中的断点处暂停，则可以访问模块变量，但如果不是，则不能访问。根据设计，模块中的顶级声明不是全局变量。每个模块都有自己的作用域，就像它们是只被调用一次的函数一样（这是一个大致的类比），因此顶层声明是模块作用域的私有属性（当然，除非您导出它们）。