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

Question

配置

我正在使用 webpack-encore和我的 symfony编译我的项目 reactjs项目。到目前为止，我已经使用了基本的 webpack.config.js 设置，它应该可以与 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 中获取 babel 编译器？在 javascript 中编译箭头函数上课？

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