問題描述

我整個上午都在閱讀有關這方面的文章，試圖正確設置我的環境.但由于某種原因，我沒有得到它.我的設置-

I've been reading articles on this all morning trying to get my environment setup correctly. But for some reason I'm not getting it. My setup-

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

測試運行良好，并且 chrome 調試器中的映射調試被正確映射.但伊斯坦布爾將 typescripts.js 文件視為一個文件，而不是幾十個其他文件的串聯.

Tests run fine, and with the mapping debugging in the chrome debugger is mapped correctly. But Istanbul sees the typescripts.js file as one file instead of the concatenation of dozens of other files.

為了生成打字稿源，我使用 gulp-typescript.源碼(不包括測試)被轉譯成前面提到的typescripts.js，測試被單獨轉譯并復制到/scripts.

To generate the typescript source I'm using gulp-typescript. The source (excluding tests) are transpiled to the aforementioned typescripts.js, and the tests are transpiled individually and copied to /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 具有內聯源映射.使用 sourcemap，十幾個 ts 文件大小為 106kb.

The resulting typescripts.js has the inline sourcemap. With the sourcemap, the dozen or so ts files results in 106kb.

所以從這里開始測試和調試工作正常.

現在為了讓伊斯坦布爾代碼覆蓋率正常工作，我安裝了 karma-sourcemap-loader 并將其添加到預處理器中.

Now in an attempt to get Istanbul code coverage working properly i've installed karma-sourcemap-loader and added it to the preprocessors.

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

我認為這是我需要做的.但它沒有顯示源文件的代碼覆蓋率.我嘗試了 C:/ 的絕對路徑，但這也不起作用.我還嘗試了 gulp-sourcemaps 中的不同選項，例如添加源(將文件推送到 160kb)，但也沒有.

I'd think this is what I'd need to do. But it does not show code coverage on the source files. I tried the absolute path from C:/ but that didn't work either. I also tried the different options in gulp-sourcemaps like adding source (which pushed the file to 160kb) but no like either.

有人讓這個工作嗎?有什么想法我可能做錯了嗎?

Has anyone gotten this to work? Any ideas what I could be doing wrong?

推薦答案

TL;DR: 有一個工具:https://github.com/SitePen/remap-istanbul 描述為通過源地圖重新映射伊斯坦布爾覆蓋范圍的工具

TL;DR: There is a tool: https://github.com/SitePen/remap-istanbul described as A tool for remapping Istanbul coverage via Source Maps

Sitepan 上的文章 對其進行了更詳細的描述:

The article on Sitepan describes it in more detail:

Intern 以及其他 JavaScript 測試框架都使用了伊斯坦布爾用于他們的代碼覆蓋率分析.隨著我們開始越來越多地采用TypeScript 用于我們自己的項目，我們繼續努力獲得清楚地了解我們的代碼覆蓋率，因為所有報告僅包括在內我們發出的代碼的覆蓋率.我們不得不嘗試使用編譯器在我們的腦海中試圖找出我們缺少測試覆蓋的地方.我們還喜歡圍繞我們的覆蓋范圍設置指標，讓我們跟蹤我們是否正朝著正確的方向前進.

Intern as well as other JavaScript testing frameworks utilise Istanbul for their code coverage analysis. As we started to adopt more and more TypeScript for our own projects, we continued to struggle with getting a clear picture of our code coverage as all the reports only included the coverage of our emitted code. We had to try to use the compilers in our minds to try to figure out where we were missing test coverage. We also like to set metrics around our coverage to let us track if we are headed the right direction.

我們中的一些人開始探索我們如何能夠完成將覆蓋率報告映射回其起源并經過一段時間工作，我們創建了 remap-istanbul，一個允許伊斯坦布爾的包覆蓋信息被映射回其源，當有源地圖可用.雖然我們一直專注于 TypeScript，但它可以在任何對發射代碼產生覆蓋的地方使用，包括上面提到的工具！

A couple of us started exploring how we might be able to accomplish mapping the coverage report back to its origins and after a bit of work, we created remap-istanbul, a package that allows Istanbul coverage information to be mapped back to its source when there are Source Maps available. While we have been focused on TypeScript, it can be used wherever the coverage is being produced on emitted code, including the tools mentioned above!

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

How to use the tool with gulp: https://github.com/SitePen/remap-istanbul#gulp-plugin

這篇關于您如何將伊斯坦布爾代碼覆蓋率與轉譯的 Typescript 一起使用?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！