如何防止karma webpack创建供应商代码的源映射？

对于Karma test runner，我经历了非常缓慢的“启动”时间，在分析运行之后，我意识到最大的减速是由源映射的创建造成的

更具体地说，假设我使用

karma webpack

和webpack作为预处理器，每次karma加载测试文件时，它都会被馈送到webpack，webpack会为它生成一个源映射

考虑到我没有拆分/分块我的应用程序和供应商代码，每个测试文件都得到了相同的供应商源映射（内联）

我以为我可以通过简单地防止

节点\u模块/

文件发生源映射来解决这个问题，但意识到您只能根据最终资产文件而不是输入源/模块文件从源映射中排除文件

所以我发现这个插件可以自动将我的应用程序和供应商代码分割成不同的块（而不是手动列出每个供应商模块）

但我在运行Karma时开始出现这个错误：

ReferenceError:找不到变量：webpackJsonp

我很确定这是因为Karma没有注意到供应商和应用程序代码被分割成单独的块，因此只包括配置了

文件

选项的代码（即测试文件本身，而不是供应商文件）

似乎在预处理每个测试文件之前，

files

config选项都被解析和处理过，这意味着我认为不可能在

files

选项中指定供应商区块，因为Karma在尝试查找它时不会知道它（太早了）

我能看到的唯一解决方案是：

• 改变Karma的实现方式，使其能够处理供应商和应用程序块文件的分离
• 不要使用

  karma webpack

  和预处理，而是在测试模式下构建应用程序，然后运行测试构建目录的karma（以便供应商区块足够早地存在）

有没有我错过的解决方案

我觉得奇怪，这似乎不是一个常见的问题

编辑1

我发现了，但那里的人建议在网页包配置中使用多个入口点（即一个用于应用程序，一个用于供应商）。我将尝试看看这是否适用于Karma，但它仍然有一个很大的缺点（在我看来），那就是您必须手动跟踪您在

供应商

数组中输入的内容。即，每次安装软件包时，都必须将其添加到阵列中，反之亦然

编辑2

在我配置SourceMapWebpack插件以排除供应商文件之前，使用多个入口点（在webpack配置中）甚至不起作用（而使用

webpack按路径拆分的
plugin会起作用）

我将尝试并实施“先构建后测试”的方法。
如果其他人遇到这个问题，我会让“先构建后休息”的方法发挥作用，也就是说，我放弃了
karma webpack
和karma预处理，转而使用单独的构建和测试命令（一个接一个地运行）

下面是我的特定于测试的webpack配置（例如webpack.config.babel.test.js）：

关键部分在于，它为每个测试文件创建一个入口点，并在生成块时使用
按路径拆分的webpack
插件自动将应用程序与供应商代码分离

这是我使用的因果报应配置：

process.env.BABEL_ENV = 'test';

function karmaConfig(config) {
  config.set({
    basePath: '',
    frameworks: ['mocha'],
    files: [
      {
        pattern: 'dist-test/vendor-*.js',
        watched: false
      },
      'dist-test/**/*.test-*js?(x)'
    ],
    exclude: [],
    reporters: ['progress'],
    port: 9876,
    colors: true,
    browsers: ['Firefox', 'Chrome'],
    singleRun: true,
    logLevel: config.LOG_ERROR
  })
}

export default karmaConfig;

关键部分是供应商文件首先在
文件
配置选项中列出，并设置为不被监视，然后是测试文件。这确保了每个测试用例总是首先加载/插入供应商代码

我的问题是，是否还有其他方法，但这种方法非常有效。性能要好得多

编辑1

这种方法的唯一缺点（一开始我没有意识到）是，由于构建和测试步骤的分离，您无法真正实现测试观察，就像使用
karma webpack
和预处理（通过webpack）一样

编辑2

这种方法遇到了每次更改应用程序代码时重新传输供应商代码的问题（，即使您没有添加/删除任何供应商库）。这使事情的发展速度大大减慢

要解决此问题并再次开始测试监视，您需要执行以下操作：

在监视模式下运行Webpack，以便在应用程序代码更改时将其内置到
dist test/
dir中
在监视模式下运行Karma，指向
disttest/
dir中正在更新的所有测试文件
这个解决方案是完美的，除了一个缺点，即不能在一个npm/warn命令中同时运行这两个功能

注意：Webpack测试构建的输出文件名不应包含任何哈希（即，文件名在内容更改之间应保持一致）。这样，当您更改测试文件时，就不会运行新旧测试代码（因为Webpack没有删除旧文件）。

process.env.BABEL_ENV = 'test';

function karmaConfig(config) {
  config.set({
    basePath: '',
    frameworks: ['mocha'],
    files: [
      {
        pattern: 'dist-test/vendor-*.js',
        watched: false
      },
      'dist-test/**/*.test-*js?(x)'
    ],
    exclude: [],
    reporters: ['progress'],
    port: 9876,
    colors: true,
    browsers: ['Firefox', 'Chrome'],
    singleRun: true,
    logLevel: config.LOG_ERROR
  })
}

export default karmaConfig;