用业力+ babel + webpack来追踪错误

Question

使用业力+ 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”中的“神器”。对我来说很管用。将为您提供正确的文件名和行号。在这里阅读更多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
},