使用 karma + babel + webpack 和 bundles 跟踪错误答案

【问题标题】：Tracing errors using karma + babel + webpack with bundles使用 karma + babel + webpack 和 bundles 跟踪错误
【发布时间】：2015-09-17 08:36:33
【问题描述】：

使用 karma + babel + webpack 运行 ES6 单元测试。我使用 webpack 包来定位和转译 ES6。一切正常，但是每当任何测试文件中出现错误时，我都会收到没有指示错误起源的消息，例如

Uncaught TypeError: Cannot read property 'querySelector' of null
at /pth/to/test.bundle.js:13256

总是/pth/to/test.bundle.js:xxxx。知道如何让它显示更多有用的信息吗？

这是我的配置

module.exports = function(config) {
  config.set({
    browsers: ["Chrome"],
    files: [
      {
        pattern: "test.bundle.js",
        watched: false
      }],
    frameworks: ["jasmine-jquery", "jasmine-ajax", "jasmine"],
    preprocessors: {,
        "test.bundle.js": ["webpack"]
    },
    reporters: ["dots"],
    singleRun: false,
    webpack: {
        module: {
            loaders: [{
                  test: /\.js/,
                  exclude: /node_modules/,
                  loader: "babel-loader?cacheDirectory&optional[]=runtime"
                }]
        },
        watch: true
    },
    webpackServer: {
        noInfo: true
    }
  });
};

还有我的 test.bundle.js

var context = require.context("./src", true, /.+(-helpers|\.test)\.js$/);
context.keys().forEach(context);

【问题讨论】：

标签： javascript karma-runner karma-jasmine webpack babeljs

【解决方案1】：

在 webpack 中将 devtool 设置为 eval。这个对我有用。会给你正确的文件名和行号。在此处阅读更多信息http://webpack.github.io/docs/configuration.html#devtool

webpack: {
    devtool: 'eval',
    module: {
        loaders: [{
              test: /\.js/,
              exclude: /node_modules/,
              loader: "babel-loader?cacheDirectory&optional[]=runtime"
            }]
    },
    watch: true
},

【讨论】：

抱歉回复晚了 - 太棒了，很好用，谢谢！