使用 type=module 导入 javascript class

Question

我想将 class 导出到另一个 js 文件，但我在浏览器的控制台上看不到任何输出？我一直在按照本教程以及其他教程的步骤进行操作：https://www.youtube.com/watch?v=cRHQNNcYf6s&t=190s 它们显示的内容与我编写的代码类似。我告诉浏览器我也在使用 type="module" 的模块。

抱歉，如果我遗漏了什么，但我可以在这里找到帖子：How do I include a JavaScript file in another JavaScript file? 处理复杂的场景和功能，我只需要导入一个 Class

class 1:

import Rectangle from "./class2.js";

const rect = new Rectangle(100, 100);

rect.printHeight();

class 2:

export default class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  printHeight() {
    console.log(this.height);
  }
}

我像这样导入脚本

<script type="module" src="class1.js"></script>

Answer 1

改变这个：

import Rectangle from "./class2";

...为此：

import Rectangle from "./class2.js";

问题是，如果您只给文件命名，浏览器无法解析文件路径 - 您还需要扩展名（它可能会抛出 404 错误）。因为您没有使用捆绑器或任何其他形式的 pre-processing，所以如果您不这样做，就没有什么可以解决的。

使用 type=module 导入 javascript class

Importing javascript class using type=module

javascript

import

class