SyntaxError：意外的标记静态答案

【问题标题】：SyntaxError: Unexpected token staticSyntaxError：意外的标记静态
【发布时间】：2016-04-21 15:34:45
【问题描述】：

我目前正在尝试评估与 React 一起使用的不同测试框架，结果发现 Jest 在我的列表中。但是，我正在尝试使用此处列出的静态属性：https://github.com/jeffmo/es-class-fields-and-static-properties。

所以，我参考了 Jest 主页上给出的教程，并添加了一个静态 propTypes 属性，我的代码如下所示：

import React from 'react';

class CheckboxWithLabel extends React.Component {

  static defaultProps = {}

  constructor(props) {
    super(props);
    this.state = {isChecked: false};

    // since auto-binding is disabled for React's class model
    // we can prebind methods here
    // http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding
    this.onChange = this.onChange.bind(this);
  }

  onChange() {
    this.setState({isChecked: !this.state.isChecked});
  }

  render() {
    return (
      <label>
        <input
          type="checkbox"
          checked={this.state.isChecked}
          onChange={this.onChange}
        />
        {this.state.isChecked ? this.props.labelOn : this.props.labelOff}
      </label>
    );
  }
}

module.exports = CheckboxWithLabel;

当我运行测试（npm test 或 jest）时，它会抛出以下错误：

➜  jest            
Using Jest CLI v0.8.2, jasmine1
 FAIL  __tests__/CheckboxWithLabel-test.js 
● Runtime Error
SyntaxError: Desktop/jest/examples/react/CheckboxWithLabel.js: Unexpected token (5:22)

我的 package.json 文件如下所示：

{
  "dependencies": {
    "react": "~0.14.0",
    "react-dom": "~0.14.0"
  },
  "devDependencies": {
    "babel-jest": "*",
    "babel-preset-es2015": "*",
    "babel-preset-react": "*",
    "jest-cli": "*",
    "react-addons-test-utils": "~0.14.0"
  },
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react",
      "<rootDir>/node_modules/react-dom",
      "<rootDir>/node_modules/react-addons-test-utils",
      "<rootDir>/node_modules/fbjs"
    ],
    "modulePathIgnorePatterns": [
      "<rootDir>/node_modules/"
    ]
  }
}

关于我在这里缺少什么的任何想法？

谢谢。

【问题讨论】：

标签： jasmine ecmascript-6 jestjs ecmascript-2016

【解决方案1】：

关于我在这里缺少什么的任何想法？

类属性既不是es2015 也不是react 预设的一部分。

您必须加载处理类属性的插件：

npm install babel-plugin-transform-class-properties babel-plugin-syntax-class-properties

在您的 .babelrc 文件中（现有插件或预设旁边）：

"plugins": [
   "syntax-class-properties",
   "transform-class-properties"
]

【讨论】：

谢谢！在此之后还有另一个错误：“SyntaxError: Unexpected token ..”，有什么想法吗？
插件是特定于 Babel 6 的吗？只需设置阶段 0，我就可以在 5.x 中使用它。@HappyCry 它是否指向特定的行？
@MattMolnar：是的，那是为了 Babel 6。

【解决方案2】：

出现此错误是因为标准 ES2015(ES6) 类只能有方法，不能有属性。
对我来说，通过安装 babel-preset-stage-0 解决了这个问题，它增加了对类属性的支持。

npm install babel-preset-stage-0 --save-dev

然后配置Webpack（或.babelrc）使用这个预设：

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

更新： 截至 2018 年中，Babel env 预设支持 ES2015、ES2016 和 ES2017。因此，您可以跳过 stage-0 预设，而使用 env 预设

npm install babel-preset-env --save-dev

然后将您的 .babelrc 更新为

//...
presets: ['env', 'xyz']
//...

要支持最新的 ES2018 功能，例如扩展运算符/异步功能，您可以添加 stage-3 预设。

Reference tutorial

【讨论】：