使用karma + babel + webpack和bundle一起追踪错误

Question

使用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);

Answer 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
},