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

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"可以解决这个问题。 当我这样做时，错误变成了“Uncaught SyntaxError: Unexpected identifier”。 关于如何使用 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);
};