时间戳

首页 > 解决方案 > Three.js 特定导入失败，可能是 Webpack 的错

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

问题描述

免责声明：我正在使用create-react-appand three.js v0.99.0。

我正在尝试导入特定的 three.js 模块，因为直接从根模块导入包括捆绑包中的整个库，未压缩为 0.5MB。大多数直接src/导入都可以正常工作，但是在导入几何时，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
    ...

我在 three.js 库中检查了这些模块的定义，它们实际上是在 and 之间复制粘贴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-appWebpack 混淆了src/文件夹中的导入，从而使它们无法工作，尽管源代码相同？如果是这样，有没有办法让它只在我src/的文件夹中转译代码，而不是第 3 方模块？

标签： javascriptwebpackimportthree.jscreate-react-app

解决方案

这可能是一个 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'
}

推荐阅读