Question

我一直在尝试使用Webpack实现基本的Javascript，但是在尝试使用基本方法时遇到了很多麻烦。我知道这可能是我在DOM之前加载js的一个问题，但我对这个问题的所有修复都是徒劳的。

例如，我尝试运行let taskinput = document.getElementById('new-task');，当我在控制台中搜索 taskinput 变量时，我得到Uncaught ReferenceError: taskinput is not defined(…)的返回值。

我尝试了很多不同的解决方案，让这个代码在DOM加载后运行，但似乎没有任何效果。

我尝试了将javascript文件放在DOM底部的基本尝试。

我尝试过这样的基本js方法：

  document.onreadystatechange = function() {
  if (document.readyState === "complete") {
    initApplication();
  }

function initApplication() {(... placed code in here ...)}

我尝试过使用jqueries

$( document ).ready(function() { });

我尝试使用html-webpack-plugin将我的javascript文件注入我的HTML

Webpack中是否缺少某些内容？

的index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sample Site</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
  </head>
  <body>
    <button id="new-task">click</button>
    <script src="/assets/app.bundle.js"></script>
  </body>
</html>

app.js

'use strict';

document.onreadystatechange = function() {
  if (document.readyState === "complete") {
    initApplication();
  }
}

function initApplication() {
  onButtonClick();
}

let onButtonClick = function() {
  let taskInput = document.getElementById('new-task');
  taskInput.onclick = alert('hey');
}

Answer 1

使用浏览器控制台，您只能访问全局声明的变量，如果在函数内部定义JavaScript变量，它不会成为全局变量。此外，使用let声明的变量永远不会成为全局变量。

如果要全局声明变量，可以将其设为window的属性，例如：

window.taskinput = document.getElementById('new-task');

这可能对调试有用，但避免在生产代码中执行，因为使用全局变量被认为是一种不好的做法。

Answer 2

例如，我正试图运行let taskinput = document.getElementById（'new-task'）;当我在控制台中搜索taskinput变量时，我得到一个Uncaught ReferenceError的返回：taskinput未定义（...）。

首先，webpack bundle中的模块代码在其自己的范围内运行，有效地在闭包中运行，而不是在全局范围内（您可以使用window访问）。其次，即使您转到控制台并使用let声明变量，例如let a = 1，即使您的控制台在全局（window）范围内运行，如果您尝试执行此操作window.a您将获得undefined，因为let变量未附加到window范围。见this

Webpack中是否有一些我缺少的东西？

如上所述，由webpack生成的捆绑包中的代码可能不会在全局范围内运行，这可能是事实。

如果要将变量公开给全局范围以便能够使用它，出于调试目的，在控制台中将其声明为window.variableName。或者，您可以在代码中添加一个断点，方法是在要检出的变量之后添加debugger，而不将其暴露给全局范围。

document.getElementById无法使用Webpack

2 个答案: