Javascript 如何配置karma以使typescript源文件可调试

我已经下载了一个seed项目，并顺利启动并运行。我使用它的一个不便之处是在单元测试下调试源文件。所有

*.spec.ts

文件都加载到浏览器中并可调试，因此至少会为它们生成

map

文件。当我进入测试中的源文件时，我得到如下结果：

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

业力配置：

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

---

此配置与starter软件包中的配置相同，如果有任何修改，则会进行轻微修改。您能否告诉我如何修改此配置，使

.ts

源文件可以使用覆盖率统计信息进行调试。

我的项目也遇到类似问题（它不是Angular2 Webpack初学者，但我相信有相同的原因。）

默认情况下，除非文件扩展名为

.js

（如果使用React，则为

.jsx

），否则WebPack不会将源地图传递给Karma。在这样的设置中，Karma+WebPack只需将

.ts

文件（或

.tsx

）直接从TypeScript传输到JavaScript，并以相同的文件名提供服务

我找到了一个适合我的解决方案。诀窍是将带有扩展文件过滤器的

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

---

您需要在webpack.test.config.js中注释掉伊斯坦布尔加载程序，如下所示

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

然后简单地运行：

 npm run watch:test

---

谢谢你的回答，等我有时间核实一下，我会接受的。对我来说很有用。谢谢我还为Webpack4添加了

devtool:false

和

模式：“开发”