Webpack wirft eine seltsame Syntaxfehler in JS-Datei

Question

ich eine einfache Dateistruktur für meine JS-Dateien haben:

let forms = require('./forms/forms'); 

und die Formen:

bundle.js 
src 
| 
-- main.js 
-- forms 
     | 
     -- forms.js 

Meine main.js Datei sieht wie folgt aus. js Dateien sieht wie folgt aus:

export default class Forms { 
    test =() => { 
     alert('Forms.test() executed!'); 
    } 
} 

var forms = new Forms(); 
forms.test(); 

Dies führt den folgenden Fehler:

Hash: a1ed74e596de181cec27 
Version: webpack 1.14.0 
Time: 21592ms 
       Asset Size Chunks    Chunk Names 
./static/js/bundle.js 277 kB  0 [emitted] main 
+ 3 hidden modules 

ERROR in ./static/js/src/forms/forms.js 
Module build failed: SyntaxError: Unexpected token (4:6) 

    2 | 
    3 | export default class Forms { 
> 4 | test =() => { 
    |  ^
    5 |  alert('Forms.test() executed!'); 
    6 | } 
    7 | } 

@ ./static/js/src/main.js 4:12-36 

Es gibt einen Syntaxfehler für die Zeile, in der die Methode test() definiert ist. Ich habe den babel-loader hinzugefügt und in der Datei main.js wird ES6-Code transpiliert und korrekt ausgeführt.

sieht Meine webpack.config.js-Datei wie folgt:

module.exports = { 
    entry: './static/js/src/main.js', 
    output: { 
    filename: './static/js/bundle.js' 
    }, 
    watch: true, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
      presets: ['es2015'] 
     } 
     } 
    ], 
    } 
}; 

der babel-Loader auf der forms.js Datei oder etwas nicht richtig funktioniert? Ich habe die Datei oder ihren Ordner in der Konfigurationsdatei oder irgendetwas nicht ausgeschlossen, also warum der Syntaxfehler? Ich weiß, das ist gültig JS, wie ich es in einem anderen Projekt geschrieben habe und es hat gut funktioniert.

Btw, import in der Datei main.js funktioniert auch nicht, während andere ES6-Funktionen funktionieren? Hat das etwas damit zu tun?

Answer 1

ES Class Fields & Static Properties ist nicht Bestandteil von ECMASCRECMAScript 2015/2016, sondern ein Vorschlag der Stufe 2.

Um es zu verwenden, müssen Sie babel konfigurieren, um die Class properties transform einzuschließen.

Sie können npm install nur das Class properties transform Plugin in Ihrem babel-loader query:

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

Oder npm install die stage 2 preset und schließen Sie sie als Preset in Ihrem babel-loader Abfrage:

query: { 
    presets: ['es2015', 'stage-2'] 
} 

Answer 2

definieren Sie können es als eine reguläre Methode stattdessen:

export default class Forms { 
    test() { 
     alert('Forms.test() executed!'); 
    } 
}