2016-05-22 6 views
0

Also ich habe diese Funktion. Ich versuche, einen neuen Test ('Selektor', {}) von außerhalb dieser js-Datei zu bekommen, es kommt undefiniert und ich kann nicht herausfinden, warum.Neue Klasse von IIFE-Funktion arbeitet nun mit Webpack

Muss ich es wirklich an das Fensterobjekt anhängen? Kann jemand das erklären?

TO erwähnt, funktioniert es aus der gleichen Datei.

let Test = ((window, document, undefined) => { 

    class test { 
    constructor(selector, options) { 
    this.selector = document.querySelector(selector); 
    this.options = options; 
    } 
} 

return test; 

})(window, document); 

Das ist meine webpack Konfigurationsdatei:

module.exports = { 
entry: './src/test.js', 
module: { 
    loaders: [ 
    { 
     test: /\.js?$/, 
     exclude:/(node_modules) /, 
     loader: 'babel-loader', 
     query: { 
     presets: ['es2015', 'stage-0'] 
     } 
    } 
    ] 
}, 
output: { 
    path: __dirname + '/src', 
    filename: 'test.min.js' 
} 
} 
+1

IIFEs sind immer noch Funktionen, und Funktionen haben ihren eigenen Umfang unabhängig von globalen Geltungsbereich. Im Funktionsumfang deklarierte Variablen verschwinden, wenn die Funktion beendet ist. Wenn Sie möchten, dass es nach dem IIFE beibehalten wird, ja, müssen Sie es entweder außerhalb der Funktion deklarieren oder den _value_ der Klasse außerhalb anhängen. –

+0

Es gibt keinen Vorteil, * window * an die Funktion zu übergeben, sondern global * this *: '((window, document, undefined) => {...}) (this, document) da sie das gleiche Objekt sind in einem Browser und * this * muss auf das globale Objekt verweisen, * window * darf nicht, da es neu zugewiesen werden kann. Und innerhalb der Pfeilfunktion muss * this * auf das globale Objekt trotzdem verweisen. – RobG

+0

@AkshatMahajan: [Nein] (http://stackoverflow.com/questions/111102/how-do-javascript-closures-work). – Bergi

Antwort

1

ich klar Missverständnis war, was webpack tut. Webpack wandelt all Ihre JavaScript-Dateien in Module um, die im globalen Namespace nicht verfügbar sind. Deshalb müssen wir require/import verwenden, um sie zu laden. Im obigen Beispiel wurde die Test-Funktion nie geladen und ist nicht definiert. Die Standarddefinition von JavaScript ist nicht mehr vorhanden.