使用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功能。