Question

我正在尝试使用web-pack捆绑一个react应用，该Web-pack使用babel loader编译由于语法错误而失败的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

要使用类属性语法（例如，类中的lambda），您还需要 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版，并且不要将它们都保留下来，因为它们之间存在一些重大更改。

无法将Web-pack与babel loader一起使用来编译JSX

2 个答案: