ES6 Arrow Funktion Kompilierfehler

Question

Dieser Code wird nicht wie erwartet kompiliert, aber Sie sollten Beispiele im Internet finden.

ERROR in ./src/main/javascript/app.js 
Module build failed: SyntaxError: Unexpected token (66:18) 

    64 |  } 
    65 | 
> 66 |  addErrorAlert = (title, message) => { 
    |     ^
    67 |   this.state.toastContainer.error(
    68 |    message, 
    69 |    title, 

Verfahren in Frage, es ist tatsächlich ein Teil einer Klasse EM6 verlauf React.Component

addErrorAlert = (title, message) => { 
    this.state.toastContainer.error(
     message, 
     title, 
     { 
      timeOut: 10000, 
      extendedTimeOut: 10000, 
      preventDuplicates: true, 
      positionClass: "toast-bottom-full-width", 
      showMethod: "fadeIn", 
      hideMethod: "fadeOut" 
     } 
    ); 
}; 

WebPack Config

var path = require('path'); 

var node_dir = __dirname + '/node_modules'; 

module.exports = { 
    entry: './src/main/javascript/app.js', 
    devtool: 'sourcemaps', 
    cache: true, 
    debug: true, 
    resolve: { 
     alias: { 
      'stompjs': node_dir + '/stompjs/lib/stomp.js', 
     } 
    }, 
    output: { 
     path: __dirname, 
     filename: './src/main/resources/static/built/bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: path.join(__dirname, '.'), 
       exclude: /(node_modules)/, 
       loader: 'babel-loader', 
       query: { 
        cacheDirectory: true, 
        presets: ['es2015', 'react'] 
       } 
      } 
     ] 
    } 
}; 

Answer 1

Diese Funktion (class properties) ist noch eine experimentelle Funktion und ist nicht in React und ES2015 Presets enthalten.

Um es mit babel zu transpilieren, müssen Sie die relevante Transformation in die Babel-Konfiguration einschließen.

UPDATE: Hier ist, wie Sie es ermöglichen können: Erstens, installieren Sie das NPM-Paket babel-plugin-transform-class-properties und Ihre webpack Config ändern:

query: { 
    cacheDirectory: true, 
    presets: ['es2015', 'react'], 
    plugins: ['transform-class-properties'] 
} 

Answer 2

Sie müssen class properties ermöglichen, die nicht Teil des ES6 ist.

presets: ['es2015', 'react'], 
plugins: ['transform-class-properties'] 

Oder Sie können einfach die Eigenschaft im Konstruktor zuweisen.

constructor(props, context) { 
    super(props, context); 
    this.addErrorAlert =() => { } 
}