Sourcemap +伊斯坦布尔/isparta代码覆盖webpack + babel (用于es6) + mocha (+业力)

Question

我在https://github.com/danielbush/webpack-babel-karma-sourcemap-coverage有一个测试项目。

它由src/中的两个简单源文件组成，一个带有故意错误(src/lib2.js)。

我想让webpack和transpile使用babel从ES6到ES5，并使用Karma在这个包上运行Mocha测试。

我已经添加了源代码映射并对其进行了测试，这样我就可以看到原始文件的行号了。

对我来说，堆栈跟踪如下所示：

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

我想要做的是使用伊斯坦布尔(或者使用伊斯坦布尔的isparta )来添加覆盖率，这样我就可以生成覆盖范围中的HTML覆盖率报告/显示未覆盖的行(可能) --以及总体覆盖率百分比。

但是，我希望确保我的堆栈跟踪仍然像上面那样正确地映射了源。

我曾经尝试过isparta和Isparta-参与式加载器来传输和检测webpack中所讨论的文件，但是我的行号在堆栈跟踪(上图)中略有错误。似乎有一些类似于伊斯巴达的东西四处飘浮，而文档并不是超级友好的。

为了更广泛地表达这一切:我将文件和测试捆绑在一起，然后在浏览器中进行测试(业力或更多的手动方式)，我希望我的源地图(在浏览器中)指向原始代码行，同时希望覆盖率报告引用未涵盖的原始行和文件。

Answer 1

我没有任何一个业力/webpack配置的解决方案。我的解决办法是有两个业力混淆-这是我非常高兴的自动取款机。(我还有其他运行测试的非业力机构。)

一个conf在后台运行测试，为我的es6代码提供准确的堆栈跟踪，另一个使用isparta来传输和测试我的源代码。(isparta装载机使用伊斯巴达，后者使用伊斯坦布尔)。

所以我的“运行测试”业力看起来有点像这样：

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
    }
  });
}

我的报道因果报应看起来有点像这样：

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来拉动我用摩卡写的浏览器测试。和各种业力-*插件是必需的。

Answer 2

使用伊斯坦布尔的新官方Babel插件来测试源代码的代码覆盖率可能会更好。

根据我的经验，与isparta相比，它提供了更准确的覆盖报告，除了将其添加到我的Babel配置中的插件列表之外，基本上不需要配置。

当我在我的项目中使用Sourcemaps时，它看起来是正确的“开箱即用”。