为什么我使用 ES 模块时浏览器控制台中没有变量？

Question

我很好奇为什么当我将脚本类型设置为 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 中定义的变量。我希望在这个问题上找到一些清晰度。谢谢！

Answer 1

如果您在相关模块代码的断点处暂停，您将能够访问模块变量，但如果不是，则不能。按照设计，模块中的顶级声明不是全局声明。每个模块都有自己的范围，有点像它们是一个只被调用一次的函数（这是一个 粗略的 类比），所以顶层声明对模块的范围是私有的（除非你导出它们，当然）。

为什么我使用 ES 模块时浏览器控制台中没有变量？

Why are variables not available in the browser console when I use ES modules?

javascript

browser

console

es6-modules