2017-05-06 15 views
1

我有下面index.html文件:browserify /打破的WebPack简单的HTML文件(没有定义函数)

<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> 

其中index.js是

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; 
} 

这上面的代码完美。使用webpack/browserify会造成以下方面的困难。如果我叫

browserify index.js > bundle.js 

然后编辑index.html文件读取

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

并运行index.html文件,在开发工具的浏览器控制台显示在按下按钮计算以下错误:

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

Webpack提出了同样的挑战。也许我正在实施webpack和browserify不正确?在网上搜索几乎没有见识。

回答

1

由于“myFunction”现在位于模块内部,因此您必须以某种方式使其可见。

尝试使用global对象:

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

那么它应该是到HTML再次可见。