使用 karma 和 webpack 为应用程序代码生成 sourcemaps

Question

我有一个 ES6 (Aurelia) 应用程序，我正在运行单元测试使用 karma 与 webpack 和 babel。我能够为 test 文件生成源映射，但不能为 application 文件生成源映射。我的 karma.config 包含这样的内容：

module.exports = function (config) {
  config.set({

    basePath: __dirname,

    frameworks: ['jasmine'],

    exclude: [],

    files: [
      { pattern: 'spec-bundle.js', watched: false }
    ],

    preprocessors: {
      'spec-bundle.js': ['webpack', 'sourcemap']
    },

    webpack: require('../webpack.config.babel'),

    webpackServer: { noInfo: true },

    ...
  });
}

我的规范文件被拉入 spec-bundle，看起来像这样：

Error.stackTraceLimit = Infinity;

require('aurelia-bootstrapper-webpack');

var testContext = require.context('./unit', true, /\.spec\.(ts|js)$/);

function requireAll(requireContext) {
  return requireContext.keys().map(requireContext);
}

var modules = requireAll(testContext);

我的测试源映射加载正常，但我无法加载应用程序文件的源映射。此外，我无法将测试文件的源映射 not 加载，所以我什至不确定是什么打开了它们（从中删除了 sourcemaps 引用preprocessors 什么都不做）。

如何加载这些源地图？

Answer 1

您必须在文件 webpack.config.ts 中更改此行：

    envDev(ENV !== 'test' ? {} : {devtool: 'inline-source-map'}) :

至

    envDev(ENV === 'test' ? {} : {devtool: 'inline-source-map'}) :

Answer 2

这是 istanbul 中的错误，我是这样修复它的：

更新了我在 package.json 中的 npm 任务来自：

"test": "cross-env BABEL_ENV=node NODE_ENV=test ./node_modules/karma/bin/karma start test/karma.conf.js",
"test:debug": "npm test -- --single-run=false --debug"

至：

"test": "cross-env BABEL_ENV=node NODE_ENV=test ./node_modules/karma/bin/karma start test/karma.conf.js",
"test:debug": "set mode=debug&&npm test -- --single-run=false --debug"

然后，在我的 webpack.config.babel 中将其更改为：

...(ENV === 'production' || ENV === 'development'
    ? [commonChunksOptimize({ appChunkName: 'app', firstChunk: 'aurelia-bootstrap' })]
    /* ENV === 'test' */
    : [generateCoverage({ options: { 'force-sourcemap': true, esModules: true } })]
    ),

收件人：

...(ENV === 'production' || ENV === 'development'
    ? [commonChunksOptimize({ appChunkName: 'app', firstChunk: 'aurelia-bootstrap' })]
    /* ENV === 'test' */
    : process.env.mode === "debug" ? [] /* coverage breaks inline source maps */
        : [generateCoverage({ options: { 'force-sourcemap': true, esModules: true } })]
    ),

其中 generateCoverage 在顶部定义为 import generateCoverage from '@easy-webpack/config-test-coverage-istanbul'

我没有对 karma.config 或 spec-bundle

进行任何更改

编辑：

我将这个项目升级到 Webpack 版本 2，它不再支持 yargs 所以我无法将我的 debug arg 传递给它。为了解决这个问题，我改为在 karma 级别关闭 istanbul。在我的 karma.conf.js

webpack: require('../webpack.config')({ coverage: !config.debug }),

和我更新的脚本：

karma start test/karma.conf.js --single-run=false --debug=true

使用 karma 和 webpack 为应用程序代码生成 sourcemaps

Generating sourcemaps for app code using karma and webpack

karma-runner

karma-jasmine

webpack

aurelia