javascript - 使用 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
},