2017-05-06 1 views
1

나는 아래의 index.html을 파일이 간단한 HTML 파일을 깰 :하는 index.js이browserify/웹팩 (함수가 정의되어 있지)

function myFunction() { 
var x = document.getElementById("num1").value; 
var y = document.getElementById("num2").value; 
var ans = parseInt(x) + parseInt(y) 
document.getElementById("demoInput").value = ans; 
document.getElementById("demoHtml").innerHTML = ans; 
} 

입니다

<html> 
<head> 

</head> 

<body> 


num1:<input id="num1" type="number"> 
num2:<input id="num2" type="number"> 



<button type="button" onclick="myFunction()">compute</button> 

answer:<input id="demoInput" type="text"> and answer: <p 
id="demoHtml"></p> 

</body> 

<script src="index.js"></script> 

이 위의 코드를 완벽하게 작동합니다. webpack/browserify를 사용하면 다음과 같은 어려움이 있습니다. 내가

browserify index.js > bundle.js 

를 호출 할 경우

<script src="bundle.js"></script> 

를 읽고 index.html 파일을 실행하기 위해 index.html 파일을 편집, 개발자 도구에서 브라우저 콘솔은 계산 버튼을 누르면시 다음과 같은 오류를 보여줍니다

index.html:14 Uncaught ReferenceError: myFunction is not defined at 
HTMLButtonElement.onclick (index.html:14) 

웹팩은 동일한 도전 과제를 제시합니다. 아마도 나는 webpack을 구현하고 잘못 브라우저화할 것입니까? 온라인 검색은 거의 통찰력을 얻지 못했습니다.

답변

1

"myFunction"은 이제 모듈 안에 있기 때문에 어떻게 든 보이게해야합니다.

global.myFunction = function() { 
// ... 
} 

는 다음 다시 HTML로 볼 수 있어야합니다 :

global 개체를 사용하려고합니다.

관련 문제