如何使用 karma-babel-preprocessor 和 PhantomJs 保留行正确的行号？

Question

当我像这样使用 karma-babel-preprocessor 的记录的配置时

module.exports = function (config) {
  config.set({
    preprocessors: {
      'src/**/*.js': ['babel'],
      'test/**/*.js': ['babel']
    },
    babelPreprocessor: {
      options: {
        sourceMap: 'inline'
      },
      filename: function (file) {
        return file.originalPath.replace(/\.js$/, '.es5.js');
      },
      sourceFileName: function (file) {
        return file.originalPath;
      }
    }
  });
};

我得到了错误的源行号，例如

 at /var/www/edu-web/tests/jasmine/services/image/imageServiceTest.es5.js:77

默认情况下不支持源映射，所以这并不奇怪。然而，这里的问题是

imageServiceTest.es5.js

文件在 karma 完成后被删除，所以我别无选择，只能猜测单元测试失败的地方（在哪一行），而且速度很慢。

在 Chrome（不是 PhantomJs）的 issue 中有一个解决方案。我也可以修复 PhantomJs 的配置吗？

Answer 1

我在查看 Babel 文档时找到了解决方案：

retainLines

保留行号。这将导致古怪的代码 但对于无法使用源映射的场景很方便。

注意：这显然不会保留列。

（http://babeljs.io/docs/usage/options/）

我的最终配置：

module.exports = function (config) {
  config.set({
    preprocessors: {
      'src/**/*.js': ['babel'],
      'test/**/*.js': ['babel']
    },
    babelPreprocessor: {
      options: {
        sourceMap: 'inline',
        retainLines: true // NEW LINE
      },
      filename: function (file) {
        return file.originalPath.replace(/\.js$/, '.es5.js');
      },
      sourceFileName: function (file) {
        return file.originalPath;
      }
    }
  });
};

Answer 2

以防万一有人在使用 @babel/standalone 代码时寻找一种方法
您可以添加：

<script>
        // Add a babel preset with plugin that modify the babel options to retain line numbers in errors and stack traces
        Babel.registerPreset('env-retain-lines', {
            plugins: [
                [{
                    name: 'babel-standalone-retain-lines',
                    manipulateOptions: (opts) => {
                        opts.generatorOpts = {
                            ...opts.generatorOpts,
                            retainLines: true
                        };
                        return opts;
                    }                    
                }]
            ]
        });
    </script>

然后将

data-presets="env-retain-lines"

添加到相关脚本标签