Question

我的es6工作流程使用babel和babel-plugin-transform-es2015-modules-system.js来仅转换模块导入/导出以与system.js一起使用。我只是使用＆＃34;绿色＆＃34;所有es6功能的浏览器，除了模块的导入/导出..这是一个标准，因此不是＆＃34; es6＆＃34;。

这适用于遗留（非es6）库，我可以＆＃34;导入＆＃34;我需要的所有npm包。不知何故babel，只有babel模块转换，而system.js神奇地工作。

除了three.js。我尝试了所有三个版本：three.js，three.min.js＆amp; three.modules.js。前两个默默地失败，导致＆＃34;未定义＆＃34;模块。第三个失败了，想要跟踪..我想是一个类似system.js的变换？

那么我在es6世界中使用three.js需要做些什么呢？

我想我可以使用<script>标签和三个全局标签。或者可能使用rollup / webpack来消除模块？

但我敢打赌，这是一个合理的解决方案。毕竟，three.js在内部使用es6模块。

Answer 1

发布中有一个错误（只有一天！）。我修好了但仍有问题。但我发现这确实有效：

import * as THREE from 'etc/three.js'

..但更明显的版本，

import THREE from 'etc/three.js'
or
import 'etc/three.js'

似乎不起作用。

如果你比这更好地了解这一点，请告诉我，这是非常随意的。

Answer 2

我遇到了同样的问题，但意识到THREE不会导出三个而是导出所有不同的模块。使用exports：

检查three.js文件中的部分

exports.WebGLRenderTargetCube = WebGLRenderTargetCube;
exports.WebGLRenderTarget = WebGLRenderTarget;
exports.WebGLRenderer = WebGLRenderer;
exports.ShaderLib = ShaderLib;
exports.UniformsLib = UniformsLib;
exports.UniformsUtils = UniformsUtils;
exports.ShaderChunk = ShaderChunk;
exports.FogExp2 = FogExp2;
exports.Fog = Fog;
exports.Scene = Scene;
exports.LensFlare = LensFlare;
exports.Sprite = Sprite;
exports.LOD = LOD;
exports.SkinnedMesh = SkinnedMesh;
exports.Skeleton = Skeleton;
exports.Bone = Bone;
exports.Mesh = Mesh;
exports.LineSegments = LineSegments;
exports.Line = Line;
exports.Points = Points;
exports.Group = Group;

...等

因此，您只需导入实际需要的模块，或者如上所述：通过

导入所有这些

 import * as THREE from 'three.js'

干杯

es6导入three.js

2 个答案: