javascript - 三.js TypeError : 'global' is undefined in Firefox

Question

所以我尝试将 threejs 作为插入脚本包含到我的代码中。没有 webpack，没有 browserify，没有 requirejs。只是一个简单的 gulp/browsersync 服务。我加载了一个外部 Angular 应用程序并扩展了它。现在我需要在代码库中使用我自己的三个版本。

它被加载 - 但就在第一行，他们尝试设置似乎 undefined variable “global”。我错过了什么？

---

//编辑:

我正在使用另一家公司的 js api。我不知道他们是否设置了“全局”变量，但 Threejs 肯定会尝试使用“全局”变量，尽管我没有在节点设置中使用它。但在所有示例中，它只是作为一个插入式脚本使用。

如果我使用缩小版，错误会变为

类型错误:全局未定义*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 替换为当前上下文，这当然是未定义的。这就是为什么 bable 从字面上用 undefined 替换它。所以:永远不要 babel() 你的最终 vendor 文件!

Answer 1

您在问题中显示的 THREE.js 部分没有问题。如果我们只关注您遇到的问题，并删除 CommonJS 和 AMD 案例的代码，则归结为:

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

这是一个常见的模式。请注意，第一个匿名函数是用 this 作为第一个参数调用的。所以 global 被设置为 this 在全局空间中的值。如果上面的代码在顶级执行上下文中执行，则 this 将自动具有您运行代码的环境的全局对象的值。在 Node 中，该对象被命名为 global。所以打开一个节点 session 并输入:

global === this

你会得到 true。在浏览器中，全局对象被命名为 window。在调试中打开控制台并键入:

window === this

你会得到 true。因此，带有匿名函数的代码片段所做的是，它使用 this 获取对全局对象的引用，无论代码在何处执行。它不必检查 window 是否退出或 global 是否存在，或 self 或其他任何东西。相反，它只是将 this 传递给匿名函数，并通过这种方式自动获取对全局对象的引用。这种方法没有错。它非常常见并且通常有效。

但是，有可能阻止代码正常工作。例如，如果上面的代码包含在另一个函数中并且该函数使用“use strict”，那么 this 将是未定义的，global 也将是未定义的。这是一个例子:

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

有时，构建过程或代码加载工具会添加此类包装代码，然后它们会弄乱原始代码。