ES6 中的 Javascript 类，如何在其他 js 文件和 html 文件中导入它们？答案

【问题标题】：Javascript classes in ES6, how to import them within other js-files and in html files?ES6 中的 Javascript 类，如何在其他 js 文件和 html 文件中导入它们？
【发布时间】：2018-05-01 01:41:52
【问题描述】：

显然，我是一个初学者，正在努力弄清楚基本的员工，所以请多多包涵！

我将所有这些文件（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 (Official Build) (64-bit))

// 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>

【问题讨论】：

标签： javascript html class oop ecmascript-6

【解决方案1】：

问题一：

您有一个循环依赖 - app.js 导入 calc.js，但 calc.js 导入 app.js。

通常，模块系统会确保模块的所有依赖项在模块本身之前执行，但是当您的依赖项树有循环时这是不可能的 - 它必须选择其中一个首先运行。在这种情况下，首先运行calc.js，此时Test 尚未定义！

如果你小心的话，有很多方法可以解决这个问题，但循环依赖几乎总是表明你的代码结构错误 - 最好的解决方案是重新组织它，这样你就不再有循环了。

问题 2：

ES2016 模块不在全局范围内执行。如果你想让某些东西对整个窗口可用，你需要明确：

window.Calc = Calc;

【讨论】：

非常感谢。 问题 1 已完美解决。但是在 Problem2 中，尽管我在标题 <script src="./calc.js" type="module"></script> 中添加了脚本，但我仍然得到 Uncaught ReferenceError: Calc is not defined。换句话说，我不能添加属性window.Calc，因为没有定义类Calc！
你把window.Calc = Calc放在哪里？它需要在您的模块之一中，而不是在 HTML 中。
谢谢 :) 这解决了剩下的问题 :D
@user2804070: 太棒了 :) 如果可以的话，我建议将所有代码保留在模块中，而不是在 HTML 中保留一些代码，因为它使事情变得更简洁 - 有时你不需要虽然没有选择，所以知道如何解决它是件好事。