对同一目录中的两个 javascript 文件使用导入/导出有困难
我正在学习一个简单的在线教程。没有什么花哨的事情发生，我没有使用 Node 或 React。这家伙正在使用 Sandbox，但我只是使用 Brackets 和桌面上的文件夹来包含我的文件。一切都很好，直到我必须将一个类从一个脚本 ( paddle.js )导出到主脚本 ( index.js )。在更改第一行之前，正如预期的那样，我在浏览器中只有一个空白画布。更改第一行（分别通过插入导出/导入命令）后，我在 Chrome 中收到以下错误：
未捕获的语法错误：意外的标识符 index.js:1
未捕获的语法错误：意外的令牌导出 paddle.js:1
这是我的脚本 paddle.js：
export default class Paddle {
constructor(gameWidth, gameHeight){
this.width = 150;
this.height = 30;
this.position = {
x: (gameWidth - this.width) / 2,
y: gameHeight - this.height - 10,
};
}
draw(ctx){
ctx.fillRect(this.position.x,this.position.y,this.width,this.height);
}
}
这是我的脚本 index.js：
import Paddle from 'paddle';
let canvas = document.getElementById("gameScreen");
let ctx = canvas.getContext('2d');
const GAME_WIDTH = 800;
const GAME_HEIGHT = 600;
ctx.clearRect(0,0, GAME_WIDTH,GAME_HEIGHT) //clears region between corners of screen, necessary fro re-drawing because screen does not 'reset' until I tell it to.
let paddle = new Paddle(GAME_WIDTH, GAME_HEIGHT);
paddle.draw(ctx);
这是我的 html 文件 index.html（主要是样板文件）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#gameScreen{
border: 1px solid black;
}
</style>
<title>breakout tutorial</title>
</head>
<body>
<canvas id = "gameScreen" width="800" height="600"></canvas>
<script src = "index.js"></script>
<script src = "paddle.js"></script>
</body>
</html>
我应该在屏幕底部得到一个蓝色的桨，就像这个人的视频一样：
https://www.youtube.com/watch?v=3EMxBkqC4z0
浮云间2回答
-
眼眸繁星
在本教程中，这家伙使用的 IDE 可能位于浏览器中，也可能通过一些花哨的文件管理。他需要使用导入/导出。我不需要这样做，因为我的所有脚本都在同一个目录中。所以我去掉了那些导入/导出命令。我DID需要做的是加载“桨”类到HTML文件中领先于其他.js文件的（index.js）使用它（废话，我装它们以相反的顺序）。当我这样做时，我得到了这个：现在，我知道这个解决方案在堆栈溢出时很常见，所以我想说我非常感谢每个有经验的人阅读我们的鸡爪并说“嗯，打赌你忘记了'x，y，z'！” . 随着我的不断成长，我将期待解决此类导入/导出命令问题的方法。
随时随地看视频慕课网APP
相关分类
JavaScript