Karma中的SourceMappingTypeScript

我正在尝试使用Webpack设置TypeScript的构建过程。大部分地方一切正常。但是，我无法让源地图在Karma测试运行程序中正常工作

问题描述 假设我有一个typescript文件

test.spec.ts

（1）。该文件通过TypeScript传输到一些带有内联源映射的ES5源（2）。最后，Webpack4使用eval源代码映射（3）将ES5源代码捆绑在一起，并由Karma测试运行程序提供给Chrome

通过检查Chrome中Karma Debug Runner中的源代码，我可以看到浏览器实际上可以使用所有三个阶段的透明：

• （1） 源是否映射为

  webpack://test.spec.ts?c161

• （2） 源是否映射为

  webpack-internal://test.spec.ts

• （3） 可作为

  localhost:9876/base/test.spec.ts

在Chrome控制台中，我还为测试执行期间抛出的所有错误获取适当的堆栈跟踪。如我所料，这些包括映射到（1）的源代码行号。例如：

Error: Oh no!
    at Function.MyClass.myBadMethod (test.spec.ts?c161:9)
    at UserContext.eval (test.spec.ts?c161:21)
    at <Jasmine>

Error: Oh no!
    at Function.MyClass.myBadMethod (webpack-internal:///./src/test.spec.ts:8:15)
    at UserContext.eval (webpack-internal:///./src/test.spec.ts:17:17)
    at <Jasmine>

karma.conf.js

tsconfig.json

---

弄明白这一点相当乏味。这里有几个问题：

webpack internal://

源地图作为一种变通方法添加到未命名的with eval类型源地图。 其他浏览器，如Karma launcher（以及Firefox）似乎仍然无法解释eval类型的源代码映射，因此只能使用

webpack internal://

。为了在这些浏览器中获得适当的源代码映射支持，您需要使用经典的源代码映射，如

devtool:inlinesourcemap

。这也完全消除了

网页包内部：//

源代码映射

使用karma webpack传输

.ts

文件时，仍不会生成源地图。这是因为karma webpack默认输出具有原始文件名的文件。和

devtool:inlinesourcemap

设置一个过滤器，仅为

.css

和

.js

输出文件生成源映射。这可以通过显式配置并提供包含

.ts

文件的

测试

正则表达式来解决

用

SourceMapDevtoolPlugin

替换

devtool

设置后，只会生成

webpack://

源映射，但在

开发

模式下这些仍然是错误的。这是因为在这种模式下，

devtool:eval

会被转换为配置。要禁用此行为，必须显式设置

devtool:false

为了让Karma加载内联源地图，您需要应用

综上所述，问题的配置可以固定如下：

module.exports = function(config) {
    config.set({
        frameworks: ['jasmine'],
        browsers: ['Chrome'],
        files: [
            './test.spec.ts'
        ],
        mime: {
            'text/x-typescript': ['ts']
        },
        preprocessors: {
            '**/*.ts': ['webpack', 'sourcemap']
        },
        plugins: [
            'karma-chrome-launcher',
            'karma-jasmine',
            'karma-sourcemap-loader',
            'karma-webpack'
        ],
        webpack: {
            devtool: false,
            mode: 'development',
            module: {
                rules: [
                    {
                        test: /\.ts$/,
                        loader: 'ts-loader',
                    }
                ]
            },
            plugins: [
                new webpack.SourceMapDevToolPlugin({
                    test: /\.(ts|js|css)($|\?)/i
                })
            ],
            resolve: {
                extensions: [ '.ts' ]
            }
        },
        webpackMiddleware: {
            logLevel: 'error'
        }
    });
};

---

我也有同样的问题。看起来很明智。但它不起作用。在我的例子中，Karma报告了一个错误堆栈，我看到源映射可以工作，但堆栈的格式不正确。我不需要网页的消息堆栈。

module.exports = function(config) {
    config.set({
        frameworks: ['jasmine'],
        browsers: ['Chrome'],
        files: [
            './test.spec.ts'
        ],
        mime: {
            'text/x-typescript': ['ts']
        },
        preprocessors: {
            '**/*.ts': ['webpack']
        },
        plugins: [
            'karma-chrome-launcher',
            'karma-jasmine',
            'karma-webpack'
        ],
        webpack: {
            devtool: 'eval-source-map',
            mode: 'development',
            module: {
                rules: [
                    {
                        test: /\.ts$/,
                        loader: 'ts-loader',
                    }
                ]
            },
            resolve: {
                extensions: [ '.ts' ]
            }
        },
        webpackMiddleware: {
            logLevel: 'error'
        }
    });
};

{
    "compileOnSave": false,
    "compilerOptions": {
        "module": "es2015",
        "moduleResolution": "node",
        "sourceMap": true,
        "target": "es5",
        "types": [
        "jasmine"
        ]
    }
}

module.exports = function(config) {
    config.set({
        frameworks: ['jasmine'],
        browsers: ['Chrome'],
        files: [
            './test.spec.ts'
        ],
        mime: {
            'text/x-typescript': ['ts']
        },
        preprocessors: {
            '**/*.ts': ['webpack', 'sourcemap']
        },
        plugins: [
            'karma-chrome-launcher',
            'karma-jasmine',
            'karma-sourcemap-loader',
            'karma-webpack'
        ],
        webpack: {
            devtool: false,
            mode: 'development',
            module: {
                rules: [
                    {
                        test: /\.ts$/,
                        loader: 'ts-loader',
                    }
                ]
            },
            plugins: [
                new webpack.SourceMapDevToolPlugin({
                    test: /\.(ts|js|css)($|\?)/i
                })
            ],
            resolve: {
                extensions: [ '.ts' ]
            }
        },
        webpackMiddleware: {
            logLevel: 'error'
        }
    });
};