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

问题描述

我正在使用 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. 将不胜感激任何见解！

版本：

网页包4.26.1
角1.6.9
ng元数据4.0.1
打字稿2.4.0

标签： javascriptangularjswebpack

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

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

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

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

问题描述

解决方案

推荐阅读