THREE.js TypeError : Firefox에서 'global'이 정의되지 않았습니다.

Question

그래서 코드에 drop-in 스크립트로 threejs를 포함하려고했습니다. 웹팩 없음, 브라우저 없음, 요구 없음. 간단한 gulp/browsersync 서브. 외부 각도 앱을로드하고 확장합니다. 이제 코드베이스 내에 내 자신의 THREEjs 버전이 필요합니다.

로드되지만 첫 번째 줄에서는 정의되지 않은 'global'변수를 설정하려고합니다. 내가 뭘 놓치고 있니?

// 편집 : 나는 다른 회사에서 JS API를 사용하고

. 나는 그들이 'global'var을 설정했는지 모르지만, Threejs는 노드 설정에서 사용하지는 않지만 var 'global'을 확실히 사용하려고합니다. 그러나 모든 예제에서 드롭 - 인 스크립트로 작동합니다. 나는이 축소 된 버전

형식 오류에 대한 오류 변경을 사용하는 경우

는 : 2 : 168

익명 https://localhost:9000/scripts/three.min.js:2:168

익명 https://localhost:9000/scripts/three.min.js:2:2 글로벌은 * three.min.js 정의되지 않은 *

이며 이는 다음에서부터 유래합니다. 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'; ... 

Answer 1

THREE.js의 질문에 표시되는 부분은 문제가되지 않습니다. 우리는 당신이 필요했던 문제에만 초점을 맞추고 CommonJS와 AMD의 경우에 대한 코드를 제거 할 경우,이 귀결 :

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

이 일반적인 패턴이다. 첫 번째 익명 함수는 this과 함께 첫 번째 인수로 호출됩니다. 따라서 global은 this이 전체 공간에있는 값으로 설정됩니다. 위의 코드가 최상위 실행 컨텍스트에서 실행되면 this은 자동으로 코드를 실행하는 환경의 전역 개체 값을 갖습니다. Node에서 해당 객체의 이름은 global입니다. 그래서 노드 세션을 열고 다음을 입력

global === this 

당신은 true를 얻을 수 있습니다. 브라우저에서 전역 개체의 이름은 window입니다. 디버깅 및 형식 콘솔을 엽니 다 : 당신은 true를 얻을 수 있습니다

window === 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'; 
    }))); 
}()); 

경우에 따라 빌드 프로세스 또는 코드로드 도구가 이러한 래핑 코드를 추가 한 다음 원래 코드를 엉망으로 만들 수 있습니다.

Answer 2

이게 필요한가요? 그냥 전역 범위에서, 코드의 아주 머리에이 한 줄을 추가합니다 : 이것은 브라우저에서 모든 글로벌 변수를 포함하는 객체 인 window 객체에 global 객체를 참조 할 것입니다

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

.