Basic-webpack funktioniert nicht für den button-Klick-Funktion - nicht Erfasste Referenz-Fehler: undefined

Habe ich eine einfache HTML Seite mit einem button:

<!DOCTYPE html>
<html lang="en">
<head>
  ...
</head>
<body>
    <button id="button" onclick="uclicked()">Click me</button>
    <script src="./bundle.js"></script>
</body>
</html>

und ein app.js:

//(function(){
    console.log('started up')
    function uclicked(){
        console.log('You clicked');
    }
//})();

webpack installiert ist und webpack --watch gelingt. Die webpack.config.js ist:

module.exports={
    entry: './app.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    }
}

Wenn ich das laden der Seite console.log funktioniert, aber wenn ich drücken Sie die Taste bekomme ich Uncaught ReferenceError: uclicked is not defined.

Wenn ich ersetzen <script src="./bundle.js"></script> mit <script src="./app.js"></script> - und bypass-webpack die Schaltfläche klickt in Ordnung. Warum nicht dieses basic-webpack-setup zu arbeiten?

  • uclicked verweist auf eine Globale Funktion, aber webpack standardmäßig wird umhüllen Ihre bundle in einer iife, der Schutz der globalen scope. Verwenden addEventListener im code, und setzen Sie Ihre app als ein öffentliches Objekt mit der expose-loader github.com/webpack/expose-loader
InformationsquelleAutor mcktimo | 2016-03-03
  1. 73

    Wenn Sie die Datei ausführen über webpack, webpack werde versuchen, Sie nicht zu verunreinigen die Globale Reichweite und damit die Funktion wird nicht zur Verfügung gestellt werden weltweit standardmäßig.

    Wenn Sie möchten die Funktion zugegriffen werden, die außerhalb des Geltungsbereichs der er die JS-Datei, sollten Sie legen Sie es in den globalen Gültigkeitsbereich.

    function uclicked() {
  //do something
}
window.uclicked = uclicked;

    Oder einfach nur:

    window.uclicked = function() {
  //do something
}
    • wie greife ich auf die Funktion, ohne dass es global?
    • Man müsste dann manuell die event-handler auf den button wie dieser: Dokument.getElementByID('buttonID').onClick = function() { /* do somethiing */} Sie müssen sicherstellen, dass das Skript aufgerufen wird, nach das html geladen wurde (Sie können dies durch aufrufen des script-tag zu Ende <body>).
    InformationsquelleAutor Shiva Nandan
Schreibe einen Kommentar