Webpack配ES2017预设编译箭头函数类方法报意外令牌错误排查

嘿，这个问题我太熟了！你遇到的「unexpected token」错误，核心原因是你用的class A { m = () => { } }语法不属于ES2017标准范畴，Babel的es2017预设根本不支持它。

为什么ReactJS.NET能编译？ #

ReactJS.NET在处理JSX时，可能内置了对「类字段（Class Fields）」这个提案语法的支持（比如集成了早期的Babel插件或者自定义编译逻辑），所以它能识别这种写法。但Webpack这边的Babel配置只启用了官方ES2017标准的特性，自然会报错。

怎么让Webpack正常编译？ #

你需要给Babel添加专门支持类字段语法的插件，步骤如下：

1. 首先安装对应的插件（如果用的是Babel 7+，要装@babel开头的包）：

npm install --save-dev @babel/plugin-proposal-class-properties

2. 修改你的Webpack loader配置，在query里添加plugins数组：

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: {
        presets: ['es2017', 'react'],
        plugins: ['@babel/plugin-proposal-class-properties']
      }
    }
  ]
}

额外说明 #

如果你的项目已经升级到Babel 7，更推荐用@babel/preset-env代替es2017预设，它可以根据你目标环境自动启用所需的ES特性，配合类字段插件使用会更灵活。比如：

query: {
  presets: [
    ['@babel/preset-env', { targets: { browsers: ['last 2 versions'] } }],
    '@babel/preset-react'
  ],
  plugins: ['@babel/plugin-proposal-class-properties']
}

这样配置后，Webpack就能顺利编译你带箭头函数的类方法了！

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