web-dev-qa-db-ja.com

es6three.jsのインポート

Es6の私のワークフローでは、babelとbabel-plugin-transform-es2015-modules-system.jsを使用してのみ system.jsで使用するためにモジュールのインポート/エクスポートを変換します。モジュールのインポート/エクスポートを除くすべてのes6機能に「グリーン」ブラウザを使用するだけです。モジュールはwhatwg標準であるため、「es6」ではありません。

これはレガシー（es6以外）ライブラリでうまく機能し、必要なすべてのnpmパッケージを「インポート」できます。どういうわけか、babelモジュールだけが変換され、system.jsが魔法のように機能するbabel。

Three.jsを除く。 three.js、three.min.js、three.modules.jsの3つのリリースすべてで試してみました。最初の2つはサイレントに失敗し、「未定義」のモジュールになります。 3番目は失敗し、トレーサーが必要です.. system.jsのような変換を推測しますか？

では、es6の世界でthree.jsを使用するには、何をする必要がありますか？

<script>タグと3つのグローバルを使用できると思います。または、rollup/webpackを使用してモジュールを削除しますか？

しかし、私は合理的な解決策があるに違いありません。結局のところ、three.jsは内部でes6モジュールを使用します。

javascriptnpmthree.jsecmascript-6es6-modules
8
backspaces

リリースにはバグがありました（たった1日です！）。修正しましたが、まだ問題がありました。しかし、私はこれが機能することを発見しました：

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

..しかし、より明白なバージョン、

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

動作していないようです。

これよりもうまくやったら教えてください。これはかなりランダムです。

13
backspaces

同じ問題が発生しましたが、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'

乾杯

5
Merc