問(wèn)題描述

我整個(gè)上午都在閱讀有關(guān)這方面的文章，試圖正確設(shè)置我的環(huán)境.但由于某種原因，我沒(méi)有得到它.我的設(shè)置-

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

測(cè)試運(yùn)行良好，并且 chrome 調(diào)試器中的映射調(diào)試被正確映射.但伊斯坦布爾將 typescripts.js 文件視為一個(gè)文件，而不是幾十個(gè)其他文件的串聯(lián).

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.源碼(不包括測(cè)試)被轉(zhuǎn)譯成前面提到的typescripts.js，測(cè)試被單獨(dú)轉(zhuǎn)譯并復(fù)制到/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 具有內(nèi)聯(lián)源映射.使用 sourcemap，十幾個(gè) ts 文件大小為 106kb.

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

所以從這里開(kāi)始測(cè)試和調(diào)試工作正常.

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

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']
},

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

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.

有人讓這個(gè)工作嗎?有什么想法我可能做錯(cuò)了嗎?

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

推薦答案

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

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

Sitepan 上的文章 對(duì)其進(jìn)行了更詳細(xì)的描述:

The article on Sitepan describes it in more detail:

Intern 以及其他 JavaScript 測(cè)試框架都使用了伊斯坦布爾用于他們的代碼覆蓋率分析.隨著我們開(kāi)始越來(lái)越多地采用TypeScript 用于我們自己的項(xiàng)目，我們繼續(xù)努力獲得清楚地了解我們的代碼覆蓋率，因?yàn)樗袌?bào)告僅包括在內(nèi)我們發(fā)出的代碼的覆蓋率.我們不得不嘗試使用編譯器在我們的腦海中試圖找出我們?nèi)鄙贉y(cè)試覆蓋的地方.我們還喜歡圍繞我們的覆蓋范圍設(shè)置指標(biāo)，讓我們跟蹤我們是否正朝著正確的方向前進(jìn).

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.

我們中的一些人開(kāi)始探索我們?nèi)绾文軌蛲瓿蓪⒏采w率報(bào)告映射回其起源并經(jīng)過(guò)一段時(shí)間工作，我們創(chuàng)建了 remap-istanbul，一個(gè)允許伊斯坦布爾的包覆蓋信息被映射回其源，當(dāng)有源地圖可用.雖然我們一直專注于 TypeScript，但它可以在任何對(duì)發(fā)射代碼產(chǎn)生覆蓋的地方使用，包括上面提到的工具！

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!

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

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

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