未加载来自 karma-webpack 的捆绑包答案

【问题标题】：Bundle from karma-webpack Not Loaded未加载来自 karma-webpack 的捆绑包
【发布时间】：2018-07-12 04:24:40
【问题描述】：

我正在尝试建立一个混合 Angular 应用程序（AngularJS + Angular），它使用 Webpack 作为其模块加载器，使用 Karma+Jasmine 作为测试框架。为了运行测试，我使用karma-webpack；然而，webpack 创建的包永远不会加载到浏览器中，因此测试永远不会执行（呵呵！）。我已经尝试了很多东西作为健全性检查，但我在互联网上的其他任何地方都没有发现这个问题。

所以，一些调试信息。首先，我的karma.conf.js 文件：

const webpackConfig = require('./webpack.test');

delete webpackConfig.entry;
delete webpackConfig.output;

module.exports = function(config) {
  config.set({
    basePath:           '',
    frameworks:         ['jasmine'],
    port:               8080,
    logLevel:           config.LOG_DEBUG,
    autoWatch:          false,
    browsers:           ['Chrome', 'Firefox'],
    singleRun:          true,

    files:              [
      // Some remote libraries that should be loaded.  These all load fine.
      './client/app/app.spec.ts'
    ],

    preprocessors:      {
      './client/app/app.spec.ts': ['webpack', 'sourcemap']
    },

    webpack:            webpackConfig,
    webpackMiddleware:  {
      stats:              {
        colors:             true
      }
    },

    browserNoActivityTimeout: 60000,

    client:             {
      captureConsole:     true
    },

    browserConsoleLogOptions: {
      level:                    'log',
      format:                   '%b %T:\n%m\n',
      terminal:                 true
    },

    reporters:          ['mocha'],
    mochaReporter:      {
      output:             'autowatch'
    }
  });
};

运行 Karma 时，webpack 执行成功（karma-webpack 打印 webpack: Compiled successfully.，我可以看到 webpack 的输出）；但是，应该保存捆绑包的临时文件（即/tmp/_karma_webpack_/）永远不会创建。

我已将singleRun 选项设置为false 以查看加载了哪些文件，但甚至没有请求捆绑包。但是，如果我将 Karma 的日志级别设置为 DEBUG，我会看到以下（相关）输出：

01 02 2018 12:55:26.678:DEBUG [middleware:source-files]: Requesting /base/client/app/app.spec.ts?bb6177fad9c0cf145a4962a89c7d2efd0bd0235a /
01 02 2018 12:55:26.678:DEBUG [middleware:source-files]: Fetching /home/c1moore/omninox/omnistack/client/app/app.spec.ts
01 02 2018 12:55:26.678:DEBUG [web-server]: serving (cached): /home/c1moore/omninox/omnistack/node_modules/karma-jasmine/lib/adapter.js
01 02 2018 12:55:26.678:DEBUG [web-server]: serving (cached): /home/c1moore/omninox/omnistack/client/app/app.spec.ts

它看起来就像 Karma 正在尝试提供需要所有测试的文件；但是，我在浏览器的任何地方都看不到。也就是说，该文件似乎没有被请求/加载，我也没有看到浏览器试图将 TS 解释为 JS 导致的任何错误。

我没有包含 app.spec.ts 文件，因为它从未真正加载过，这似乎无关紧要。但是，它是相当标准的。它导入 Angular 所需的所有东西、所有供应商库，并需要所有测试（使用 require.context）。

那么，有没有人有任何建议、指点或看到我可能遗漏的东西？我查看了文档、代码和各种网站，试图找到我错过的一些简单的东西，希望 SO 有一些答案。

【问题讨论】：

我为任何感兴趣的人开设了issue on Github，但收到的信息与这篇文章的数量差不多。

标签： webpack karma-runner karma-webpack

【解决方案1】：

解决方案非常简单。我在其他一些 SO 帖子（Post 1 和 Post 2）上找到了答案。

基本上，Chrome 和 FF 拒绝执行 Karma 发送给他们的测试文件，因为 karma-webpack 不会将 typescript 文件的扩展名从 .ts 更改为 .js。要解决此问题，只需在 karma.conf.js 文件中为 .ts 文件指定 MIME 类型，如下所示：

module.exports = (config) => {
  config.set({
    // ...

    mime: {
      'text/x-typescript':  ['ts', 'tsx']  // `tsx` is optional depending on your environment
    },

    // ...
};

【讨论】：