JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了javascript – 如何使用JSPM为已导入的库导入其他插件?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我成功地用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 ) { ... }

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

解决方法

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

你可以用它做什么:

>如果您正在为浏览器编写代码 – 您可以不将es6模块系统用于不支持它的库.只需通过脚本标记加载它们并将其用作全局变量(一如既往,在es6之前).
>您可以使用system.js.在这种情况下,您必须配置您的系统:

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

大佬总结

以上是大佬教程为你收集整理的javascript – 如何使用JSPM为已导入的库导入其他插件?全部内容,希望文章能够帮你解决javascript – 如何使用JSPM为已导入的库导入其他插件?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。