Three.js特定的導入失敗，可能是Webpack的錯誤

Question

免責聲明：我正在使用create-react-app和three.js v0.99.0 。

我正在嘗試導入特定的three.js模塊，因為直接從根模塊導入包括捆綁包中的整個庫，壓縮后的文件大小為0.5MB。 大多數直接src/導入都可以正常工作，但是在導入Geometry時，也可以更改以下內容：

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個partiyy模塊的代碼中進行轉碼？

Answer 1

這可能是通天塔的問題。 默認情況下，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'
}