javascript - 外部 JS 文件中的函数未被调用

Question

我正在使用 webpack 和 firebase。

我的 package.json 中有这一行 > "start": "webpack-dev-server ./index.js",

在我的index.js 文件中我有函数

logUserIn(){
  //does stuff
};

在我的index.html 文件中我有这一行> <input type="submit" onclick=logUserIn() value="Log in">

当我单击该按钮时，出现此错误 > Uncaught ReferenceError: logUserIn is not defined

我的index.html 文件中也有这一行> <script src="bundle.js"></script>应该链接到包含index.js 的捆绑文件，正确吗？

最后，我在index.js中做了一个console.log，显示console.log('hello') ，当我刷新页面时，会出现 hello，这意味着index.html正在通过bundle.js调用index.js，那么它到底为什么不能识别我的方法名称呢？

这绝对不是一个错字，因为我已经复制并粘贴了

Answer 1

当您使用 Webpack 时，假定您使用 modules 。如果您的代码不是这样组织的，则可能会产生一些问题。

特别针对您的问题，您的函数 logUserIn() 在那里，但它位于模块内部，这意味着它是私有(private)函数。它在全局范围内不可见，因此您的 index.html 无法“看到”调用它的函数。

为了使其在全局范围内可用，您需要导出该函数。

但是，除非您有特定原因在 HTML 中使用 logUserIn()，否则我建议您切换代码。通常，您希望将标记和逻辑分开，因此在这种情况下，您的代码看起来更像是:

Javascript

document.getElementById('loginButton').onclick = logUserIn

HTML

<input type="submit" id="loginButton" value="Log in">

此外，如果相关按钮是表单，您需要使用 e.preventDefault() 覆盖表单的默认功能。