Wie importiere ich zusätzliche Plugins für eine bereits importierte Bibliothek mit JSPM?

Question

ich importiert erfolgreich eine js 3D-Rendering libary mit JSPM wie so:

import THREE from 'three.js/build/three'; 

Ich würde auch die Umlaufbahn Kontrollen Plugin für Three.js

import OrbitControls from 'three.js/examples/js/controls/OrbitControls'; 

aber dies wirft einen Fehler, da der Import gerne Plugin hat keinen Hinweis auf die Bibliothek

Uncaught ReferenceError: THREE is not definedOrbitControls.js:24 (anonymous  function)system.src.js:2187 doEvalsystem.src.js:2153 __evalsystem.src.js:212 asystem.src.js:1019 global.e.metadata.format.e.metadata.executesystem.src.js:540 csystem.src.js:403 ssystem.src.js:715 executees6-module-loader.src.js:1879 oes6-module-loader.src.js:1927 pes6-module-loader.src.js:1701 jes6-module-loader.src.js:1749 kes6-module-loader.src.js:1575 (anonymous function)es6-module-loader.src.js:1177 Oes6-module-loader.src.js:1136 Kes6-module-loader.src.js:927 y.whenes6-module-loader.src.js:818 v.runes6-module-loader.src.js:97 a._draines6-module-loader.src.js:62 draines6-module-loader.src.js:267 b 
es6-module-loader.src.js:139 Potentially unhandled rejection [2] Error loading "github:mrdoob/three.js@master/examples/js/controls/OrbitControls" at http://localhost:8080/jspm_packages/github/mrdoob/three.js@master/examples/js/controls/OrbitControls.js 
Error loading "github:mrdoob/three.js@master/examples/js/controls/OrbitControls" from "app/main" at http://localhost:8080/app/main.js 
Error evaluating http://localhost:8080/jspm_packages/github/mrdoob/three.js@master/examples/js/controls/OrbitControls.js 
Uncaught ReferenceError: THREE is not defined (WARNING: non-Error used) 

Das Plugin mehr Funktionalität in die Bibliothek fügt etwa so:

THREE.OrbitControls = function (object, domElement) { ... } 

Was ist der richtige Weg, um das Plugin zu importieren?

Answer 1

In diesem Beispiel wird THREE in einem eigenen Modulbereich initialisiert (ModuleEnvironment, lesen Sie here), nicht globalen Bereich, und es wird nicht exportiert. Das Problem ist OrbitControls sucht THREE in seinem Modul Umfang und dann im globalen Bereich. So THREE wird nicht gefunden und Fehler wird ausgelöst.

Was Sie damit machen kann:

1. Wenn Sie Code für Browser gerade schreiben - Sie können einfach nicht es6 Modulsystem für Bibliotheken verwenden, die nicht unterstützt wird. Laden Sie sie einfach durch die Script-Tags und verwenden Sie sie als globale Variablen (wie immer vor es6).

2. können Sie system.js verwenden. In diesem Fall müssen Sie Ihre System etwas konfigurieren wie:

   System.map['TREE'] = 'three.js/build/three'; 
   System.meta['three.js/build/three'] = { format: 'global', exports: 'jQuery' }; 
   System.meta['three.js/examples/js/controls/OrbitControls'] = { deps: 'TREE' } 
   

   Dann Sie diese Module wie importieren:

   import THREE from 'THREE'; 
   import 'three.js/examples/js/controls/OrbitControls'; 
   

Answer 2

wie für aktuelle NPM intalled three.js (0.81.2):

eine Bundle-Datei: Three.js

import * as THREE from 'three'; // build/three.js from node_module/three 
window.THREE = THREE; 
require('three/examples/js/controls/OrbitControls.js'); 
export default THREE; 

dann in Ihrem index.js

import THREE from './three';