js中的包裹和全局变量答案

【问题标题】：parcel and global variables in jsjs中的包裹和全局变量
【发布时间】：2021-02-02 07:56:28
【问题描述】：

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

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

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

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

【问题讨论】：

没有示例很难回答，但您是否将文件导入/需要到您的入口点？
您找到解决方案了吗？
@a.mola 我没有，并放弃了该项目的包裹。我想我最终只是编写了一个自定义构建脚本
是的...所以我查看了 chrome DevTools 中的源选项卡，我看到 Parcel 将代码放在 IIFE 中，因此函数和 let 和 const 变量位于不同的范围内。所以我将它们添加到窗口对象中。就像window.variableName = true 用于变量或window.funcName = function funcName(){} 用于函数。这就是我能够访问函数和变量的方式
我在项目中集成谷歌地图时也遇到了同样的问题。我还使用 Parcel 作为模块捆绑器，这显然是为了安全性而完成的，但需要有一种可能的方法将函数公开为全局变量，而不是 @a.mola 提到的一些 hack。

标签： javascript parceljs

【解决方案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 文件中的全局范围访问它

【讨论】：