React Class：目前未启用对实验语法“ classProperties”的支持

Question

我从头开始创建了一个React应用程序，而不是create-react-app。现在我到了创建类的地步，我想使用状态跟踪复选框。我收到此错误消息：目前未启用对实验语法'classProperties'的支持。

我安装了： -插件提案类属性 -插件语法类属性 -plugin-transform-class-properties

我在.bablerc中添加了插件，但仍然出现此错误，我缺少什么？

Header.js

import React  from 'react';
import Navigation from './Navigation';

class Header extends React.Component {
constructor(props) {
    super(props);
    this.state = { checked: true };
}

toggleChange = () => {
    this.setState({
        checked: !this.state.checked,
    });
}

render() {
    return (
        <header className="header">
            <div className="container">
                <div className="row align-items-center justify-content-center">
                    <div className="col-auto">
                        <h1>Marc</h1>
                    </div>
                    <div>
                        <input type="checkbox"
                               checked={this.state.checked}
                               onChange={this.toggleChange}
                        />
                        <input type="checkbox" id="headerMenu" value="0" className="header__toggle" />
                        <label className="header__hamburger" htmlFor="headerMenu"></label>
                    </div>

                    <Navigation/>
                </div>
            </div>
        </header>
    );
  }
};

export default Header;

Webpack.config.js

const path = require('path');
// Simplifies HTML
const HtmlWebpackPlugn = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'index_bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.html$/,
                use: {
                    loader: 'html-loader'
                }
            },
            {
                test: /\.scss/,
                enforce: "pre",
                loader: "import-glob-loader"
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    'style-loader', // Inject CSS to page
                    'css-loader', // translates CSS into CommonJS modules
                    'sass-loader' // Compiles Sass to CSS
                ]
            },
            {
                test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                    use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: '../fonts/',
                        publicPath: '../static/fonts'
                    }
                }]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugn({
            template: './src/index.html'
        })
    ]
}

.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-syntax-class-properties",
    "@babel/plugin-proposal-class-properties",  { "loose": true }
  ]
}

package.json

  "name": "Webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open --hot --mode development",
    "build": "webpack --mode production",
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-syntax-class-properties": "^7.2.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "@babel/preset-env": "^7.4.2",
    "@babel/preset-react": "^7.0.0",
    "babel-jest": "^24.8.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "import-glob-loader": "^1.1.0",
    "jest": "^24.8.0",
    "mini-css-extract-plugin": "^0.7.0",
    "node-sass": "^4.12.0",
    "react-test-renderer": "^16.9.0",
    "sass-loader": "^7.2.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.8.0"
  },
  "dependencies": {
    "bootstrap-scss": "^4.3.1",
    "dependencies": "0.0.1",
    "dotenv": "^8.0.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-router-dom": "^5.0.1"
  }
}