React Webpack“意外令牌”命名箭头函数

Question

我已经使用 webpack-middleware 设置了 react fullstack 环境。我的代码中有一些 es6 语法，但是在没有构造函数或命名箭头函数的状态下出现错误。例如，我想将语义 UI 用于反应排序表： https://react.semantic-ui.com/collections/table#table-example-sortable 编译时出现此错误： enter image description here

我以为是因为 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

您正在尝试使用作为Class fields proposal 一部分的当前第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 所做的一切以及更多。