Webpack Babel不在类中编译

我刚刚开始在ES6中使用新的JS堆栈——Node、Webpack、Babel、React和ExpressJS。以前从未使用过任何这些。我遇到了一些问题，其中我得到了错误：

模块生成失败：语法错误：意外令牌7:8

在线状态={

在文件Login.js中，它是：

import React from 'react';
import styles from './Login.css';
import auth from './auth.js';

class Login extends React.Component {

  state = {
    redirectToReferrer: false
  }

  login(e) {
    e.preventDefault();
    console.log('logging in');
    auth.authenticate("/");
  }

  render() {

    if (redirectToReferrer) {
      return (
        <Redirect to="/" />
      )
    }

    return (
      <div className={styles.loginPage}>
        <div className={styles.form}>
          <form className={styles.loginForm}>
            <input type="text" placeholder="username" />
            <input type="password" placeholder="password" />
            <button onClick={this.login}>login</button>
          </form>
        </div>
      </div>
    );
  }
}

export default Login;

B.法律改革委员会

webpack.config.json

---

我用npm start启动我的服务器-老实说，我不认为这是正确设置的，因为热重新加载似乎也不起作用。

您试图使用类属性，这是的一部分，所以您应该安装它npm I-D babel-preset-stage-2并将其添加到预设列表中

---

或者你可以只添加。

你应该注意到这不是ES6。但是我认为react预置会启用这种实验性语法…或者只是它本身的转换。这已经解决了它。谢谢。与所有这些工具抗争，也许试图一次咬下太多。所有的教程似乎都是针对旧版本的web包、react等的ns。

{
  "name": "exampleApp",
  "version": "1.0.0",
  "description": "NodeJS version of the control panel",
  "main": "server.js",
  "scripts": {
    "start": "babel-node ./server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    ...
  },
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-hmre": "^1.1.1",
    "css-loader": "^0.28.4",
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^15.0.1",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.3.0",
    "eslint-plugin-jsx-a11y": "^5.0.3",
    "eslint-plugin-react": "^7.0.1",
    "react-hot-loader": "^3.0.0-beta.7",
    "redux-devtools": "^3.4.0",
    "style-loader": "^0.18.1",
    "webpack": "^2.6.1",
    "webpack-dev-middleware": "^1.10.2",
    "webpack-dev-server": "^2.4.5",
    "webpack-hot-middleware": "^2.18.0"
  }
}

{
  "presets": [
    "es2015",
    "react"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ],
  "env": {
    "presets": [
      "react-hrme"
    ]
  }
}

const { resolve } = require('path');
const webpack = require('webpack');

module.exports = {
  context: resolve(__dirname, 'src'),

  devtool: 'source-map',

  entry: [
    'react-hot-loader/patch',
    resolve(__dirname, './src/index.js'),
  ],

  output: {
    path: resolve(__dirname, 'src'),
    publicPath: '/',
    filename: 'bundle.js',
  },

  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'eslint-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ['babel-loader'],
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader?modules', ],
      }
    ]
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
  ],
}