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

问题描述 投票:0回答:2

当我像这样使用 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 的配置吗?

karma-runner
2个回答
5
投票

我在查看 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;
      }
    }
  });
};

0
投票

以防万一有人在使用 @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"
添加到相关脚本标签

© www.soinside.com 2019 - 2024. All rights reserved.