Ecmascript 6 如何将Three.js行库作为ES6模块导入？

我使用现代JS（ES6）进行开发，这意味着模块

尽管Three.js作为ES6模块提供。线库-

LineSegmentsGeometry

、

LineGeometry

、

LineSegments2

等-不可用

---

我的选择是什么？

您有几个选择

首先，编辑代码。

欢迎您修改代码，这样您就可以手动将其转换为ES6模块。您可能希望删除

THREE

的任何引用，并导出通常附加到该对象的任何内容。您还需要导入任何必需的core THREE.js组件，如

Mesh

、

Vector3

等

我更喜欢这样做的方式是复制我正在本地更新的文件，并更改对它的引用。例如：

// local_three_modules/LineSegments2.js
import { Mesh, Vector3, etc. } from "three"

let LineSegments2 = function ( geometry, material ) {
    // ...
}

export default LineSegments2

您的另一个选择是将捆绑机与导出加载程序一起使用。

Webpack（和其他捆绑包，我只是更熟悉Webpack）提供了一个

导出加载程序

，可以用于不导出任何内容的特定文件。例如，您可以告诉

导出加载程序

从

LineSegments2.js

导出

三个

。要让webpack参与这个过程，您需要告诉它使用文件的加载程序。您可以通过webpack配置来实现这一点，也可以在代码中内联实现，如下所示：

import THREE from "exports-loader?THREE!./node_modules/three/examples/js/lines/LineSegments2.js"

---

谢谢我想我会接受你的建议，编辑代码。虽然我确实使用Webpack/Babel，但我在生成生产代码时会这样做。在应用程序开发期间，我只需直接编写ES6。再次感谢。

import THREE from "exports-loader?THREE!./node_modules/three/examples/js/lines/LineSegments2.js"