箭头函数语法不适用于 webpack？答案

【问题标题】：Arrow Function syntax not working with webpack?箭头函数语法不适用于 webpack？
【发布时间】：2018-01-29 15:28:51
【问题描述】：

我正在 react-redux 上制作应用程序。我使用 webpack 进行捆绑，使用 babel 进行编译。当我尝试在我的代码中使用箭头函数时。它给了我错误：

Module build failed: SyntaxError: Unexpected token (34:15)

};

> handleSubmit = (event) => {
                  ^
  event.preventDefault();

  this.props.dispatch(actions.addTodo(this.state.inputText));

我的 webpack 配置文件如下：

module.exports = {
  devtool: 'inline-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './client/client.js'
  ],
  output: {
    path: require('path').resolve('./dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['react', 'es2015', 'react-hmre']
        }
      }
    ]
  }
};

我在 package.json 中使用了以下 babel 包：

 "babel-cli": "^6.6.5",
"babel-core": "^6.4.5",
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-react-hmre": "^1.1.1",

出了什么问题？

【问题讨论】：

@therewillbecode 没有帮助

标签： javascript webpack babeljs

【解决方案1】：

暗中刺探，这个函数是在一个类里面吗？作为类成员的箭头函数不包含在 ES2015（或 2016）中。如果你想做类似的事情：

class Foo {
  bar = (baz) => {
    console.log(baz);
  } 
}

您需要包含babel-transform-class-properties。

在您的示例中，您需要：

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

并将您的加载器更改为

{
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['react', 'es2015', 'react-hmre'],
          plugins: ['transform-class-properties']
        }
      }

【讨论】：

是的，这个函数在一个类中:(

【解决方案2】：

另外，如果你想习惯新的 babel show，你可以使用babel.config.js 文件而不是.babelrc。这个想法类似于 webpack.config.js file ，但用于 babel 配置。它的用法如下：

module.exports = {
  presets: [ "@babel/preset-env", "@babel/preset-react" ],
  plugins: [ "@babel/plugin-transform-arrow-functions", "@babel/plugin-proposal-class-properties" ]
}

确保安装所有这些插件以成功编译。我应该说 babel 本身只是建议在.babelrc 文件中对每个人做所有这些事情。但你知道，我们不是每个人。

【讨论】：

【解决方案3】：

这正是对我有用的方法：

1) 安装 babel-plugin-transform-class-properties：

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

2) 在规则中添加选项（不是查询）：

module.exports = {
    ..........
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                options: {
                    presets: ['env', 'react', 'es2015'],
                    plugins: ['transform-class-properties']
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    ..........
};

【讨论】：

【解决方案4】：

首先你需要编辑 .babelrc 文件到

{
 "presets": ["react", ["es2016"]],
 "plugins": [
     "babel-plugin-transform-class-properties"
  ]
}

第二个npm install babel-plugin-transform-class-properties 和 babel-preset-es2016

【讨论】：

【解决方案5】：

在我的应用程序中，这个问题是由于错误地将 less-loader 添加为依赖包而不是 devDependency 引起的。

在 package.json 文件中将 less-loader 从依赖项移动到 devDependencies 解决了这个问题。

【讨论】：