Javascript 在脚本中导入类

我有一个flask应用程序，它的以下文件位于static/js/foo.js：

export default class Foo {
  constructor(message) {
    this.message = message;
  }
  toString() {
    return `${this.message}`;
  }
}

在我的templates/index.html文件中，我试图创建

Foo

的一个实例，如下所示：

  <script src="{{ url_for('static', filename='js/foo.js') }}" type="module"></script>
  <script>
    let foo = new Foo('hello foo!');
    console.log(`${foo}`);    
  </script>

设foo=newfoo（'hello foo！'）；
log（`${foo}`）；

但是，我在控制台中遇到以下错误：未捕获引用错误：未定义Foo

---

是否有一种简单的方法可以使用另一个文件中定义的类，即Foo.js中的

Foo

？

您还需要将内联脚本设置为模块，并从Foo.js导入Foo：

从{{url_for（'static'，filename='js/Foo.js'）}导入Foo；
设foo=newfoo（'hello foo！'）；
log（`${foo}`）；

发件人：

最后但并非最不重要的一点是，让我们明确一点——模块功能被导入到单个脚本的作用域中——它们在全局作用域中不可用。因此，您将只能访问它们导入到的脚本中的导入功能，例如，您将无法从JavaScript控制台访问它们。您仍然会在DevTools中看到语法错误，但是您将无法使用一些您可能期望使用的调试技术