javascript - 您如何将 Istanbul 尔代码覆盖率与翻译的 typescript 一起使用？

我整个上午都在阅读文章，以尝试正确设置环境。但是由于某种原因，我没有得到。我的设置-

/app
    ... source (mixed js and ts)
/scripts
    ... copied source (js)
    typescripts.js // transpiled typescript with inline mapping

测试运行良好，并且使用chrome调试器中的映射调试已正确映射。但是Istanbul将typescripts.js文件视为一个文件，而不是数十个其他文件的串联。

为了生成 typescript 源，我正在使用gulp-typescript。将源(不包括测试)转换为上述typescripts.js，并将测试分别转换为并复制到/scripts。

  var ts = require('gulp-typescript');
  var sourcemaps = require('gulp-sourcemaps');
  var concat = require('gulp-concat');

  module.exports = function (gulp, config) {
     'use strict';

     // Runs dot ts files found in `www` through the typescript compiler and copies them as js
     // files to the scripts directory

     gulp.task('typescript', ['typescript:tests'], function () {
        return gulp.src(config.paths.typescript) // [ './www/app/**/*.ts', '!./www/app/**/*.test.ts', '!./www/app/**/*.mock.ts' ]
           .pipe(sourcemaps.init())
           .pipe(ts(ts.createProject(config.paths.tsConfig))) // './tsconfig.json'
           .js
           .pipe(concat(config.sourcemaps.dest)) // typescripts.js
           .pipe(sourcemaps.write(config.sourcemaps)) // { includeContent: false, sourceRoot: '/app' } - i've also tried absolute local path
           .pipe(gulp.dest(config.paths.tmpScripts)); // ./www/scripts


     });

     gulp.task('typescript:tests', [], function() {
        return gulp.src(config.paths.typescriptTests) // [ './www/app/**/*.test.ts', './www/app/**/*.mock.ts' ]
           .pipe(ts(ts.createProject(config.paths.tsConfig))) // './tsconfig.json'
           .pipe(gulp.dest(config.paths.tmpScripts)); // ./www/scripts
     });
  };

生成的typescripts.js具有内联源映射。使用源映射，十几个ts文件的大小为106kb。

因此，从这里进行测试和调试可以正常工作。

现在，为了使Istanbul代码覆盖范围正常工作，我安装了karma-sourcemap-loader并将其添加到预处理器中。

preprocessors: {
    'www/scripts/typescripts.js': ['sourcemap'],
    'www/scripts/**/*.js': ['coverage']
},

我认为这是我需要做的。但是它不会在源文件上显示代码覆盖率。我尝试了从C:/的绝对路径，但这也不起作用。我还尝试了gulp-sourcemaps中的其他选项，例如添加源(将文件推送到160kb)，但两者都不一样。

有没有人得到这个工作？有什么想法我可能做错了吗？

最佳答案

TL; DR:有一个工具:https://github.com/SitePen/remap-istanbul描述为一种通过源 map 重新映射 Istanbul 尔覆盖范围的工具

Sitepan上的article对其进行了更详细的描述:



如何与gulp一起使用该工具:https://github.com/SitePen/remap-istanbul#gulp-plugin