VanillaJS -为什么这个JS类的导入/导出不起作用？
VanillaJS -为什么这个JS类的导入/导出不起作用？
提问于 2019-07-10 01:18:31
我正在尝试从文件"paddle.js“导入一个JS类，以便在另一个文件"game.js”中使用(不使用JS库或框架，只使用简单的VanillaJS)，我似乎不明白为什么这种导入/导出不起作用。我已经看过太多这样的例子和教程，我完全按照他们说的做了，但它就是不起作用。这可能是一个愚蠢的问题，但任何帮助都是非常感谢的。
这是来自我正在学习的YT教程，基本上我只是在paddle.js的顶部添加了“导出默认类桨"，并在game.js中包含了一个像"import Paddle from './paddle‘”这样的导入语句。然后在game.js文件中实例化该类。但它不起作用。我已经尝试了所有的组合，比如：
import Paddle from 'paddle'
import Paddle from './paddle'
import Paddle from '/paddle'
import Paddle from 'paddle.js'
import Paddle from './paddle.js'它们都不起作用。
// File: paddle.js
export default class Paddle{
constructor(gameWidth, gameHeight){
// some code
}
draw(ctx){
// a function in this class
}
}
// file: game.js
import Paddle from './paddle.js';
//var Paddle = require('paddle'); this doesn't work either
let c = document.getElementById("gameScreen");
let ctx = c.getContext("2d");
ctx.fillRect(20, 20, 100, 100); // would print a rectangle as a test
const GAME_WIDTH = 800;
const GAME_HEIGHT= 600;
//ctx.clearRect(0, 0, 800, 600);
let paddle = new Paddle(GAME_WIDTH, GAME_HEIGHT); // instantiating Paddle
paddle.draw(ctx);
// end预计它将成功实例化paddle类，并在我的html5画布上绘制一个paddle。但是相反，在开头包含import语句会导致文件根本不起作用，即我的画布是空的。
编辑(有些观众问)：//这是我的js_game.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VanillaJS game</title>
<link rel="stylesheet" type="text/css" href="game.css">
</head>
<body>
<canvas id="gameScreen" width="800" height="600">
</canvas>
<script src="game.js" type="text/javascript"></script>
<!-- <script src="paddle.js"></script> -->
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56957675
复制相关文章
相似问题