Làm cách nào để nhập các plugin bổ sung cho thư viện đã nhập bằng JSPM?

Question

tôi nhập thành công một 3ngày rendering js THƯ VIỆN với JSPM như vậy:

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

Tôi cũng muốn nhập khẩu các điều khiển quỹ đạo cắm cho Three.js

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

nhưng điều này ném một lỗi kể từ khi plugin không có tham chiếu đến thư viện

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) 

Plugin thêm chức năng khác vào thư viện như vậy:

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

Cách nhập đúng plugin là gì?

Answer 1

Trong ví dụ này THREE được khởi tạo trong phạm vi mô-đun riêng của mình (ModuleEnvironment, đọc here), không phải phạm vi toàn cục và không được xuất. Vấn đề là OrbitControls đang tìm kiếm THREE trong phạm vi mô đun của nó và sau đó trong phạm vi toàn cầu. Vì vậy, không tìm thấy THREE và lỗi được ném.

Những gì bạn có thể làm gì với nó:

1. Nếu bạn đang viết mã cho trình duyệt - bạn có thể chỉ là không sử dụng hệ thống mô-đun es6 cho các thư viện mà không hỗ trợ nó. Chỉ cần tải chúng thông qua các thẻ script và sử dụng như các biến toàn cầu (như mọi khi, trước es6).

2. Bạn có thể sử dụng system.js. Trong trường hợp đó bạn phải cấu hình System một cái gì đó của bạn như:

   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' } 
   

   Sau đó, bạn có thể nhập những module như:

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

Answer 2

như đối với NPM hiện intalled three.js (0.81.2):

một bó file: 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; 

thì trong chỉ mục của bạn.js

import THREE from './three';