Question

我正在使用最新的babel / eslint（请参阅下面的packages.json）。使用箭头功能时出现此错误：

功能：

  handleChange = (event, index, value) => this.setState({value});

错误：

Fatal Parsing error: Unexpected token =: src/components/Dashboard.js:15

我已经读到这是5.x版本的Babel中的问题，但是已修复，我现在大约是6，所以我不太确定导致问题的是什么。我的想法是，它必须是自我或者自己。谢谢！

Packages.json

    {
  "name": "react-slingshot",
  "version": "4.0.0",
  "description": "Starter kit for creating apps with React and Redux",
  "scripts": {
    "remove-demo": "babel-node tools/removeDemo.js",
    "start-message": "babel-node tools/startMessage.js",
    "prestart": "npm-run-all --parallel start-message remove-dist",
    "start": "npm-run-all --parallel open:src lint:watch",
    "open:src": "babel-node tools/srcServer.js",
    "open:dist": "babel-node tools/distServer.js",
    "lint": "esw webpack.config.* src tools",
    "lint:watch": "npm run lint -- --watch",
    "clean-dist": "npm run remove-dist && mkdir dist",
    "remove-dist": "rimraf ./dist",
    "build:html": "babel-node tools/buildHtml.js",
    "prebuild": "npm run clean-dist && npm run build:html && npm run lint && npm run test",
    "build": "babel-node tools/build.js && npm run open:dist"
  },
  "author": "",
  "dependencies": {
    "material-ui": "0.15.0",
    "object-assign": "4.1.0",
    "react": "15.1.0",
    "react-dom": "15.1.0",
    "react-redux": "4.4.5",
    "react-router": "2.4.1",
    "react-tap-event-plugin": "1.0.0",
    "redux": "3.5.2"
  },
  "devDependencies": {
    "babel-cli": "6.9.0",
    "babel-core": "6.9.1",
    "babel-eslint": "6.0.4",
    "babel-loader": "6.2.4",
    "babel-plugin-react-display-name": "2.0.0",
    "babel-preset-es2015": "6.9.0",
    "babel-preset-react": "6.5.0",
    "babel-preset-react-hmre": "1.1.1",
    "babel-preset-stage-1": "6.5.0",
    "babel-register": "6.9.0",
    "browser-sync": "2.12.10",
    "chai": "3.5.0",
    "chalk": "1.1.3",
    "cheerio": "0.20.0",
    "connect-history-api-fallback": "1.2.0",
    "coveralls": "2.11.9",
    "cross-env": "1.0.8",
    "css-loader": "0.23.1",
    "enzyme": "2.3.0",
    "eslint": "2.11.1",
    "eslint-config-airbnb": "9.0.1",
    "eslint-plugin-babel": "3.2.0",
    "eslint-plugin-import": "1.8.1",
    "eslint-plugin-jsx-a11y": "1.2.2",
    "eslint-plugin-react": "5.1.1",
    "eslint-watch": "2.1.11",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.8.5",
    "isparta": "4.0.0",
    "mocha": "2.5.3",
    "node-sass": "3.7.0",
    "npm-run-all": "2.1.1",
    "react-addons-test-utils": "15.1.0",
    "redux-immutable-state-invariant": "1.2.3",
    "rimraf": "2.5.2",
    "sass-loader": "3.2.0",
    "sinon": "1.17.4",
    "sinon-chai": "2.8.0",
    "style-loader": "0.13.1",
    "webpack": "1.13.1",
    "webpack-dev-middleware": "1.6.1",
    "webpack-hot-middleware": "2.10.0"
  },
  "keywords:": [
    "react",
    "reactjs",
    "react-router",
    "hot",
    "reload",
    "hmr",
    "live",
    "edit",
    "webpack",
    "redux",
    "flux",
    "boilerplate",
    "starter"
  ]
}

.eslintrc：

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:import/warnings"
  ],
  "plugins": [
    "react"
  ],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "experimentalObjectRestSpread": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true,
    "jquery": true,
    "mocha": true
  },
  "rules": {
    "quotes": 0,
    "no-console": 1,
    "no-debugger": 1,
    "no-var": 1,
    "semi": [1, "always"],
    "no-trailing-spaces": 0,
    "eol-last": 0,
    "no-underscore-dangle": 0,
    "no-alert": 0,
    "no-lone-blocks": 0,
    "jsx-quotes": 1,
    "react/display-name": [ 1, {"ignoreTranspilerName": false }],
    "react/forbid-prop-types": [1, {"forbid": ["any"]}],
    "react/jsx-boolean-value": 0,
    "react/jsx-closing-bracket-location": 0,
    "react/jsx-curly-spacing": 1,
    "react/jsx-indent-props": 0,
    "react/jsx-key": 1,
    "react/jsx-max-props-per-line": 0,
    "react/jsx-no-bind": 0,
    "react/jsx-no-duplicate-props": 1,
    "react/jsx-no-literals": 0,
    "react/jsx-no-undef": 1,
    "react/jsx-pascal-case": 1,
    "react/jsx-sort-prop-types": 0,
    "react/jsx-sort-props": 0,
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1,
    "react/no-danger": 1,
    "react/no-did-mount-set-state": 1,
    "react/no-did-update-set-state": 1,
    "react/no-direct-mutation-state": 1,
    "react/no-multi-comp": 1,
    "react/no-set-state": 1,
    "react/no-unknown-property": 1,
    "react/prefer-es6-class": 1,
    "react/prop-types": 1,
    "react/react-in-jsx-scope": 1,
    "react/require-extension": 1,
    "react/self-closing-comp": 1,
    "react/sort-comp": 1,
    "react/wrap-multilines": 1
  },
  "globals": {
    "React": true
  }
}

.babelrc

  "presets": [
    "es2015",
    "react"
  ],
  "env": {
    "development": {
      "presets": [
        "react-hmre"
      ]
    }
  }
}

Answer 1

将我的babelrc更改为＆＃34; stage-1＆＃34;解决了这个问题：

{
  "presets": [
    "es2015",
    "react",
    "stage-1"
  ],
  "env": {
    "development": {
      "presets": [
        "react-hmre"
      ]
    }
  }
}

如果有人有更好的答案，我会尽力做到。

Answer 2

您也可以使用babel's transform-class-properties plugin：

安装： npm install --save-dev babel-plugin-transform-class-properties

添加到babelrc：

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

Babel / ESLint在箭头功能上失败

2 个答案: