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')
-
我一直在尝试编写一个程序来实现任意域上的多项式，一种数学结构。我选择了Haskell作为编程语言，我使用了语言扩展。但是，我不明白为什么GHCi不能推导出的约束条件。 在我看来，保证是的实例，这意味着是的实例。所以调用就像调用一样，应该是合理的。此外，我已经编写了作为约束，并且的构造函数具有的形状，因此它还应该知道的类型是的实例。 显然，译员的想法不同。我哪里搞错了？
-
如果我有的话 在< code>b.py中，我可以< code >导入a 但如果我有 在＜code＞c中。pydo，突然出现在我得到 怎么了？我看不出第二种情况与第一种情况有什么不同 因此...在最初启动的模块的目录中搜索模块。我只是不明白其中的道理。 我不是在问如何解决问题。而是首先问为什么会有问题...... （在Python 3.8.8上测试）
-
问题内容： 在有效的去它说，这些类型的进口平均副作用。我已经阅读了几个SO答案，但没有一个解释什么是。有人可以详细说明这个词吗？ 问题答案： 当他们说“导入副作用”时，它们实际上是指静态使用的代码/功能。这意味着仅导入软件包将导致一些代码在应用程序启动时执行，从而使我的系统处于与未导入该软件包的状态不同的状态（例如示例中注册处理程序的代码，它也可能放下config文件，修改光盘上的资源等）。有效的
-
我和同事一起创建了一个Angular 5应用程序。我为我的所有界面创建了一个文件夹，并按功能进行分组。然而，我没有在它们上包含任何导出符号，并且在使用它们时，我从不需要导入它们……它们只存在，不会产生任何编译错误。我喜欢这种方式，因为它使代码更干净，但我只是在利用一些bug吗？我的同事以“正确”的方式完成了它，并且需要在任何时候导入他想要使用的界面。有什么想法吗？您应该如何创建存在于单独文件中的接
-
为什么在JS中， React处理像这样导入 而 节点处理这样的导入 这纯粹是一种惯例吗？ 如果是，它们是否可以交换？ 如果不是，为什么这样做很重要？ 它们在幕后有什么区别，例如性能？
-
问题内容： 看一下这个文件： 它不编译；我需要。现在考虑这一点： 完全一样，只是用代替，所以不应该编译，对吧？错误。 好的，所以不必导入是众所周知的，但是 为什么 呢？“明显”的答案是因为它的使用频率远高于，但是不应该“隐式导入”吗？原始包装器类，例如和呢？用 远远 往往比和，但我必须进口，并不需要进口。 什么是落后不需要对进口的原因，，，和其他几个班？ 问题答案： 明显的答案是因为它的使用频率远