为什么这个“导入WebGL”语句在我的Vite项目中不起作用？

Question

声明：

import { WebGL } from 'three/addons/capabilities/WebGL.js';

关于我的项目设置：

• 我使用“npm create vite@latest”创建了根文件夹
• 运行“npm install”，然后运行“npm install --save 3”
• 运行“npm run dev”，在 package.json 中定义为“vite”
• index.html 的主体有这一行：

<script type="module" src="/main.js"></script>

• Main.js 包含顶部的一行以及基本的 Three.js 场景的代码，这是我从 Three.js 的官方文档复制的

• 当我运行服务器时，我得到一个空白的白页。

---

浏览器控制台显示此错误：

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/three_addons_capabilities_WebGL__js.js?v=fc132b03' does not provide an export named 'WebGL' (at main.js:40:10)

---

项目树：

.
├── counter.js
├── index.html
├── javascript.svg
├── main.js
├── node_modules
│   ├── @esbuild
│   ├── esbuild
│   ├── function-bind
│   ├── has
│   ├── is-core-module
│   ├── nanoid
│   ├── path-parse
│   ├── picocolors
│   ├── postcss
│   ├── resolve
│   ├── rollup
│   ├── source-map-js
│   ├── supports-preserve-symlinks-flag
│   ├── three
│   └── vite
├── package-lock.json
├── package.json
├── public
│   └── vite.svg
└── style.css

---

---

---

我很困惑，因为官方 Three.js 文档中建议了该声明。我知道我可以使用绝对路径而不是别名，但我想了解为什么它不能按原样工作。只是想学习一下。

提前致谢

Answer 1

我认为它是默认导出的。所以你必须像这样导入它： 从“三/插件/功能/WebGL.js”导入WebGL；

但是我的 IDE（Ubuntu 上的 Visual Code）仍然存在问题： 找不到模块“三/插件/功能/WebGL.js”或其相应的类型声明。 可能在使用打字稿时，我需要再次安装这些类型，但我不确定。