等号在不好的地方导致未知令牌异常答案

【问题标题】：Equal sign in bad place causes unknown token exception等号在不好的地方导致未知令牌异常
【发布时间】：2016-02-11 16:38:25
【问题描述】：

我正在将一个 react babel 5 项目升级到 babel 6。代码来自 pluralsight 上的 github。错误发生在app.js。我假设有一个插件需要升级才能允许这种语法工作：

export default class DriftApp extends React.Component {
  state = {//builder is not happy with this equals sign, unexpected token
    showIndex: 0,
    numSlides: 5
  }

哪个插件可以做到这一点？

这是我的 package.json：

 "homepage": "https://github.com/jaketrent/react-drift#readme",
  "devDependencies": {
    "autobind-decorator": "^1.3.3",
    "babel-core": "^6.5.1",
    "babel-loader": "^6.2.2",
    "babel-plugin-react-transform": "^2.0.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "express": "^4.13.3",
    "file-loader": "^0.8.4",
    "radium": "^0.16.6",
    "react": "^0.14.2",
    "react-dom": "^0.14.2",
    "react-hot-loader": "^2.0.0-alpha-4",
    "react-tools": "^0.10.0",
    "react-transform": "0.0.3",
    "react-transform-catch-errors": "^1.0.0",
    "react-transform-hmr": "^1.0.1",
    "redbox-react": "^1.1.1",
    "webpack": "^1.12.2",
    "webpack-dev-middleware": "^1.2.0",
    "webpack-hot-middleware": "^2.4.1"
  }
}

【问题讨论】：

如果我错了，请原谅我，但你不是已经在字典里了吗，不应该是状态：{ ... }？
@phenxd - 我尝试将问题字符从= 更改为:。刚刚改了错误：A semicolon is required after a class property。我相信 github 上的代码处于工作状态。这是为复数视力编写的示例代码。它应该有很多流量/测试用户。点击链接app.js查看完整代码。

标签： javascript reactjs babeljs

【解决方案1】：

您正在代码中使用属性初始值设定项语法，这是一项实验性功能（建议）。您可以通过安装 babel-plugin-transform-class-properties 模块将其转换为 ES5

npm install babel-plugin-transform-class-properties  --save-dev

将以下行添加到您的 .babelrc 文件中：

{
  "plugins": ["transform-class-properties"]
}

参考https://babeljs.io/docs/plugins/transform-class-properties/

【讨论】：

【解决方案2】：

添加babel-preset-stage-0 npm 模块并将stage-0 添加到您的 babel 预设中。

如果您想要一个与 React 配合良好的示例 babel 6 配置，请查看 react-redux-starter-kit 中的 package.json 和 .babelrc。

【讨论】：

在安装预设时遇到 ENOENT 错误。这个答案看起来很有希望。打盹...