Question

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

模块构建失败：SyntaxError：意外的令牌（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。

Babel不在课堂上编译

1 个答案: