Javascript 巴别塔预设2015和胖箭头功能问题

当我尝试在类组件中使用fat arrow函数时，我收到以下错误

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"

我正在为巴贝尔的网页设置规则

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

注意：我还尝试在“react”之前添加“es2015”。另外，尝试安装babel插件转换类属性，创建.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;

我错过了什么？ 谢谢，周末好

---

请记住，我正在学习=）

尝试安装此插件

babel插件转换类属性

，然后在您的babel配置中，将

转换类属性

添加到插件数组中，如下所示：

{
“插件”：[
“转换类属性”
]
}

非常感谢，Oreoluwa。我把它放在选项中，效果很好。非常感谢。

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