webpack編譯後無法訪問變量

Question

webpack編譯後無法訪問變量。 我需要它，因爲我使用這個變量在onclick中調用函數。

代碼是這樣

function DetailClass() { 
 
    this.add = function() { 
 
    console.log(1); 
 
    } 
 
} 
 

 
var Detail = new DetailClass();

的WebPack包括這個碼成的eval（）

而在HTML我這樣稱呼它

<div onclick="Detail.add();">Add</div>

Answer 1

你不應該結合這樣的事件！

您是否在使用一些框架，如React甚至是jQuery？如果您使用的是最新的，例如，綁定像這樣（在JS，不是HTML）：

$('#your-id').on('click',() => Detail.add()); 

如果你不是，結合這樣的：

document.getElementById('your-id').onclick =() => Detail.add(); 

但是，如果這是一個例外，你真的想要導出的東西，你可以將它設置爲窗口對象：

window.Detail = Detail; 

Answer 2

在您的webpack配置中，您必須指定output.library和output.libraryTarget。

以下指南：https://webpack.github.io/docs/configuration.html#output-library

對於以下配置：

... 
output:{ 
    ... 
    library: 'MyLib', 
    libraryTarget: 'var' 
} 
... 

你將能夠使用它像：

<div onclick="MyLib.Detail.add();">Add</div>