使用webpack-encore，类中的箭头函数抛出错误

Question

配置

我在我的webpack-encore项目中使用symfony来编译我的reactjs项目。到目前为止，我已经使用了基本webpack.config.js设置，该设置应该是开箱即用的反应when enabling it：

// webpack.config.js
// ...

Encore
    // ...
    .enableReactPreset()
;

我尝试了什么：

我继续添加了babel配置（我认为不需要），希望它可以解决问题，但它没有：

.configureBabel(function(babelConfig) {
        // add additional presets
        babelConfig.presets.push('es2017');
    })

代码示例：

以下是应该起作用的示例，但它不会编译并抛出以下错误：

  

语法错误：意外的令牌

import React, {Component} from 'react';

//This works
const someExteriorHandler = () => {};

export default class Example extends Component {
   //error bad syntax, points specifically at the equal sign.
   someHandler = () => {

   }
   render(){return(<h1>This is a test</h1>)}
}

问题

如何让webpack-encore中的babel编译器编译javascript类中的箭头函数？

Answer 1

此问题为solved。

  

在课程中分配箭头功能不是ES6的一部分。它   是即将发布的ES版本的提案草案的一部分。巴别塔能够   转发它，但你需要启用这个转换   babelrc文件。您在Encore中附带默认的babel配置   不配置babel不会启用转换   实验性特征。

安装实验性功能

yarn add --dev babel-plugin-transform-class-properties babel-plugin-transform-object-rest-spread

配置webpack.config.js

.configureBabel(function(babelConfig) {

    //This is needed.

    babelConfig.plugins = ["transform-object-rest-spread","transform-class-properties"]
})

它现在应该编译，同时具有所有JSX功能。