【发布时间】：2019-11-19 07:29:10
【问题描述】：
我正在尝试从文件“paddle.js”中导入一个 JS 类，以便在另一个文件“game.js”中使用（没有使用 JS 库或框架，只是纯简单的 VanillaJS），但我不能似乎弄清楚为什么这个导入/导出不起作用。我已经看过太多这方面的示例和教程，而且我正在按照他们所说的那样做，但是它不起作用。这可能是一个愚蠢的问题，但任何帮助表示赞赏。
这是来自我正在关注的 YT 教程，我基本上只是采用在 paddle.js 顶部添加“导出默认类 Paddle”的方法，并包括一个导入语句，如“import Paddle”来自'./paddle'"，在 game.js 中。然后在 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>
【问题讨论】：
-
你的文件夹结构是什么？可以贴在这里吗？
-
你把 type='module' 放到 paddle.js 的链接里了吗？
-
您是否遇到任何错误？您如何在您的网站中包含
game.js？你的项目结构是什么？ -
@llievredemars 我只是确保文件夹不会引起任何争议，所以我只是转移了同一文件夹下的所有文件。并从 import 语句中删除了 VanillaJS 数据路径。所以我确信这不会造成任何问题。
标签： javascript