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

Question

配置

我正在使用 webpack-encore with my symfony project to compile my reactjs project. Up till now, I've used the basic webpack.config.js setup that should work out of the box with react when enabling it:

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

Encore
    // ...
    .enableReactPreset()
;

我尝试过的：

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

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

代码示例：

下面是一个应该有效的示例，但它无法编译并抛出以下错误：

Syntax Error: Unexpected token

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 to compile Arrow functions in javascript 类中获取 babel 编译器？

Answer 1

这个问题是solved。

Having assignment of arrow functions in a class is not part of ES6. It is part of a draft proposal for an upcoming ES version. Babel is able to transpile it, but you will need to enable this transformation in the babelrc file. The default babel config shipped in Encore when you don't configure babel does not enable the transpilation of experimental features.

安装实验性功能

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 特性。

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

Arrow functions in class throw error with webpack-encore

javascript

reactjs

babeljs

webpack-encore

配置

我尝试过的：

代码示例：

问题

安装实验性功能

配置webpack.config.js