THREE.js TypeError：Firefox中未定義“ global”

Question

因此，我嘗試將Threejs作為嵌入式腳本包含到我的代碼中。 沒有webpack，沒有browserify，沒有requirejs。 只需一個簡單的gulp / browsersync服務即可。 我加載一個外部的角度應用程序並擴展它。 現在，我在代碼庫中需要自己的THREEjs版本。

它已加載-但在第一行中，他們嘗試設置似乎未定義的變量“ global”。 我想念什么？

---

//編輯：

我正在使用另一家公司的js API。 我不知道他們是否設置了'global'var，但Threejs肯定會嘗試使用var'global'，盡管我沒有在節點設置中使用它。 但在所有示例中，它都只能用作嵌入式腳本。

如果使用縮小版本，錯誤將變為

TypeError：全局未定義 * three.min.js：2：168

匿名https：// localhost：9000 / scripts / three.min.js：2：168

匿名https：// localhost：9000 / scripts / three.min.js：2：2 *

這是來自three.js文件的以下第一行：

function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
(factory((global.THREE = {}))); }(this, (function (exports) { 'use strict'; ...

---

//編輯2：

我終於設法找到導致所有這一切的錯誤。 如果您使用的是gulp-babel並在頂部包含該代碼段的腳本，則babel會嘗試用當前上下文替換THIS，這當然是未定義的。 這就是為什么聖經從字面上將其替換為undefined。 所以：永遠不要babel（）您最終的供應商文件！

Answer 1

您在問題中顯示的THREE.js部分不是問題。 如果我們只關注您遇到的問題，並消除CommonJS和AMD案例的代碼，則可以歸結為：

(function (global, factory) {
  factory(global.THREE = {}); 
}(this, (function (exports) { 'use strict';
  // ...
})));

這是常見的模式。 需要注意的是第一個匿名函數被調用， this作為第一個參數。 因此， global被設置為值this在全球擁有空間。 如果代碼中的頂級執行上下文上面執行，那么this將會自動對在其中運行該代碼的環境中的全局對象的值。 在Node中，該對象名為global 。 因此，打開一個Node會話並輸入：

global === this

你會成true 。 在瀏覽器中，全局對象稱為window 。 在調試中打開控制台，然后鍵入：

window === this

你會成true 。 因此，具有匿名功能的代碼段的作用是， 無論代碼在何處執行 ，它都使用this代碼段來獲取對全局對象的引用。 它不必檢查window出口或global出口是否存在，或者self或其他任何東西。 相反，它只是傳遞this匿名函數，這樣一來，會自動獲取到全局對象的引用。 該方法沒有錯。 這是超級常見的，通常可以正常工作。

但是，可以防止代碼的正常運行。 例如，如果上面的代碼被包裝在另一個函數和函數使用“使用嚴格”，那么this將是不確定的，而global也將被不確定的。 這是一個例子：

(function() {
  "use strict";
  (function(global, factory) {
    console.log("XXX", global); // You'll get "XXX undefined" here
  }(this, (function(exports) {
    'use strict';
  })));
}());

有時，構建過程或代碼加載工具會添加此類包裝代碼，然后將原始代碼弄亂。

Answer 2

由於在gulp中工作時“僅僅讓babel忽略某些文件” three.js ，因此對此錯誤的快速且骯臟的解決方案是，將this與在three.js的第5行上的window交換：

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.THREE = {})));
}(window, (function (exports) { 'use strict';

Answer 3

這是您需要的嗎？ 只需在全局代碼的最開頭添加此一列代碼即可：

if (typeof global === "undefined"){global=window;}

這將引用global對象到window對象，該對象是包含瀏覽器中所有全局變量的對象。