javascript - TypeScript 编译后 : Uncaught SyntaxError: Unexpected token {

Question

Scenario

每当我从 index.html 运行应用程序时，都会引用 main.js 文件，该文件是使用 es6 从 Typescript 编译而来的目标和 ESNext 作为模块，我在浏览器中收到此错误:

Error

main.js:3 未捕获的语法错误:意外的标记 {

Main.ts

    ///     IMPORTS
    //////////////////////////////////////////////////////////////////////
    import { Player }     from './classes/Player'   <= Error Here!
    import { printTable } from './helpers/Helpers'

    ///     MAIN COMMANDS
    //////////////////////////////////////////////////////////////////////
    let p1 = new Player('Bob', 'Hunter', 1, 10);

    printTable(p1);

Concept

我似乎未正确导入代码，并且(无论出于何种原因)不知道原因或无法弄清楚。无论我在哪里看，这都被指示为导入导出的代码、类等的方法...当所有代码都存在于单个文件、所有类、接口(interface)、帮助程序等中时...，所有内容都会转换并运行花花公子，除非我想划分我的代码，并以这种方式处理它。

任何指导都将不胜感激。

• 提前干杯并表示感谢!

Source Code

Answer 1

...and ESNext as the module, I get this error within the browser:
main.js:3 Uncaught SyntaxError: Unexpected token {

此处的错误是您尝试在传统脚本中使用 ES6 导入语法 ( <script src="index.js"></script> )。使用 ES6 import和export仅适用于模块，在浏览器中使用 <script type="module" src="whatever"></script> .

您是否考虑过使用 Webpack ？它可以自动将您的 TypeScript 文件编译成一个 JavaScript 包，您可以使用单个脚本标记将其加载到 HTML 文件中。