无法使用带有 babel 加载器的 web-pack 编译 JSX

Question

我正在尝试使用 web-pack 捆绑一个 react 应用程序，该应用程序使用 babel 加载器来编译因语法错误而失败的 jsx 文件。

  handleClick = () => {
    this.props.handleFixedClick();
  };

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (37:14)

  35 |   }
  36 |
> 37 |   handleClick = () => {
     |               ^
  38 |     this.props.handleFixedClick();
  39 |   };
  40 |

我尝试将 babel-loader 版本更改为 7.15，但没有任何努力。 以下是我的 web-pack.config.js。

   test: /\.jsx?/,
   loader: 'babel-loader',
   exclude: /node_modules/,
   query:{
     presets: ['react','es2015']
   }

以下是我的 package.json

"@babel/core": "^7.5.5",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",

Answer 1

要使用类属性语法（例如类中的 lambdas），您还需要 babel 插件@babel/plugin-proposal-class-properties

使用npm install --save-dev @babel/plugin-proposal-class-properties安装它

Answer 2

尝试使用 babels transform-arrow-functions 插件。 ( v7 / v6 ) 还决定使用 babel 7 的第 6 版并使用它，不要同时保留它们，因为它们之间存在一些重大变化。