Question

我正在尝试从文件“ paddle.js”中导入一个JS类，以便在另一个文件“ game.js”中使用（不使用JS库或框架，仅使用简单的VanillaJS），我不能似乎弄清楚了为什么此导入/导出无法正常工作。我已经看到了太多这样的示例和教程，并且确实按照他们所说的去做，但是那是行不通的。这可能是一个愚蠢的问题，但是可以提供任何帮助。

这是我正在关注的YT教程中的内容，我基本上只是采用在paddle.js顶部添加“ export default class Paddle”的方法，并包括诸如“ import Paddle”的import语句。来自game.js中的“ ./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>

Answer 1

我认为这是因为您使用ES6语法，但可能没有Babel可以为您进行翻译。在这种情况下，如果您不想配置Babel（尽管您应该使用ES6，它是更新的），则应该使用module.exports = Paddle导出Paddle，然后在game.js中使用var Paddle = require('./paddle')

VanillaJS-为什么此JS类的导入/导出不起作用？

1 个答案: