使用类型模块访问脚本标记中定义的变量？

Question

我的 HTML 中有一个带有模块类型的脚本标签，它导出一个变量：

<script type="module">
  var life = 42;
  export { life };
</script>

如何life从其他脚本标签或 Chrome 控制台访问以进行调试？

Answer 1

这似乎在 SEO 中排名很高，而 @Aplet123 的真正答案有点隐藏在评论中。

\n

\n

1. 您无法跨模块/模块外部访问变量，这就是重点。您可以导出/导入，但这在浏览器控制台中不起作用。

   \n
\n

2. 您可以将任何对象附加到窗口以便全局公开它。因此添加将在浏览器控制台中window.life = life公开life(或)。window.life

   \n
\n

\n

当您解决或调试问题时，这是一个可靠的选择。

\n

这不应该在生产中使用，除非在有限的情况下 \xe2\x80\x93 例如，如果您需要加载 JavaScript 而无需访问网络（包括通过 ServiceWorker），或者您希望将代码轻松地放在一个文件中检查过。

\n

Answer 2

首先，您应该export在单独的 js 文件中使用，而不是嵌入 html 文件中。我不确定是否import适用于 html 文件。但是，对于另一个 js 文件中的单独 js 文件，您可以仅使用它import {life} from 'path/to/file'来加载变量。如果它嵌入在 html 中并且您在同一页面中使用脚本，则不需要，只需使用变量 即可export访问。事实上，这实际上阻止了脚本标记中定义的变量被访问。如果您想访问同一页面上的变量，那么您应该将其删除。这同样适用于页面上的开发者控制台。lifelifetype="module"