[英]THREE.js TypeError: 'global' is undefined in Firefox
So I tried to include threejs as a drop-in script into my code. 因此,我尝试将Threejs作为嵌入式脚本包含到我的代码中。 No webpack, no browserify, no requirejs.
没有webpack,没有browserify,没有requirejs。 Just a simple gulp/browsersync serve.
只需一个简单的gulp / browsersync服务即可。 I load an external angular app and extend it.
我加载一个外部的角度应用程序并扩展它。 Now I need my own THREEjs Version within the codebase.
现在,我在代码库中需要自己的THREEjs版本。
It gets loaded - but right in the first line they try to set the variable 'global' which doesn't seem to be defined. 它已加载-但在第一行中,他们尝试设置似乎未定义的变量“ global”。 What am I missing?
我想念什么?
// edit: //编辑:
I am using a js api from another company. 我正在使用另一家公司的js API。 I don't know if they set the 'global' var, but Threejs definitely tries to use the var 'global' although I don't use it in a node setup.
我不知道他们是否设置了'global'var,但Threejs肯定会尝试使用var'global',尽管我没有在节点设置中使用它。 but in all examples it just works as a drop-in script.
但在所有示例中,它都只能用作嵌入式脚本。
If I use the minified version the error changes to 如果使用缩小版本,错误将变为
TypeError: global is undefined *three.min.js:2:168 TypeError:全局未定义 * three.min.js:2:168
anonymous https://localhost:9000/scripts/three.min.js:2:168 匿名https:// localhost:9000 / scripts / three.min.js:2:168
anonymous https://localhost:9000/scripts/three.min.js:2:2 * 匿名https:// localhost:9000 / scripts / three.min.js:2:2 *
and this originates from the following first lines of the three.js file: 这是来自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'; ...
//EDIT 2: //编辑2:
I finally maaged to find the error which is causing all this. 我终于设法找到导致所有这一切的错误。 if youre using gulp-babel and include scripts with that snippet on top, babel tries to replace THIS with the current context, which is - of course - undefined.
如果您使用的是gulp-babel并在顶部包含该代码段的脚本,则babel会尝试用当前上下文替换THIS,这当然是未定义的。 and thats why bable literally replaces this with undefined.
这就是为什么圣经从字面上将其替换为undefined。 so: never babel() your final vendor files!
所以:永远不要babel()您最终的供应商文件!
The part of THREE.js that you show in your question is not a problem. 您在问题中显示的THREE.js部分不是问题。 If we focus only on the problem you've been having, and eliminate the code for the CommonJS and AMD cases, it boils down to this:
如果我们只关注您遇到的问题,并消除CommonJS和AMD案例的代码,则可以归结为:
(function (global, factory) {
factory(global.THREE = {});
}(this, (function (exports) { 'use strict';
// ...
})));
This is a common pattern. 这是常见的模式。 Note that the first anonymous function is called with
this
as the first argument. 需要注意的是第一个匿名函数被调用,
this
作为第一个参数。 So global
is set to the value that this
has in the global space. 因此,
global
被设置为值this
在全球拥有空间。 If the code above executes in a top-level execution context, then this
will automatically have the value of the global object for the environment in which you run the code. 如果代码中的顶级执行上下文上面执行,那么
this
将会自动对在其中运行该代码的环境中的全局对象的值。 In Node, that object is named global
. 在Node中,该对象名为
global
。 So open a Node session and type: 因此,打开一个Node会话并输入:
global === this
You'll get true
. 你会成
true
。 In a browser the global object is named window
. 在浏览器中,全局对象称为
window
。 Open the console in debugging and type: 在调试中打开控制台,然后键入:
window === this
You'll get true
. 你会成
true
。 So what the code snippet with the anonymous function does is that it uses this
to grab a reference to the global object irrespective of where the code executes . 因此,具有匿名功能的代码段的作用是, 无论代码在何处执行 ,它都使用
this
代码段来获取对全局对象的引用。 It does not have to check whether window
exits or global
exist, or self
or anything else. 它不必检查
window
出口或global
出口是否存在,或者self
或其他任何东西。 Instead, it just passes this
to the anonymous function and, this way, automatically gets a reference to the global object. 相反,它只是传递
this
匿名函数,这样一来,会自动获取到全局对象的引用。 There's nothing wrong with that method. 该方法没有错。 It is super common and generally works.
这是超级常见的,通常可以正常工作。
However, it is possible to prevent the code from working properly. 但是,可以防止代码的正常运行。 For instance if the code above is wrapped in another function and that function uses "use strict", then
this
will be undefined, and global
will be undefined too. 例如,如果上面的代码被包装在另一个函数和函数使用“使用严格”,那么
this
将是不确定的,而global
也将被不确定的。 Here's an example: 这是一个例子:
(function() {
"use strict";
(function(global, factory) {
console.log("XXX", global); // You'll get "XXX undefined" here
}(this, (function(exports) {
'use strict';
})));
}());
Sometimes, build processes or code loading tools add such wrapping code, and then they mess up the original code. 有时,构建过程或代码加载工具会添加此类包装代码,然后将原始代码弄乱。
Since "just getting babel to ignore certain files" is by no means trivial when working in gulp, a quick and dirty fix for this error is to swap this
with window
on the 5th line of three.js
: 由于在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';
Is this what you need? 这是您需要的吗? Just add this one-liner at the very head of your code, in the global scope:
只需在全局代码的最开头添加此一列代码即可:
if (typeof global === "undefined"){global=window;}
This is going to reference the global
object to the window
object, which is the object containing all global variables in browser. 这将引用
global
对象到window
对象,该对象是包含浏览器中所有全局变量的对象。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.