Question

我有一个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>

但是，我在控制台中收到以下错误：未捕获的ReferenceError：未定义Foo 。

是否有一种简单的方法来使用另一个文件中定义的类，即从 foo.js 内部的Foo？

Answer 1

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

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

来自https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules：

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

在脚本中导入类

1 个答案: