使用webpack-encore时类中的箭头函数编译报错如何解决？

你的问题出在类属性（Class Fields）语法上——也就是你写的someHandler = () => {}这种类内箭头函数写法，它目前还不是ECMAScript的正式标准，默认的Babel配置（包括Webpack Encore的enableReactPreset()）并没有启用对这个语法的支持，所以编译时会抛出语法错误。

下面是具体的解决步骤：

1. 安装必要的Babel插件 #

首先需要安装@babel/plugin-proposal-class-properties插件，它专门用来处理类属性语法：

npm install @babel/plugin-proposal-class-properties --save-dev
# 如果你用Yarn的话：
# yarn add @babel/plugin-proposal-class-properties --dev

2. 修改Webpack Encore配置 #

打开你的webpack.config.js，在configureBabel方法中添加这个插件：

// webpack.config.js
Encore
  // ... 你的其他配置项
  .enableReactPreset()
  .configureBabel(function(babelConfig) {
    // 添加类属性支持插件
    babelConfig.plugins.push('@babel/plugin-proposal-class-properties');
  })
;

3. 清理无用配置 #

你之前添加的es2017 preset其实没必要保留——Webpack Encore已经默认集成了对现代ES语法的转译支持，而且es2017 preset也不包含类属性语法的处理，所以可以把那部分代码删掉。

验证修复 #

重新运行你的Encore编译命令（比如npm run encore dev或者yarn encore dev），现在类内的箭头函数应该能正常编译了。

内容的提问来源于stack exchange，提问作者kemicofa