Konfigurieren von karma so Typoskript Quelldateien wäre debugfähiger
Habe ich heruntergeladen ein Saatgut-Projekt Angular2 Webpack Starter und habe es bis und läuft ohne ein Problem. Eine Unannehmlichkeit, die ich mit ihm habe, ist das debugging von source-Dateien unter unit-tests. Alle *.spec.ts
Dateien geladen werden, in browser-und debugable so map
- Dateien generiert, die für Sie zumindest. Wenn ich Schritt in eine source-Datei unter test bekomme ich so etwas wie dieses:
karma config:
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);
Diese Konfiguration ist als die in der starter-Paket mit minderjährigen, wenn Sie alle änderungen. Könnten Sie mir sagen, wie diese Konfiguration geändert werden, damit die .ts
Quelldateien wäre debugable, die mit der Erfassung von Statistiken.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich hatte ein ähnliches Problem mit meinem Projekt (das ist nicht die Angular2 Webpack Starter, aber ich glaube, dass hat die gleiche Ursache.)
WebPack, standardmäßig keine pass-source-Karten bis zu Karma, wenn die Endung der Datei ist
.js
(oder.jsx
wenn Sie mit Reagieren). In einem setup wie diesem,, Karma+WebPack nur transpiles die.ts
Dateien (oder.tsx
) gerade von TypeScript zu JavaScript und serviert Ihnen unter dem gleichen Namen.Ich habe eine Lösung gefunden, die für mich gearbeitet auf der GitHub-Seite Probleme für
karma-webpack
. Der trick ist, zu injizierenwebpack.SourceMapDevToolPlugin
mit einem erweiterten Datei-filter in der webpack-Konfiguration. Für Sie, das sollte in etwa so Aussehen:devtool: false
undmode: 'development'
für webpack 4Müssen Sie auskommentieren Istanbul loader in Ihrem webpack.test.config.js wie diese
dann starten Sie einfach: