使用类时使用 Babel 和 JSX 的 SyntaxError答案

【问题标题】：SyntaxError using Babel and JSX when using class使用类时使用 Babel 和 JSX 的 SyntaxError
【发布时间】：2016-03-22 22:55:15
【问题描述】：

我正在尝试使用 webpack、babel 和 jsx 创建类

import Observable from '../../observable';


abstract class AbstractClient implements Observable  {
    var _name: string,
    var _config: object,

    function constructor(config: object) : variant,

    ...
}
export default AbstractClient;

这是我得到的错误：

ERROR in ./app/adapter/AbstractAdapter/aclient.jsx
Module build failed: SyntaxError: /home/vinz243/Documents/nTorrent/app/adapter/AbstractAdapter/aclient.jsx: Unexpected token (5:9)
  3 | 
  4 | 
> 5 | abstract class AbstractClient implements Observable  {
    |          ^
  6 |   var _name: string,
  7 |   var _config: object,
  8 |

我的 babel 预设

 presets:['es2015','stage-0','react']

【问题讨论】：

我相信'react' 需要在您的预设列表中排在第一位。
@MikeC 我认为它不会改变之前使用反应模板运行良好的东西，所以
你的代码是 Typescript，Babel 不知道怎么处理。
您是在尝试使用打字稿还是纯 ES2015？如果你想使用 typescript，你应该在 webpack 中使用 typescript 加载器，而不是我假设你正在使用的 babel 加载器。
哦，这令人困惑。您正在尝试使用一种名为 JSX 的语言，它似乎与 React 的 JSX 标记格式无关。这绝对不会在 Babel 中工作。它看起来也很像打字稿。

标签： javascript babeljs jsx

【解决方案1】：

在 ES2015 中没有对抽象类的语法支持，这就是为什么您会收到意外的令牌错误。 abstract 在 es2015 中也不是关键字，所以解释器可能将 abstract 解释为变量名。

在 Javascript 中有一些实现抽象类模式的方法。

【讨论】：

你没有错，但还有更多。这是 Typescript，不是 ES6。
你说得对，我应该注意到，因为 OP 也在使用工具。令人困惑的是有一个 jsx 标签而不是 typescript。可能OP也很困惑