类抛错误中的箭头函数与webpack-encore

Question

配置

我使用webpack-安可与我的塞福尼项目一起编译我的反应项目。到目前为止，我已经使用了基本的webpack.config.js设置，它应该与react 当启用它时一起工作。

// 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-安可中的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特性。