Question

我正在使用webpack和firebase。

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

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

logUserIn(){
  //does stuff
};

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

当我点击该按钮时，我收到此错误＆gt; Uncaught ReferenceError: logUserIn is not defined

我的index.html文件中也有这一行＆gt;应该链接到包含index.js的包文件的<script src="bundle.js"></script>是否正确？

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

这绝对不是打字错误，因为我复制并粘贴了

Answer 1

当您使用Webpack时，您将被假定使用modules。如果您的代码没有以这种方式组织，则可能会产生一些问题。

特别针对您的问题，您的函数logUserIn()存在，但它位于模块内部，这意味着它是一个私有函数。它没有在全球范围内看到，因此您的index.html无法“看到”调用它的函数。

为了使其全局可用，您需要导出该功能。

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

<强>的Javascript

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

<强> HTML

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

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

Answer 2

我建议将您的JS文件直接导入HTML页面，然后检查问题是否已解决。如果没有，请检查控制台，在源下，检查文件是否正确加载如果您的文件已加载但仍然无效，请检查您放置JS文件的顺序，也可以将其移至顶部希望它有所帮助！

- Nic