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文件中的全局范圍訪問它