VanillaJS-为什么这个JS类的导入/导出不工作？[副本]

提问者：小点点

VanillaJS-为什么这个JS类的导入/导出不工作？[副本]

我试图从文件“paddle.JS”中导入一个JS类，以便在另一个文件“game.JS”中使用（没有使用JS库或框架，只是纯简单的VanillaJS)，我似乎不明白为什么这个导入/导出不起作用。我看过太多的例子和教程，我完全按照他们说的做，但它就是不起作用。这可能是一个愚蠢的问题，但任何帮助都是感激的。

这是我正在学习的一个YT教程，我基本上是在Paddle.js的顶部添加“导出默认类Paddle”，并在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>

共1个答案

匿名用户

我认为这是因为您使用ES6语法，但可能没有巴别塔为您传递它。在这种情况下，如果您不想配置Babel（虽然您应该使用ES6，但它较新），您应该使用module.exports=Paddle导出您的Paddle，然后在您的game.js中使用var Paddle=require('./Paddle')