伊斯坦布尔与 mocha-webpack 缺少源地图答案

【问题标题】：istanbul with mocha-webpack missing sourcemaps伊斯坦布尔与 mocha-webpack 缺少源地图
【发布时间】：2017-07-19 10:35:12
【问题描述】：

我正在构建一个使用 mocha-webpack 测试 Angular 2 项目的项目，我正在尝试使用伊斯坦布尔的命令行 (nyc) 为项目添加覆盖范围，但我不知道如何获取伊斯坦布尔在单击 html 报告时正确显示所涵盖的源。我的配置中是否缺少某些内容？我是否需要使用 Babel/Karma 才能正确映射这些？

webpack.js

var webpack = require('webpack');
var helpers = require('./helpers');

module.exports = {
  target: "node",
  devtool: 'inline-source-map',

  entry: {
    'test': 'mocha-loader!./config/mocha-test-shim.js'
  },

  resolve: {
    modules: [helpers.root('app'), "node_modules"],
    extensions: ['', '.ts', '.js']
  },

  output: {
    devtoolModuleFilenameTemplate: '[absolute-resource-path]',
    devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
  },

  module: {
    postLoaders: [{
      test: /\.(js|ts)/,
      exclude: /(node_modules|bower_components)/,
      include: helpers.root('app'),  // instrument only testing sources with Istanbul, after other loaders run
      loader: 'istanbul-instrumenter-loader'
    }],
    loaders: [
      {
        test: /\.ts$/,
        loaders: ['awesome-typescript-loader', 'angular2-template-loader']
      }
    ]
  }
}

package.json（为简洁起见，省略部分）

{
  "scripts": {
    "coverage": "nyc --reporter=html mocha-webpack",
  },
  "nyc": {
    "include": [
      "app/**/*.ts",
      "app/**/*.js"
    ],
    "sourceMap": false,
    "instrument": false
  }
}

mocha-webpack.opts

--webpack-config config/webpack.mocha.js
--require config/mocha-test-shim.js
app/**/*.test.ts

使用此配置，我得到一个 html 覆盖率报告，但是当我单击其中一个类时，我得到以下错误：

Unable to lookup source: /<project-path>/node_modules/angular2-template-loader/index.js!/<project-path>/app/customer/customer.ts(ENOENT: no such file or directory, open '/<project-path>/node_modules/angular2-template-loader/index.js!/<project-path>/app/customer/customer.ts')
Error: Unable to lookup source: /<project-path>/node_modules/angular2-template-loader/index.js!/<project-path>/app/customer/customer.ts(ENOENT: no such file or directory, open '/<project-path>/node_modules/angular2-template-loader/index.js!/<project-path>/app/customer/customer.ts')
    at Context.defaultSourceLookup [as sourceFinder] (/<project-path>/node_modules/nyc/node_modules/istanbul-lib-report/lib/context.js:15:15)
    at Context.getSource (/<project-path>/node_modules/nyc/node_modules/istanbul-lib-report/lib/context.js:74:17)
    at Object.annotateSourceCode (/<project-path>/node_modules/nyc/node_modules/istanbul-reports/lib/html/annotator.js:175:38)
    at HtmlReport.onDetail (/<project-path>/node_modules/nyc/node_modules/istanbul-reports/lib/html/index.js:217:39)
    at Visitor.(anonymous function) [as onDetail] (/<project-path>/node_modules/nyc/node_modules/istanbul-lib-report/lib/tree.js:34:30)
    at ReportNode.Node.visit (/<project-path>/DSW/node_modules/nyc/node_modules/istanbul-lib-report/lib/tree.js:123:17)
    at /<project-path>/DSW/node_modules/nyc/node_modules/istanbul-lib-report/lib/tree.js:116:23
    at Array.forEach (native)
    at visitChildren (/<project-path>/DSW/node_modules/nyc/node_modules/istanbul-lib-report/lib/tree.js:115:32)
    at ReportNode.Node.visit (/<project-path>/DSW/node_modules/nyc/node_modules/istanbul-lib-report/lib/tree.js:126:5)

【问题讨论】：

标签： angular webpack istanbul mocha-webpack

【解决方案1】：

我遇到了同样的问题，我通过使用 'awesome-typescript-loader' 内联源映射解决了。

这是我的会议：

{
    test: /\.ts$/,
    include: helpers.root('src'),
    exclude: [/\.e2e\.ts$/],
    loaders: [{
        loader: 'awesome-typescript-loader',
        query: {
            // use inline sourcemaps for "coverage" reporter
            sourceMap: false,
            inlineSourceMap: true,
            compilerOptions: {
                // Remove TypeScript helpers to be injected
                // below by DefinePlugin
                removeComments: true
            }
        }
    }, 'angular2-template-loader']
}

希望它能帮上忙。

【讨论】：