尝试使用webpack将THREE设置为全局

Question

您好，感谢您的帮助！

我正在学习JavaScript和React，我想将THREE与它们集成。

我正在寻找一种在全局变量中转换THREE的可靠方法。

我已经尝试过了：

在入口点，index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import * as THREE from 'three';

window.THREE = THREE;


ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

遵循以下列出的第四种方法：Define global variable with webpack

给我们以下输出：

ReferenceError: THREE is not defined
./node_modules/three/examples/js/loaders/NRRDLoader.js
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/node_modules/three/examples/js/loaders/NRRDLoader.js:4
  1 | 
  2 | 
  3 | 
> 4 | THREE.NRRDLoader = function (manager) {
  5 | 
  6 |     this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;
  7 | 
View compiled
__webpack_require__
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap 4fd959e9ed08882e944c:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap 4fd959e9ed08882e944c:88
  85 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 |      hotCurrentParents = [];
  87 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View compiled
./src/App.js
http://localhost:3001/static/js/bundle.js:82335:109
__webpack_require__
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap 4fd959e9ed08882e944c:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap 4fd959e9ed08882e944c:88
  85 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 |      hotCurrentParents = [];
  87 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View compiled
./src/index.js
http://localhost:3001/static/js/bundle.js:82532:63
__webpack_require__
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap 4fd959e9ed08882e944c:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap 4fd959e9ed08882e944c:88
  85 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 |      hotCurrentParents = [];
  87 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View compiled
0
http://localhost:3001/static/js/bundle.js:82680:18
__webpack_require__
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap 4fd959e9ed08882e944c:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
./node_modules/ansi-regex/index.js.module.exports
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap 4fd959e9ed08882e944c:724
  721 | __webpack_require__.h = function() { return hotCurrentHash; };
  722 | 
  723 | // Load entry module and return exports
> 724 | return hotCreateRequire(0)(__webpack_require__.s = 0);
  725 | 
  726 | 
  727 | 
View compiled

然后我尝试了第一种方法：

制作globals.js文件：

import * as THREE from 'three';

export default THREE;

然后我们将它导入主入口点：index.js

import THREE from './globals'

输出是：

ReferenceError: THREE is not defined
./node_modules/three/examples/js/loaders/NRRDLoader.js
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/node_modules/three/examples/js/loaders/NRRDLoader.js:4
  1 | 
  2 | 
  3 | 
> 4 | THREE.NRRDLoader = function (manager) {
  5 | 
  6 |     this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;
  7 | 
View compiled
__webpack_require__
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap ed6b086cf0f417177288:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap ed6b086cf0f417177288:88
  85 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 |      hotCurrentParents = [];
  87 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View compiled
./src/App.js
http://localhost:3001/static/js/bundle.js:82335:109
__webpack_require__
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap ed6b086cf0f417177288:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap ed6b086cf0f417177288:88
  85 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 |      hotCurrentParents = [];
  87 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View compiled
./src/index.js
http://localhost:3001/static/js/bundle.js:82547:63
__webpack_require__
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap ed6b086cf0f417177288:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap ed6b086cf0f417177288:88
  85 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 |      hotCurrentParents = [];
  87 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View compiled
0
http://localhost:3001/static/js/bundle.js:82693:18
__webpack_require__
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap ed6b086cf0f417177288:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
./node_modules/ansi-regex/index.js.module.exports
C:/Users/YonePC/WebstormProjects/nrrdwiththreeandreactstandalone/webpack/bootstrap ed6b086cf0f417177288:724
  721 | __webpack_require__.h = function() { return hotCurrentHash; };
  722 | 
  723 | // Load entry module and return exports
> 724 | return hotCreateRequire(0)(__webpack_require__.s = 0);
  725 | 
  726 | 
  727 | 
View compiled
(anonymous function)
http://localhost:3001/static/js/bundle.js:728:10

此主题与前一个主题相关：

JavaScript: How could we import ES6 modules which are interdependent?

此外，我已经阅读了这个GitHub线程，他们讨论了为什么有些THREEJS文件尚未转换为ES6语法，尤其是加载器：

https://github.com/mrdoob/three.js/issues/9562

你能帮帮我吗，弄清楚如何在WebPack中配置一个全局的THREE vriable？谢谢。