如何使用JSPM为已导入的库导入其他插件？

Question

我用JSPM成功导入了一个js 3d渲染库,如下所示:

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

我还想为Three.js导入轨道控件插件

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

但这会引发错误,因为插件没有引用库

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)

该插件为库添加了更多功能,如下所示:

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

导入插件的正确方法是什么？

Answer 1

至于目前的NPM,则表示三个.js(0.81.2):

捆绑文件: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;

然后在你的index.js

import THREE from './three';

Answer 2

在此示例THREE中,在其自己的模块范围(ModuleEnvironment,此处读取)中初始化,而不是全局范围,并且不会导出它.问题是在其模块范围内OrbitControls寻找THREE,然后在全球范围内寻找.所以THREE找不到并且抛出错误.

你可以用它做什么:

1. 如果您正在为浏览器编写代码 - 您可以不将es6模块系统用于不支持它的库.只需通过脚本标记加载它们并将其用作全局变量(一如既往,在es6之前).

2. 您可以使用system.js.在这种情况下,您必须配置以下内容System:

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

   然后你可以导入这些模块,如:

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