Question

我正在使用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-metadata 4.0.1
TypeScript 2.4.0

Answer 1

欢迎。经过又一个令人沮丧的一周调试之后，我终于找到了问题。我使用的是PrismJS库，在上面的示例中甚至都没有包含它，因为它看起来很无害。 PrismJS不兼容Webpack（至少不是我使用的版本）。在这里更详细地说明，我相信highlightAll方法是很麻烦的。

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

并非所有库都支持Webpack。我以为我已经通过删除此处和此处的一些内容来进行了尽职调查，但是我显然没有这样做。希望我的经验可以对其他人有所帮助！

Webpack捆绑包：（看似随机）参考错误：未定义窗口

1 个答案: