React Webpack"意外令牌"命名为箭头功能

Question

我已经用webpack-middleware建立了反应全栈环境.我的代码中有一些es6语法但是在没有构造函数或命名箭头函数的情况下我得到错误.例如,我想使用semantic-ui作为反应排序表:https: //react.semantic-ui.com/collections/table#table-example-sortable 在编译时我收到此错误: 在此处输入图像描述

我认为这是因为我在下面附加了错误的webpack设置.

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './client/index.js',
  output: {
    path: '/',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        use: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'client/index.html'
    })
  ]
};

.babelrc

{
  "presets": ["env", "react", "es2015"]
}

Answer 1

您正在尝试使用类属性,这些属性当前是阶段3,作为类字段提议的一部分.为了能够在今天使用它们,您必须安装babel-plugin-transform-class-properties.

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

并将其添加到您的插件中.babelrc.

{
  "presets": ["env", "react"],
  "plugins": ["transform-class-properties"]
}

我也删除了es2015预设,因为它已经被弃用了babel-preset-env,包含了所有es2015功能.