为什么一个导入语句的存在会破坏另一个导入语句？

Question

我有一个 JavaScript 文件，其顶部有以下两个

import

语句：

import { FbxLoader } from "./ThreeJs/examples/jsm/loaders/FBXLoader.js";
import * as Three from "./ThreeJs/src/Three.js";

当我将其加载到浏览器中时，我得到

Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

。但是，如果我注释掉第一个

import

，这个错误就会消失，但它看起来像是指的是第二个

import

，因为它引用了“三”！

如果我交换两个

imports

，浏览器控制台仍然在同一行报告相同的错误！

这是怎么回事？这些文件肯定存在，它们的路径也绝对正确。如果我使其中一个文件名不正确，我会在控制台中收到不同的（404）错误，因此这不应该是一个糟糕的路径问题。

Answer 1

THREE.FBXLoader 依赖于 Three.js 库，并且 使用自己的导入来获取这些依赖项。从 Threejs r156 开始，

"three"

导入是一个模块说明符，而不是完整路径，并且应该由捆绑器或构建工具来解析。

因为您似乎没有在此处使用捆绑器或构建工具，所以接下来最好的事情是创建一个 Import Map 将

"three"

的导入指向您自己的项目中该文件的位置。 Three.js 安装指南更详细地解释了这一点 – 当它引用 CDN 时，您可以在项目中使用本地路径。