2017-05-06 33 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再次可見。