Babel 不在一个类中编译

Question

我刚刚开始使用新的 JS 堆栈 - Node、Webpack、Babel、React 和 ExpressJS 与 ES6。以前从未使用过任何这些。我遇到了错误：

模块构建失败：SyntaxError: Unexpected token (7:8)

上线state = {

在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;

但是，我相信这是正确的语法，因为我正在尝试从具有完全相同的 the react training website 学习/遵循。

所以我认为这是我的堆栈配置，它没有按应有的方式编译某些东西。不过，某些 ES6 显然正在编译为 import 正在工作。

这是我的堆栈文件，为简洁起见缩短

package.json

{
  "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"
  }
}

.babelrc

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

webpack.config.json

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(),
  ],
}

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

Answer 1

您正在尝试使用属于 stage 2 Babel preset 的类属性，因此您应该安装它 (npm i -D babel-preset-stage-2) 并将其添加到您的预设列表中。

或者您可以只添加transform-class-properties plugin。