Three.js 特定导入失败，可能是 Webpack 的错

Question

免责声明：我使用的是create-react-app 和three.js v0.99.0。

我正在尝试导入特定的 three.js 模块，因为直接从根模块导入包括捆绑包中的整个库，未压缩为 0.5MB。最直接的src/ 导入工作正常，但是在导入几何时，AKA 会改变这个：

import { Geometry } from "three";

到这里：

import { Geometry } from "three/src/core/Geometry";

我的图表上绘制的线条不再出现，也没有错误消息。此外，直接从src/ 导入 WebGLRendered 导致整个事情崩溃：

import { WebGLRenderer } from "three"; // from this
import { WebGLRenderer } from "three/src/renderers/WebGLRenderer"; // to this

出现错误：

WebGLIndexedBufferRenderer.js:14 Uncaught TypeError: Cannot read property 'type' of undefined
    at WebGLIndexedBufferRenderer.setIndex (WebGLIndexedBufferRenderer.js:14)
    at WebGLRenderer.renderBufferDirect (WebGLRenderer.js:505)
    at renderObject (WebGLRenderer.js:932)
    at renderObjects (WebGLRenderer.js:913)
    at WebGLRenderer.render (WebGLRenderer.js:790)
    at SceneManager.js:75
    ...

我在three.js 库中检查了这些模块的定义，它们实际上是在three.module.js 和src/ 之间复制粘贴的，所以我找不到任何代码差异。但是，我确实注意到的一件事是，如果我同时导入并打印它们，Webpack 似乎正在转换我从 src/ 导入的那个：

ƒ Geometry() {
  Object.defineProperty(this, 'id', {
    value: geometryId += 2
  });
  this.uuid = _math_Math_js__WEBPACK_IMPORTED_MODULE_10__["_Math"].generateUUID();
  ...

相对于：

ƒ Geometry() {
  Object.defineProperty(this, 'id', {
    value: geometryId += 2
  });
  this.uuid = _Math.generateUUID();
  ...

create-react-app 的 Webpack 是否可能会混淆 src/ 文件夹中的导入，从而使它们无法工作，尽管源代码相同？如果是这样，有没有办法让它只在 MY src/ 文件夹中转译代码，而不是第 3 方模块？

Answer 1

这可能是一个 babel 问题。默认情况下，babel 不会转译 node_modules 中的任何内容，但是您是从 ES6 源导入的，因此您需要强制它转译这些内容。在你的 webpack 配置中，你应该有一个 js(x) 文件的规则（在 module.rules 中），看起来像

{
  test: /\.jsx?$/,
  use: 'babel-loader'
}

添加一个自定义排除，它将排除 node_modules 中的所有内容除了 three 文件，即

{
  test: /\.jsx?$/,
  exclude: /node_modules\/(?!three)/,
  use: 'babel-loader'
}