如何配置业力，以便打字稿源文件可以调试

Question

我已经下载了一个种子项目Angular2 Webpack Starter 并启动并运行，没有任何问题。我遇到的一个不便是在单元测试下调试源文件。所有*.spec.ts 文件都加载到浏览器中并可调试，因此至少会为它们生成map 文件。当我进入正在测试的源文件时，我会得到如下信息：

业力配置：

module.exports = function(config) {
var testWebpackConfig = require('./webpack.test.js');

config.set({
    basePath: '',
    frameworks: ['jasmine'],
    exclude: [ ],
    files: [ { pattern: './config/spec-bundle.js', watched: false } ],
    preprocessors: { './config/spec-bundle.js': ['coverage', 'webpack', 'sourcemap'] },
    webpack: testWebpackConfig,
    coverageReporter: {
      dir : 'coverage/',
      reporters: [
        { type: 'text-summary' },
        { type: 'json' },
        { type: 'html' }
      ]
    },
webpackServer: { noInfo: true },
reporters: [ 'mocha', 'coverage' ],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: [
  'Chrome'
],
singleRun: false
});
};

webpack.test.js：

const helpers = require('./helpers');
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const ENV = process.env.ENV = process.env.NODE_ENV = 'test';
module.exports = {
    devtool: 'inline-source-map',
    resolve: {
        extensions: ['', '.ts', '.js'],
        root: helpers.root('src'),
    },
    module: {
    preLoaders: [
      {
        test: /\.ts$/,
        loader: 'tslint-loader',
        exclude: [helpers.root('node_modules')]
      },
      {
        test: /\.js$/,
        loader: 'source-map-loader',
        exclude: [
            helpers.root('node_modules/rxjs'),
            helpers.root('node_modules/@angular2-material'),
            helpers.root('node_modules/@angular')
      ]}
   ],
loaders: [
{
    test: /\.ts$/,
    loader: 'awesome-typescript-loader',
    query: {
      compilerOptions: {
          removeComments: true
      }
    },
    exclude: [/\.e2e\.ts$/]
  },
  { test: /\.json$/, loader: 'json-loader', exclude: [helpers.root('src/index.html')] },
  { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'], exclude: [helpers.root('src/index.html')] },
  { test: /\.html$/, loader: 'raw-loader', exclude: [helpers.root('src/index.html')] }
],
postLoaders: [
{
    test: /\.(js|ts)$/, loader: 'istanbul-instrumenter-loader',
    include: helpers.root('src'),
    exclude: [
      /\.(e2e|spec)\.ts$/,
      /node_modules/
    ]
  }
]
},
plugins: [
new DefinePlugin({
  'ENV': JSON.stringify(ENV),
  'HMR': false,
  'process.env': {
    'ENV': JSON.stringify(ENV),
    'NODE_ENV': JSON.stringify(ENV),
    'HMR': false,
  }
}),
],
tslint: {
    emitErrors: false,
    failOnHint: false,
    resourcePath: 'src'
  },
node: {
    global: 'window',
    process: false,
    crypto: 'empty',
    module: false,
    clearImmediate: false,
    setImmediate: false
}
};

spec-bundle.js：

Error.stackTraceLimit = Infinity;
require('core-js/es6');
require('core-js/es7/reflect');
require('ts-helpers');
require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
require('zone.js/dist/sync-test');
require('rxjs/Rx');
var testing = require('@angular/core/testing');
var browser = require('@angular/platform-browser-dynamic/testing');
testing.setBaseTestProviders(
  browser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
  browser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS
);
var testContext = require.context('../src', true, /\.spec\.ts/);
function requireAll(requireContext) {
  return requireContext.keys().map(requireContext);
}
var modules = requireAll(testContext);

此配置与入门包中的配置相同，如有任何修改，请稍作修改。你能告诉我如何修改这个配置，以便.ts 源文件可以使用覆盖率统计进行调试。

Answer 1

我的项目也有类似的问题（不是 Angular2 Webpack Starter，但我相信原因相同。）

默认情况下，WebPack 不会将源映射传递给 Karma，除非文件扩展名是 .js（或 .jsx，如果您使用的是 React）。在这样的设置中，Karma+WebPack 只是将 .ts 文件（或 .tsx）直接从 TypeScript 转换为 JavaScript，并以相同的文件名提供它们。

我找到了适合我的解决方案on the GitHub Issues page for karma-webpack。诀窍是将带有扩展文件过滤器的webpack.SourceMapDevToolPlugin 注入到 webpack 配置中。对你来说，应该是这样的：

var webpack = require('webpack');
// in your config.set:
plugins: [
  // existing plugins go here
  new webpack.SourceMapDevToolPlugin({
    filename: null, // if no value is provided the sourcemap is inlined
    test: /\.(ts|js)($|\?)/i // process .js and .ts files only
  })
]

Answer 2

你需要在你的 webpack.test.config.js 中注释掉 Istanbul loader，像这样

    // {
    //   enforce: 'post',
    //   test: /\.(js|ts)$/,
    //   loader: 'istanbul-instrumenter-loader',
    //   include: helpers.root('src'),
    //   exclude: [
    //     /\.(e2e|spec)\.ts$/,
    //     /node_modules/
    //   ]
    // }

然后简单地运行：

 npm run watch:test