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（）函数直接在文件中声明，它不在任何类或模块中，但它调用在同一文件中定义的其他函数，所以我不想将它分开。 / p>

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

＆＃13;

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')

  }
}

＆＃13;

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

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

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

任何人都可以帮我吗？基本上我需要的是理解如何配置webpack或更改JS，以便HTML可以访问它。

我是JS的新手，所以我非常确定我的应用程序的设计方式不是最好的，所以任何改进提示（也许我应该使用模块，或者有更好的方法来调用JS点击按钮时的功能也是受欢迎的。谢谢:)）

Answer 1

通常使用基于文本的事件处理程序并不是一个好主意。也就是说，你有几个选择，随着变化的增加。

对于要工作的texual onchange处理程序，sendMessage必须是全局的。因此，最快的解决方法是更改代码来执行此操作。例如，如果你有
```
function sendMessage(arg){}
```
在您的代码中，您需要添加一个
```
window.sendMessage = sendMessage;
```
之后将其作为全局变量公开。
更现代的方法是从按钮中移除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属性。

从HTML文件

1 个答案: