從HTML文件中訪問捆綁的javascript（使用webpack）中的函數

Question

我目前正在開發一個Web應用程序，我正在重構我的代碼，因此它被WebPack捆綁在一起。

在我的HTML中，我有一個按鈕，單擊時調用sendMessage()函數，

<button type="button" class="btn btn-default" onclick="sendMessage(document.getElementById('claim').value)">Submit</button>

在我的代碼的第一個版本中， sendMessage()函數是在我直接在HTML中導入的.js文件中定義的，

<script src="my_js/newsArticleScript.js"></script>

sendMessage（）函數直接在文件中聲明，它不在任何類或模塊中，但它調用在同一文件上定義的其他函數，所以我不想將它分開。

但現在它被WebPack捆綁了。 這是我的配置文件（ homepageScript.js用於另一個頁面）：

 const path = require('path') module.exports = { entry: { homepage: './src/homepageScript.js', newspage: './src/newsArticleScript.js' }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist/my_js') } } 

我更改了HTML上的腳本導入以導入捆綁版本。 現在，當我按下按鈕時，我收到錯誤

[Error] ReferenceError: Can't find variable: sendMessage

我已經讀過它了，我了解到webpack並沒有全局公開這些函數。 我試圖導出該函數，但一直得到相同的錯誤。

誰能幫我這個？ 基本上我需要的是理解如何配置webpack或更改JS以便HTML可以訪問它。

我是JS的新手，所以我很確定我的應用程序的設計方式並不是最好的，所以任何有關改進的提示（也許我應該使用模塊，或者有更好的方法在點擊按鈕時調用JS功能）也歡迎。 謝謝 ：）

Answer 1

通常使用基於文本的事件處理程序不是一個好主意。 也就是說，你有幾個選擇，隨着變化的增加。

1. 要使用texual onchange處理程序， sendMessage必須是全局的。 因此，最快的解決方法是更改​​代碼來執行此操作。 比如你有

    function sendMessage(arg){} 

   在你的代碼中，你需要添加一個額外的

    window.sendMessage = sendMessage; 

   在它之后將其暴露為全局變量。

2. 更現代的方法是從按鈕中刪除onchange ，並在HTML中標記帶有ID的按鈕，例如id="some-button-id" 。

   然后在你的JS代碼中，你可以做到

    var button = document.querySelector("#some-button-id"); button.addEventListener("change", function(){ sendMessage(document.getElementById('claim').value); }); 

   使用JS代碼添加change處理函數，而不是使用HTML屬性。