Podstawowe WebPack nie działa dla funkcji przycisk click - Uncaught błąd referencyjny: niezdefiniowane

Mam podstawową stronę HTML z przyciskiem:Podstawowe WebPack nie działa dla funkcji przycisk click - Uncaught błąd referencyjny: niezdefiniowane

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

i app.js:

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

WebPack jest zainstalowany i webpack --watch się uda. Webpack.config.js jest:

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

Kiedy załadować stronę console.log działa, ale gdy wciskam przycisk uzyskać Uncaught ReferenceError: uclicked is not defined.

Jeśli zastąpię <script src="./bundle.js"></script> z <script src="./app.js"></script> i pominięciem pakietu internetowego, przycisk kliknie poprawnie. Dlaczego ta podstawowa konfiguracja Webpack działa?

Źródło

2016-03-03 mcktimo

'uclicked' odwołuje się do funkcji globalnej, ale WebPack domyślnie będzie otaczać swoją' bundle' w Iife, chroniąc zasięg globalny. Użyj 'addEventListener' w swoim kodzie lub ujawnij swoją aplikację jako obiekt publiczny za pomocą' expose-loader' https://github.com/webpack/expose-loader –

Po uruchomieniu pliku przez pakiet WWW, pakiet WWW spróbuje nie zaśmiecać globalnego zasięgu, więc funkcja nie będzie domyślnie udostępniona globalnie.

Jeśli chcesz, aby funkcja była dostępna poza zakresem pliku JS, powinieneś umieścić ją w zasięgu globalnym.

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

Lub po prostu:

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

Źródło

2016-03-06 10:09:07

jak uzyskać dostęp do funkcji bez wprowadzania jej globalnie? – vidstige

@vidstige Będziesz wtedy musiał ręcznie ustawić obsługi zdarzeń na przycisk tak:. document.getElementById ('buttonID') onClick = function() {/ * nie somethiing * /} Musisz upewnij się, że ten skrypt nazywa się ** po ** załadowaniu html (możesz to zrobić, wywołując swój tag skryptu pod koniec ). –

Podstawowe WebPack nie działa dla funkcji przycisk click - Uncaught błąd referencyjny: niezdefiniowane

Odpowiedz

Powiązane problemy