Question

我无法将三个 js 导入到我的项目中。首先我跑了：

我正在关注此处的文档：https://threejs.org/docs/#manual/en/introduction/Installation

我在我的 VS 代码终端中为我的文件夹项目运行了这个：

npm install --save three

然后我创建了样板 HTML 并将其链接到我的 JS 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL</title>
</head>
<body>
    
    <script src="app.js"></script>
</body>
</html>

然后我只是将文档代码复制并粘贴到 JavaScript 文件中：

import * as THREE from 'three';
//etc.

，但我收到此错误：

如果我将脚本更改为：

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

我收到此错误：

这是我的文件夹结构，一切似乎都以链接方式工作，因为当我执行“alert("Hello World)”时，我的 JS 文件在实时服务器 VS 代码上工作。

为什么我的导入语句会导致我的错误？提前致谢。

Answer 1

假设您正在关注 this documentation...

阅读您抄袭的代码示例后的段落：

<块引用>

从 npm 安装时，您几乎总是会使用某种捆绑工具将项目所需的所有包组合到一个 JavaScript 文件中。虽然任何现代 JavaScript 打包器都可以与 Three.js 一起使用，但最流行的选择是 webpack。

你没有这样做。您正在尝试将其直接加载到浏览器中。

看下面的例子。

您需要：

使用文件的 URL，而不依赖于 node.js 的无扩展模块解析系统
使用 type="module" 脚本

一般来说，更好的方法是使用 Webpack 或 Parcel 等打包程序编写代码。

尝试使用three.js时出现“未捕获的语法错误：无法在模块外使用导入语句”

1 个答案: