代码之家 › 专栏 › 技术社区 › kockburn

类中的箭头函数引发Webpack Encore错误

webpack-encore babeljs reactjs javascript

kockburn · 技术社区 · 6 年前

配置

我在用 webpack-encore 与我的 symfony 要编译的项目 reactjs 项目。到目前为止,我已经使用了 webpack.config.js 设置,应与反应开箱即用 when enabling it :

// 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>)}
}

问题

我怎样才能让babel编译器 Webpack编码在中编译箭头函数 javascript 课程?

1 回复 | 直到 6 年前

kockburn 6 年前

这个问题是 solved .

在类中分配箭头函数不是ES6的一部分。它是即将发布的ES版本提案草案的一部分。巴贝尔能但你需要在 Babelrc文件。在Encore中提供的默认babel配置不配置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特性。

推荐文章