Sourcemap + istanbul/isparta代碼覆蓋率爲webpack + babel（對於es6）+ mocha（+ karma）

Question

我有一個測試項目https://github.com/danielbush/webpack-babel-karma-sourcemap-coverage。

它由src/中的2個簡單源文件組成，其中一個故意出錯（src/lib2.js）。

我想使用從es6到es5的巴貝爾webpack和transpile並使用業力運行這個包上的摩卡測試。

我已經添加了源映射並進行了測試，以便我可以看到原始文件的行號。

對我來說，堆棧跟蹤看起來是這樣的：上面

21 02 2016 16:03:15.445:INFO [karma]: Karma v0.13.21 server started at http://localhost:9876/ 
21 02 2016 16:03:15.451:INFO [launcher]: Starting browser Chrome 
21 02 2016 16:03:16.551:INFO [Chrome 48.0.2564 (Linux 0.0.0)]: Connected on socket /#yRS32ons0_2HGhrwAAAA with id 3072946 

START: 
    lib1 
    ✖ should return 1 

Finished in 0.015 secs/0.001 secs 

SUMMARY: 
✔ 0 tests completed 
✖ 1 test failed 

FAILED TESTS: 
    lib1 
    ✖ should return 1 
     Chrome 48.0.2564 (Linux 0.0.0) 
    Error: SIMULATED ERROR 
     at foo (/home/danb/projects/so-test-project/tests.webpack.js:135:10 <- webpack:///src/lib2.js:13:8) 
     at Context.<anonymous> (/home/danb/projects/so-test-project/tests.webpack.js:93:31 <- webpack:///test/index.js:7:11) 

2日最後一行顯示webpack:///src/lib2.js:13這是原始出處正確的位置。

要獲得映射我這樣做：https://github.com/danielbush/webpack-babel-karma-sourcemap-coverage/commit/6ea992cae499dccc68488bcb3eaca642ae4ed24e

我想要做的就是使用類似的伊斯坦布爾（或伊斯帕爾塔它使用伊斯坦布爾）補充覆蓋，這樣我可以生成HTML覆蓋率報告覆蓋/昭示着我沒有覆蓋的線路（可能） - 以及總覆蓋百分比。

但我想確保我的堆棧跟蹤仍像上面那樣正確地源映射。

我已經嘗試過isparta-loader和isparta-instrumenter-loader來在webpack中對文件進行transpile和instrument，但是我的行號在stacktrace（上面）中略有錯誤。似乎有很多類似於isparta的東西在浮動，文檔不是超級友好的。爲了更全面地表達所有這些：我將文件和測試捆綁在一起，然後在瀏覽器中測試（通過更多的手動方式），並且我希望我的源地圖（在瀏覽器中）指向原始代碼行和同時我想要覆蓋率報告來引用尚未被覆蓋的原始行和文件。

Answer 1

我沒有一個單一的業力/ webpack配置的解決方案。我的解決方法是有2個業障 - 我對atm很滿意。 （我也有其他的非業力設置用於運行測試）

一個conf在後臺運行測試，併爲我的es6代碼準確的堆棧跟蹤，另一個運行使用isparta-loader的覆蓋範圍，用於傳輸和測試我的源代碼。 （isparta-loader使用isparta，其使用伊斯坦布爾）。

所以我的「運行測試」報應的conf看起來有點像這樣：

var webpack = require('webpack'); 
module.exports = function (config) { 
    config.set({ 
    browsers: [ 'PhantomJS' ], 
    singleRun: false, 
    frameworks: [ 'mocha' ], // Use the mocha test framework 
    files: [ 
     'tests.webpack.js' 
    ], 
    preprocessors: { 
     'tests.webpack.js': [ 'webpack', 'sourcemap' ] 
    }, 
    reporters: [ 'mocha' ], 
    webpack: { 
     devtool: 'inline-source-map', 
     module: { 
     loaders: [ 
      // Use imports loader to hack webpacking sinon. 
      // https://github.com/webpack/webpack/issues/177 
      { 
      test: /sinon\.js/, 
      loader: "imports?define=>false,require=>false" 
      }, 
      { 
      test: /\.js$/, 
      exclude: /node_modules/, 
      loader: 'babel-loader', 
      query: { presets: ['es2015'] } 
      } 
     ] 
     } 
    }, 
    webpackServer: { 
     noInfo: true 
    } 
    }); 
} 

和我的報道因果報應的conf看起來有點像這樣：

var webpack = require('webpack'), 
    path = require('path'); 
module.exports = function (config) { 
    config.set({ 
    browsers: [ 'PhantomJS' ], 
    singleRun: true, 
    frameworks: [ 'mocha' ], 
    files: [ 
     'tests.webpack.js' 
    ], 
    preprocessors: { 
     'tests.webpack.js': [ 'webpack' ] 
    }, 
    reporters: [ 'coverage' ], 
    webpack: { 
     // *optional* babel options: isparta will use it as well as babel-loader 
     babel: { 
     presets: ['es2015'] 
     }, 
     // *optional* isparta options: istanbul behind isparta will use it 
     isparta: { 
     embedSource: true, 
     noAutoWrap: true, 
     // these babel options will be passed only to isparta and not to babel-loader 
     babel: { 
      presets: ['es2015'] 
     } 
     }, 
     module: { 
     loaders: [ 
      { 
      test: /sinon\.js/, 
      loader: "imports?define=>false,require=>false" 
      }, 
      // Perform babel transpiling on all non-source, test files. 
      { 
      test: /\.js$/, 
      exclude: [ 
       path.resolve('node_modules/'), 
       path.resolve('lib/') 
      ], 
      loader: 'babel-loader', 
      query: { presets: ['es2015'] } 
      }, 
      // Instrument source files with isparta-loader (will perform babel transpiling). 
      { 
      test: /\.js$/, 
      include: [ 
       path.resolve('lib/') 
      ], 
      loader: 'isparta' 
      } 
     ] 
     } 
    }, 
    webpackServer: { 
     noInfo: true 
    }, 
    coverageReporter: { 
     reporters: [ 
     { type: 'html', dir: 'coverage/' }, 
     { type: 'text' } 
     ] 
    } 
    }); 
} 

這第二次的conf提供了一個文本報告即在終端中提供即時覆蓋摘要，以及提供源代碼文件突出顯示未經測試代碼的html報告。 （對於sinon而言，這兩者都有破解，這與這個問題無關。）tests.webpack.js使用webpack的require.context來拉我的瀏覽器在摩卡書寫測試。而各種karma- *插件是必需的。

Answer 2

使用伊斯坦布爾的新official Babel Plugin來測試代碼覆蓋的來源，您可能會有更好的運氣。

根據我的經驗，與isparta相比，它提供了更準確的覆蓋率報告，並且除了將其添加到我的Babel配置中的插件列表外，基本上不需要任何配置。

當我在我的項目中使用它時，Sourcemaps似乎能夠正確「開箱即用」。