Javascript 为什么这个JS类的导入/导出不起作用？_Javascript

Javascript 为什么这个JS类的导入/导出不起作用？

javascript

Javascript 为什么这个JS类的导入/导出不起作用？,javascript,Javascript,我正在尝试从文件paile.JS导入一个JS类，用于另一个文件game.JS。没有使用JS库或框架，只是简单的VanillaJS，我似乎不明白为什么这个导入/导出不起作用。我看过太多这样的例子和教程了，我完全按照他们说的做，但就是不起作用。这可能是一个愚蠢的问题，但任何帮助都是感激的这是我正在学习的一个YT教程中的内容，我基本上只是在paile.js的顶部添加了导出默认类paile，并在game.js中包含了一个导入语句，比如import-paile-from'./pailer'。然后在gam

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

这是我正在学习的一个YT教程中的内容，我基本上只是在paile.js的顶部添加了导出默认类paile，并在game.js中包含了一个导入语句，比如import-paile-from'./pailer'。然后在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

预计它将成功实例化Pable类，并在我的html5画布上绘制一个桨。但是，在开头包含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>

我认为这是因为您使用ES6语法，但可能没有Babel为您传输它。在这种情况下，如果您不想配置Babel，尽管您应该使用ES6，但它是较新的，您应该使用module.exports=blade导出您的挡板，然后在game.js中使用var-blade=require./blade'

您的文件夹结构是什么？你能把它粘贴到这里吗？你把type='module'放在了pable.js的链接中了吗？你有没有收到任何错误？如何将game.js包含在您的网站中？你的项目结构是什么？@llievredemars我只是想确保文件夹不会引起任何争议，所以我只是转移了同一文件夹下的所有文件。并从import语句中删除了VanillaJS数据路径。所以我确信这不会引起任何问题。重复和/或我只是尝试了一下，但也不起作用。我只是很惊讶为什么这些简单明了的东西不起作用。除非我只是在game.js文件中包含了pable的类代码。这样可以工作，但这只是一个混乱的代码。浏览器中没有module.exports或requireenvironment@Bergi由于浏览器环境中不存在module.exports，您是否有建议的解决方案？我很好奇如何使这项工作。谢谢。@PA-GW有关如何使用ES6模块的本机浏览器支持，请参阅副本。或者，使用模块加载程序库和transpiler。