React - ES6 - 意外的令牌

时间:2017-06-05 00:26:50

标签: reactjs webpack babeljs ecmascript-next

我收到此错误

ERROR in ./src/components/Header/index.js
Module build failed: SyntaxError: C:/Users/Gil/Documents/Projects/ecommerce/src/components/Header/index.js: Unexpected token (16:7)

  14 |   }
  15 |
> 16 |   test = () => {
     |        ^
  17 |     console.log('pass!');
  18 |   };
  19 |

我认为它与ES6有关,但我不知道,无论如何这里是我的配置

  

webpack.config.js

loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader'
      },...
  

的package.json

"devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react-scripts": "1.0.7"

所以我的问题是,当我尝试使用arrow function时出现此错误,我是否需要额外的配置或我做错了什么?

1 个答案:

答案 0 :(得分:2)

您需要https://babeljs.io/docs/plugins/transform-class-properties/

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

.babelrc内部:

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