TypeScript 编译器选项“意外的令牌导入”答案

【问题标题】：TypeScript compilerOptions "unexpected token import"TypeScript 编译器选项“意外的令牌导入”
【发布时间】：2018-01-10 09:31:43
【问题描述】：

在我的tsconfig.json 中，当我将 compilerOptions.module 从“commonjs”更改为“es6”或“esnext”时，我的任何实例都会收到错误“SyntaxError: Unexpected token import” import * as React from 'react'

感谢您的帮助

【问题讨论】：

你用的是什么浏览器？ developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
浏览器为 Chrome 版本 59.0.3071.115（官方构建）（64 位）
你漏掉了浏览器name。
哦。固定的。这是浏览器（大声笑）
我笑得很开心。在 Chrome 中，我认为您必须打开 ES6 模块（实验性功能）。这是chrome:flags 的某个地方。老实说，当我们开始在工作中使用 TS 和 Babel 时，我并没有深入研究这个问题，因为我们必须针对 IE，它对 ES6 的支持很糟糕。

标签： javascript reactjs typescript

【解决方案1】：

正如@Amy 所说，Import 和 Export 关键字在 JavaScript 中是非常新的，它们的引入始于新的 ES6 标准，每个浏览器的实现都不存在或部分实现。

正如TypeScript documentation 中所写，导入和导出目前与 CommonJS/AMD 一起使用。

这两种情况的组合有时会引发 SyntaxError，具体取决于您的 TSConfig 和/或您的浏览器。

我的建议

你想使用新的 ES6 标准

您将浏览器保持在最新状态，并参考@Amy 提供的链接以了解每个浏览器的Import 和Export 实现。

你不想使用新的 ES6 标准

您回到TSConfig 文件中的AMD 或CommonJS。使用此解决方案，您将需要使用 RequireJS 来管理 Import 和 Export 或使用 Webpack 或 Browserify 捆绑您的 Typescripts 文件。

我的意见

如果您的代码只是为了学习或娱乐，您可以继续使用新的 ES6 标准。

如果是用于生产，我建议使用Webpack，它很难处理，但非常强大。

【讨论】：

如果我使用 module="es6" （或 esnext）并且 target="es5" 不应该为 import/export 发生转换？有没有关于 typescript compile 结束和 babel transpile 拾取的建议？
Webpack 总是一个很好的建议，不幸的是这是一个 MeteorJS 项目
@Falieson 如果目标是 es6，那就是生成的结果。与 es5 相同。然后你可以通过 babel 运行它。在工作中，我们使用 es5 作为目标，因为出于其他原因，我们必须以 IE 为目标并通过 babel 运行它。如果我们只是将它恢复到 es5，则不需要生成 es6。
我是 TS 新手，但我习惯使用 babel。对于这个练习回购，我试图通过 {presets: ["stage-1", "react"]} 保持简单。也许有一些我习惯于使用 @amy 的 babel 功能来修复构建的转译？我（似乎是错误的）对模块和目标的理解是，“模块”=您可以编写的 TS 可以理解的 ecma，“目标”=打字稿构建到的内容
@Falieson 老实说，我会就此提出一个新问题。如果可以，我会回答。我没用过反应。我们的 TsConfig.json 中有 module='none' 和 target='es5'。再次，我会单独问，我对这个特定主题的知识不够，无法自信地提供帮助。