显然，我是一个初学者，正在尝试弄清楚基本的五线谱，所以请耐心等待!
我将所有这些文件(index.html、app.js 和 calc.js)放在同一个文件夹中，它们的内容如下所示。
我有 2 个问题:
1: 为什么在文件 (app.js) 中，导入类 Calc 并创建它的新实例有效，而在文件 (calc.js) 中则类似的过程不适用于Test类？
2:如何在 *.html 文件中使用类“Calc”？
注意:我在 Mac OS 10.13 上使用 Chrome(62.0.3202.94(官方版本)(64 位))
// app.js
import { Calc } from './calc.js';
class Test {
static hello() {
console.log("hello from class1");
}
}
let c = new Calc(); // this works!
console.log(c.sum(2, 3) + 1); // 6
export { Test };
和
// calc.js
import { Test } from "./app.js";
class Calc {
sum(a, b) {
return a + b;
}
}
let t = new Test(); // Uncaught ReferenceError: Test is not defined
t.hello();
export { Calc };
最后是 HTML 文件:
<html>
<head>
<meta charset="utf-8" />
<script src="./app.js" type="module"></script>
<script src="./calc.js" type="module"></script>
</head>
<body>
<h1>ES6</h1>
<script>
let c = new Calc();
// simulate input summation from two textboxes for example
console.log(c.sum(2, 1)); //Uncaught ReferenceError: Calc is not defined
</script>
</body>
</html>
最佳答案
问题 1:
您有循环依赖 - app.js 导入 calc.js，但 calc.js 导入 app.js.
通常，模块系统会确保模块的所有依赖项在模块本身之前执行，但是当您的依赖项树有循环时，这是不可能的 - 它必须选择其中一个首先运行。在本例中，calc.js 首先运行，此时 Test 尚未定义!
如果你小心的话，有很多方法可以解决这个问题，但是循环依赖几乎总是表明你的代码结构是错误的 - 最好的解决方案是重新组织它，这样你就不再有循环了。
问题2:
ES2016 模块不在全局范围内执行。如果您想让整个窗口可以使用某些内容，则需要明确:
window.Calc = Calc;
关于ES6 中的 Javascript 类，如何将它们导入到其他 js 文件和 html 文件中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47347942/