js中的parcel和全局变量

Question

我有一个简单的 HTML 文件，其中包含一些简单的 javascript 文件。 没有框架，没有模块。 有一个主要的 JS 文件和其他 JS 文件中的辅助函数。

当我将其作为静态站点打开时，一切正常。 一个文件中的 JS 代码能够调用另一个文件中定义的函数。

当我尝试使用parcel bundler 将其指向index.html文件时，parcel 会找到我所有的JS 文件并在开头添加一些内容，在文件名后附加一个哈希值并修改我的HTML 文件中的链接。 都很棒。

但是，当我在浏览器中打开此页面时，发现我在一个 JS 文件中定义的代码无法看到其他 JS 文件中定义的函数，抛出ReferenceError: <func> is not defined 。 当我检查包含在 HTML 页面中的 JS 脚本时，这些函数确实是在全局范围内定义的。 这有多奇怪？

Answer 1

据我所知，当parcel进行转译时，它会在文件顶部设置一些可用作全局变量的变量：

var globalObject =
    typeof globalThis !== 'undefined'
      ? globalThis
      : typeof self !== 'undefined'
      ? self
      : typeof window !== 'undefined'
      ? window
      : typeof global !== 'undefined'
      ? global
      : {};

如果您在执行parcel watch查看文件，您将在文件顶部看到该文件。

所以基本上如果你想要一个变量是全局的，那么在你首先声明该变量的 javascript 文件中，你必须将它设置为将它附加到上面的任何一个全局变量。 例如：

global.fruit =  'Mango';

或者

window.fruit = 'Mango';

fruit现在成为窗口的全局变量，您可以从设置全局水果对象的文件之后的其他JS文件中的全局范围访问它