Ошибка импорта в Three.js, возможно, ошибка Webpack

Question

Отказ от ответственности: я использую create-react-app и three.js v0.99.0.

Я пытаюсь импортировать определенные модули three.js, так как импорт прямо из корневого модуля включает в себявся библиотека в комплекте, которая на 0,5 МБ несжата.Самый прямой src/ импорт работает нормально, однако при импорте Geometry AKA изменяет это:

import { Geometry } from "three";

на следующее:

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

Линия на моем графике, которую он больше не рисовалпоявляется, и нет сообщений об ошибках.Кроме того, импорт WebGLRendered прямо из src/ привел к взрыву всего этого:

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
    ...

Я проверил определения этих модулей в трехбиблиотеки .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 работает с импортом, который находится в папке src/, поэтому он не работает, несмотря на идентичность исходного кода?Если да, то есть ли способ сделать так, чтобы он только передавал код в папке MY src/, а не в модулях 3-его партии? *

Answer 1

Это, наверное, проблема с бабеллом.По умолчанию, babel ничего не переносит в node_modules, однако вы импортируете из источника ES6, поэтому вам нужно заставить его это перенести.В вашей конфигурации веб-пакета у вас должно быть правило (в module.rules) для файлов js (x), которое выглядит примерно так:

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

добавьте пользовательское исключение, которое исключит все в node_modules кроме файлов three, т.е.

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