当我像这样使用 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 的配置吗?
我在查看 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;
}
}
});
};
以防万一有人在使用 @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"
添加到相关脚本标签