es6 导入 three.js

Question

我的 es6 工作流程使用 babel 和 babel-plugin-transform-es2015-modules-system.js 到 only 转换模块 import/export 与 system.js。我只是将 "green" 浏览器用于所有 es6 功能，除了模块的 import/export .. 这是 whatwg 标准，因此不是 "es6".

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

three.js除外。我尝试了所有三个版本：three.js、three.min.js 和 three.modules.js。前两个默默地失败，导致 "undefined" 模块。第三个失败了，想要 traceur ..我猜是为了一个 system.js-like transform?

那么我需要做什么才能在我的 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 不导出 THREE，而是导出所有不同的模块。使用导出检查 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

es6 Import of three.js

javascript

npm

three.js

ecmascript-6

es6-modules