如何将 Istanbul Code Coverage 与转译的 Typescript 结合使用？

我整个早上都在阅读有关此问题的文章，试图正确设置我的环境。但由于某种原因我不明白。我的设置-

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

测试运行良好，并且通过 chrome 调试器中的映射调试可以正确映射。但伊斯坦布尔看到typescripts.js文件作为一个文件而不是数十个其他文件的串联。

生成我正在使用的打字稿源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。

所以从这里开始测试和调试工作正常。

现在，为了让伊斯坦布尔代码覆盖率正常工作，我已经安装了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 https://github.com/SitePen/remap-istanbul被形容为通过源地图重新绘制伊斯坦布尔覆盖范围的工具

The article https://www.sitepen.com/blog/2015/09/29/code-coverage-for-typescript-and-other-transpiled-languages/Sitepan上有更详细的描述：

Intern 以及其他 JavaScript 测试框架都使用 Istanbul 用于他们的代码覆盖率分析。随着我们开始采用越来越多的 对于我们自己的项目，我们继续努力获取 TypeScript 我们的代码覆盖率的清晰图片，因为所有报告仅包含在内 我们发出的代码的覆盖范围。我们必须尝试使用​​编译器 在我们的脑海中试图找出我们缺少测试覆盖率的地方。 我们还希望围绕我们的覆盖范围设置指标，以便我们跟踪是否 正在朝着正确的方向前进。

我们几个人开始探索如何能够实现这一目标 将覆盖率报告映射回其起源，并经过一些处理 工作中，我们创建了 remap-istanbul，一个允许伊斯坦布尔 当存在时，覆盖信息将被映射回其源 可用源地图。虽然我们一直专注于 TypeScript，但它 可以在任何对发出的代码生成覆盖范围的地方使用， 包括上面提到的工具！

如何使用 gulp 工具：https://github.com/SitePen/remap-istanbul#gulp-plugin https://github.com/SitePen/remap-istanbul#gulp-plugin