typescript - 使用 vite 和 typescript 编译器构建时，使用 three.js/react/vite 制作的项目会中断，但使用 npm run dev （开发服务器）可以正常工作

Question

所以我决定用three.js做一个项目，react和vite。后来我意识到我不想真正打扰 React，所以我项目中的 React 代码主要是骨架代码（如默认的 App 组件等）。我决定就这样离开它，基本上只专注于学习three.js。我的项目使用npm run dev. 所以我尝试使用 npm run build 来构建它。它生成一个 dist 文件夹，其中包含一个 index.html 和一个 assets 文件夹。assets 文件夹中有三个文件：

index.02582158.css

index.c83bad18.js

vendor.5957e3fb.js

我猜这是某种压缩的 css，另外两个是 typescript/typescript react 文件转译？

当我尝试运行构建的 dist 文件夹时，使用npm run serve它说

vite v2.3.8 build preview server running at: Local: http://localhost:5000/

我访问该页面，它是一个黑屏，每个错误都是这样的：

index.c83bad18.js:1 未捕获类型错误：无法读取未定义的属性“adjustOrbit”

adjustOrbit 是 typescript 文件中定义的导出类的对象的成员函数。它闪烁得非常快，但我看到 npm run build 确实构建了这个 .ts 文件。所以我不确定我做错了什么。

当我尝试将其放在 GitHub 页面上时，我在上述所有三个文件中都找不到 404。通过更改 dist 内 index.html 中的 src 和 href 从

/assets/index.c83bad18.js对于./assets/index.c83bad18.js这三个中的每一个（在每个路径的开头添加一个点），GitHub Pages 停止说 404 not found 并且与尝试使用 vite 运行构建预览有相同的问题。

更新：如果我注释掉前面提到的从导出的 .ts 类中调用对象成员函数的代码，我会得到......我会描述为......我的 three.js 代码中有 25% 实际呈现在屏幕上。它根本不起作用。还有更多关于Uncaught (in promise) DOMException: The element has no supported sources.

标签： typescriptthree.jsvitenpm-build

Answer 1

我想我找到了解决方案。我说想想，因为我前一阵子解决了这个问题，忘记写下我是怎么想出来的。我很确定这是因为我的 three.js 代码找不到任何使用的资产，因此当从 typescript 编译为 javascript 时整个项目会中断。为了解决这个问题，我导入了所有使用的资产，以便将它们与其他所有内容一起编译：

import skyboxTop from './assets/skyboxwithsun/top.png?url'

在我做类似的事情之前

txtLoader = new THREE.TextureLoader("./assets/skyboxwithsun/top.png", callbackfunc)

现在我做

txtLoader = new THREE.TextureLoader(skyboxTop, callbackfunc)

但我认为它失败的原因是因为该资产 top.png 在 vi​​te 构建应用程序时被编译成一些奇怪的文件名，它将类似于 c3ga867fj34.png

所以因为我的加载器无法解析这些 url，我认为这就是为什么一切都坏了。导入确保它skyboxTop在运行时可用。