Babel 预设 2015 和胖箭头功能的问题 [重复]

Question

当我尝试在类组件中使用粗箭头函数时，我收到以下错误...

ERROR in ./src/app/components/Home.js
Module build failed: SyntaxError: C:/myproject/whole/src/app/components/Home.js: Missing class properties transform.

但是，我的 package.json 中有正确的包

为了巴别

"babel-cli": "6.26.0",
"babel-core": "6.26.0",
"babel-loader": "7.1.2",
"babel-preset-env": "1.6.0",
"babel-preset-es2015": "6.24.1",
"babel-preset-es2017": "6.24.1",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "6.24.1",

对于网页包

"webpack": "3.5.6",
"webpack-dev-server": "2.8.2",
"webpack-merge": "4.1.0",
"webpack-node-externals": "1.6.0"

我正在为 Babel 在 Webpack 中设置规则

  module: {
    rules: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: [
            'react',
            'stage-0',
            ['env', { targets: { browsers: ['last 2 versions'] } }]
          ]
        }
      }
    ]
  }

注意：我也尝试在“react”之前添加“es2015”。另外，尝试安装 babel-plugin-transform-class-properties，创建 .babelrc conf 文件并在那里添加插件，但没有结果。

这是我的组件：

import React, { Component } from 'react';

class Home extends Component {

  consoleHi = () => {
    console.log('Hi');
  };

  render() {
    return (
      <div>
        Hello
        <div>{this.consoleHi()}</div>
      </div>
    );
  }
}

export default Home;

如果我转译或使用“常规”函数，它就可以工作。

  consoleHi() {
    console.log('Hi');
  }

我错过了什么？ 谢谢，周末愉快。

记住我在学习 =)

Answer 1

尝试安装此插件babel-plugin-transform-class-properties，然后在您的 babel 配置中，将 transform-class-properties 添加到插件数组中，如下所示：

{ "plugins": [ "transform-class-properties" ] }