导入类时“不能在模块外使用导入语句”和“未捕获的语法错误：意外的标识符”

Question

我正在尝试将一个类导入到我的“main.js”文件中。这是我的代码的缩小版。

// "extended.js" file

export default class Test {
  constructor() {
    this.prop = "Hello"
    console.log(this.prop)
  }
}


// "main.js" file

window.onload = function () {
  import Test from "./extended"
  new Test()
}

main.js 文件是我的 Express 应用程序的前端 JavaScript 文件，因此它存储在“public”文件夹中。当您加载页面时，发生的初始错误是“无法在模块外使用导入语句”。我自己做过研究，很多人都说使用 “main.js”脚本标签的type="module" 将解决该问题。当我这样做时，错误变为“未捕获的语法错误：意外的标识符”。关于如何使用 ES6 模块和类，我有什么遗漏吗？

Answer 1

您只能在顶层导入 - 不能在块内完成。改变

window.onload = function () {
  import Test from "./extended"
  new Test()
}

到

import Test from "./extended"
window.onload = function () {
  new Test()
};

不过，我也建议不要为副作用创建类 - 如果您只想让类 做 某事，而不是 返回 有用的东西，请使用而是一个普通的函数。

export default () => {
  const prop = "Hello";
  console.log(prop);
};