从HTML文件访问捆绑的javascript中的功能（使用webpack）

Question

我当前正在开发一个Web应用程序，并且正在重构我的代码，因此它与WebPack捆绑在一起。

在我的HTML中，有一个按钮，sendMessage()当单击该按钮时会调用该函数，

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

在我的代码的第一个版本中，该sendMessage()函数是在.js我直接导入HTML 的文件中定义的，

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

sendMessage（）函数直接在文件中声明，它不在任何类或模块中，但它调用在同一文件中定义的其他函数，因此我不想将其分开。

但是现在它被WebPack捆绑了。这是我的配置文件（homepageScript.js用于另一页）：

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

我将HTML上的脚本导入更改为导入捆绑版本。现在，当我按下按钮时，我得到了错误

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

我已经读过它，并且了解到webpack不会全局公开这些功能。我试图导出该函数，但一直收到相同的错误。

谁能帮我这个？从本质上讲，我需要了解如何配置Webpack或更改JS，以便可以通过HTML对其进行访问。

我是JS的新手，所以我很确定我的应用程序的设计方式不是最好的，因此，任何有关改进的技巧（也许我应该使用模块，或者有单击按钮时调用JS函数的更好方法）都可以也欢迎。谢谢 ：）

Answer 1

通常，使用基于文本的事件处理程序不是一个好主意。就是说，您有一些选择，随着变更量的增加。

1. 为了使纹理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);
   });
   

   change使用JS代码而不是HTML属性添加处理程序函数。