使用webpack-encore的类中的箭头函数引发错误

Question

组态

我在我的symfony项目中使用webpack-encore来编译我的reactjs项目。 到目前为止，我已经使用了基本的webpack.config.js设置，该设置在启用时应该可以使用webpack.config.js工作：

// 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类中编译Arrow函数？

Answer 1

这个问题解决了 。

在类中分配箭头功能不属于ES6。 它是即将发布的ES版本的提案草案的一部分。 Babel可以转译它，但是您需要在babelrc文件中启用此转换。 未配置babel时，Encore随附的默认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功能。