我正在尝试从文件"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>
发布于 2019-07-10 01:32:19
我认为这是因为您使用了ES6语法,但可能没有Babel为您翻译它。在这种情况下,如果您不想配置Babel (虽然您应该使用ES6,但它比较新),您应该使用module.exports = Paddle
导出您的Paddle,然后在您的game.js中使用var Paddle = require('./paddle')
https://stackoverflow.com/questions/56957675
复制相似问题