Webpack Bundle：（看似随机）参考错误：未定义窗口答案

【问题标题】：Webpack Bundle: (seemingly random) reference errors: window is not definedWebpack Bundle：（看似随机）参考错误：未定义窗口
【发布时间】：2019-04-30 16:58:29
【问题描述】：

我正在使用 Webpack 捆绑一系列 TypeScript 文件 - 一个 AngularJS 应用程序。构建过程没有错误或警告，应用程序似乎运行良好，但 Chrome 控制台显示了一些（看似随机的）参考错误：Uncaught ReferenceError: window is not defined

应用程序甚至会运行一段时间没有这些错误，但是随着路由的变化，这些错误会偶尔出现。我尝试将有问题的库设为外部并通过标准的<script> 标签将它们拉入，错误变成angular is not defined 并以类似的方式出现。尽管如此，应用程序运行良好（从用户的角度来看），但控制台显示了这些非常随机的感觉错误。

我被难住了，我似乎是独一无二的？我找不到遇到类似问题的其他人。

Chrome 控制台错误截图：

我的 webpack 配置看起来像（对不起，格式很时髦，尽量压缩它）：

const path = require('path');

module.exports = [
  {
    target: 'web',
    entry: './src/app.ts',
    output: {
      filename: 'my-bundle.js',
      path: path.resolve(__dirname, 'public')
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: 'awesome-typescript-loader',
          exclude: /node_modules/
        },
        { test: /\.html$/, loader: 'html-loader' },
        {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader']
        },
        { test: /\.png$/, use: ['url-loader?mimetype=image/png'] }
      ]
    },
    optimization: {
      minimize: false
    },
    resolve: {
      extensions: ['.ts', '.js', '.html']
    }
  }
];

我的app.ts 包含（为简单起见，删除了大部分内容）：

import './polyfills'
import * as angular from 'angular'
import * as angularUiRouter from '@uirouter/angularjs'
import { provide, bundle } from 'ng-metadata/core'

最后，我的index.html

<!DOCTYPE html>
<html lang="en-us">
<head>
    <!-- links to stylesheets and whatnot -->
</head>
<body ng-app="my-app">
    <div><ui-view></ui-view></div>
    <script type="text/javascript" src="my-bundle.js"></script>
</body>

让我感到沮丧的是，一切似乎都运行良好，只是控制台中出现了这些随机错误。我在 Chrome、Firefox 和 Safari 中看到了相同的行为。当事情感觉“随机”时，往往会认为它们是时间问题。我的 webpack 包在正确的位置吗？当我将 angular 设置为外部依赖项并将其包含在我的 webpack 生成的包之前，我看到angular is not defined 的“随机”错误。希望有任何见解！

版本：

Webpack 4.26.1
角1.6.9
ng-元数据4.0.1
打字稿2.4.0

【问题讨论】：

您能否向我们展示错误所在的屏幕截图。终端截图会很棒。
哦，是的，这是有道理的。会的！
艾米，你能不能点击bundle.js的链接，试着放一个调试器，看看this的上下文是什么？
ps：是我在 LinkedIn 中发消息提供帮助，只是提醒一下。 ??????
stackoverflow.com/questions/49981555/…

标签： javascript angularjs webpack

【解决方案1】：

很好。在又一个令人沮丧的一周调试之后，我终于找到了我的问题。我使用的是PrismJS 库，甚至没有将它包含在我上面的示例中，因为它看起来非常无害。 PrismJS 对 webpack 不友好（至少不是我使用的版本）。在这里更详细地说明一下，我认为highlightAll 方法很麻烦。

对于那些可能遇到类似问题的人，调试过程可能仍然对您有所帮助。我注意到每次在控制台中出现错误时，它都与另一次尝试加载相同的bundle.js 文件相对应。这在整个应用程序中发生了好几次（“随机”）。最终，我发现请求来自与 Prism 相关的东西，并且能够在我的 webpack 配置中将该库作为外部包，问题就解决了！

并非所有库都对 webpack 友好。我以为我已经尽职尽责地删除了一些地方，但我显然没有。希望我的经验对其他人有所帮助！

【讨论】：