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

Posted 2023-02-22

【中文标题】从 HTML 文件访问捆绑的 javascript（使用 webpack）中的函数

【英文标题】：Accessing function in bundled javascript (using webpack) from HTML file

【发布时间】：2018-05-06 20:05:26

【问题描述】：

我目前正在开发一个 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 函数按钮）也将受到欢迎。谢谢你:)

【参考方案1】：

通常使用基于文本的事件处理程序不是一个好主意。也就是说，您有几个选择，随着更改的数量越来越多。

要使文本 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 代码而不是 HTML 属性添加 change 处理函数。

【讨论】：

谢谢！刚刚尝试了选项 1 并立即工作 :) 稍后将尝试选项 2。