[英]Three.js specific imports failing, possibly Webpack's fault
Disclaimer: I'm using create-react-app
and three.js v0.99.0
. 免责声明:我正在使用
create-react-app
和three.js v0.99.0
。
I'm trying to import specific three.js modules, since importing straight from the root module includes the entire library in the bundle, which is 0.5MB uncompressed. 我正在尝试导入特定的three.js模块,因为直接从根模块导入包括捆绑包中的整个库,压缩后的文件大小为0.5MB。 Most direct
src/
imports work fine, however when importing Geometry, AKA changing this: 大多数直接
src/
导入都可以正常工作,但是在导入Geometry时,也可以更改以下内容:
import { Geometry } from "three";
to this: 对此:
import { Geometry } from "three/src/core/Geometry";
The line on my graph that it was drawing no longer appears, and there's no error messages. 我的图形上正在绘制的线不再出现,并且没有错误消息。 In addition, importing the WebGLRendered straight from
src/
caused the whole thing to implode: 另外,直接从
src/
导入WebGLRendered导致整个内爆:
import { WebGLRenderer } from "three"; // from this
import { WebGLRenderer } from "three/src/renderers/WebGLRenderer"; // to this
with the error: 与错误:
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
...
I checked the definitions of these modules in the three.js library, and they are literally copy pasted between three.module.js
and src/
, so there's no code differences I can find. 我在three.js库中检查了这些模块的定义,它们实际上是复制粘贴在
three.module.js
和src/
之间,因此没有代码差异。 However, one thing I did notice is that if I import both and print them, Webpack seems to be transpiling the one I import from src/
: 但是,我确实注意到的一件事是,如果我同时导入和打印它们,Webpack似乎正在对我从
src/
导入的内容进行编译:
ƒ Geometry() {
Object.defineProperty(this, 'id', {
value: geometryId += 2
});
this.uuid = _math_Math_js__WEBPACK_IMPORTED_MODULE_10__["_Math"].generateUUID();
...
as opposed to: 相对于:
ƒ Geometry() {
Object.defineProperty(this, 'id', {
value: geometryId += 2
});
this.uuid = _Math.generateUUID();
...
is it possible that create-react-app
's Webpack is messing with imports that are within a src/
folder, thus making them not work despite the source code being identical? create-react-app
的Webpack是否有可能与src/
文件夹中的导入弄混了,从而即使源代码相同也无法使它们正常工作? If so, is there a way to make it only transpile code within MY src/
folder, and not the 3rd partiy modules'? 如果是这样,是否有办法使其仅在MY
src/
文件夹中而不是第3个partiyy模块的代码中进行转码?
It's probably a babel issue. 这可能是通天塔的问题。 By default, babel won't transpile anything in
node_modules
, however you're importing from the ES6 source, so you need to force it to transpile these. 默认情况下,babel不会在
node_modules
转译任何东西,但是您是从ES6源导入的,因此您需要强制其转译这些东西。 In your webpack config, you should have a rule (in module.rules) for js(x) files that looks something like 在您的webpack配置中,您应该在js(x)文件中有一个规则(在module.rules中),看起来像
{
test: /\.jsx?$/,
use: 'babel-loader'
}
add a custom exclude that will exclude everything in node_modules
except the three
files, ie 添加一个自定义排除,它将排除
node_modules
除 three
文件之外的所有内容,即
{
test: /\.jsx?$/,
exclude: /node_modules\/(?!three)/,
use: 'babel-loader'
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.