时间戳

首页 > 解决方案 > js中的包裹和全局变量

javascript - js中的包裹和全局变量

问题描述

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

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

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

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

标签： javascriptparceljs

解决方案

据我所知，当 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 文件中的全局范围访问它

推荐阅读