javascript - 尝试使用three.js时“未捕获的语法错误:无法在模块外使用导入语句”
问题描述
我无法将三个 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 代码上运行。
为什么我的导入语句会导致我的错误?提前致谢。
解决方案
假设您正在关注本文档……</p>
阅读您正在抄袭的代码示例之后的段落:
从 npm 安装时,您几乎总是会使用某种捆绑工具将项目所需的所有包组合到一个 JavaScript 文件中。虽然任何现代 JavaScript 打包器都可以与 three.js 一起使用,但最受欢迎的选择是 webpack。
你没有那样做。您正在尝试将其直接加载到浏览器中。
看下面的例子。
你需要:
- 使用文件的 URL 而不依赖于 node.js 的无扩展模块解析系统
- 使用
type="module"
脚本
一般来说,更好的方法是使用 Webpack 或 Parcel 之类的打包器编写代码。
推荐阅读
- javascript - 在 JavaScript 中批量处理大型 JSON 数据集并将其发布到服务器
- javascript - Angular 7:从服务发送响应消息
- c# - .NET SDK for Azure 中 Get-AzureRmResource 的 C# 等效项是什么?
- php - 如何在我的 yii2 项目中修复“调用数组上的成员函数 offset()”错误
- html - Mysql - 检查约束以限制 HTML 代码或只允许表格列中的数字、字母、空格和连字符
- sql-server - UNION SELECT、并行化和 IDENTITY
- sql - ms-access中的sql
- html - 如何在水平模式下在全屏 WebApp 中运行时擦除移动 Safari 中的状态栏?
- javascript - 从 http 响应正文中获取特定值
- linux - Linux内核跟踪点:将探测函数连接到跟踪点时符号未定义