业力中的Sourcemapping TypeScript

Question

我正在尝试使用Webpack为TypeScript设置构建过程。在大多数情况下，一切正常。但是我无法使源映射在Karma测试运行程序中正常工作。

问题描述

假设我有一个打字稿文件test.spec.ts（1）。该文件由TypeScript使用内联源映射（2）转换为某些ES5源。最后，Webpack 4使用eval-source-maps（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>

但是，因果报应本身会记录仅行映射到（2）的行号错误。例如：

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>

这是完全无济于事的，因为（2）只是一些中间源，甚至从未写入磁盘。实际上，我不需要（2）的源映射，也不了解为什么首先将它们包括在内。如果可能的话，我想尝试禁用它们（当然要为（1）保留正确的源映射）。

无论如何，重要的是要让Karma报告具有相对于原始文件的行号的堆栈跟踪，就像在Chrome控制台中一样。如有必要，我也愿意为此付出执行速度

如果您想不出一个完善的解决方案，但对TypeScript / TS-Loader / Webpack / Karma-Webpack / Karma有一些见解：我也对有助于查明该工具链中问题的任何论据感兴趣。

最小的测试配置

devDependencies来自 package.json

"devDependencies": {
    "@types/jasmine": "~2.8.7",
    "jasmine": "~3.1.0",
    "karma": "~2.0.2",
    "karma-chrome-launcher": "~2.2.0",
    "karma-jasmine": "~1.1.2",
    "karma-webpack": "~3.0.0",
    "ts-loader": "~4.3.0",
    "typescript": "~2.8.3",
    "webpack": "~4.8.3"
}

karma.conf.js

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

tsconfig.json

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

Answer 1

弄清楚这一点很繁琐。这里有两个问题：

1. webpack-internal://源地图已作为解决方法添加到具有eval类型源地图的未命名的Chrome错误中。似乎其他浏览器（如Karma启动器（以及Firefox））仍无法解释eval类型的源映射，因此回退到webpack-internal://。为了在这些浏览器中获得适当的源地图支持，您需要使用经典的源地图，例如devtool: inline-source-map。这也webpack-internal://完全消除了源映射。
2. .ts使用karma-webpack 编译文件时，仍然不会生成源映射。这是因为默认情况下，karma-webpack会输出带有原始文件名的文件。并将devtool: inline-source-map过滤器设置为仅构建源文件.css和.js输出文件。可以通过显式配置SourceMapDevToolPlugin并提供test包含.ts文件的正则表达式来解决此问题。
3. 一旦用唯一的devtool设置替换了设置，就会生成源映射，但是在模式下仍然是错误的。那是因为在这种模式下会自动添加到配置中。要禁用此行为，必须显式设置。SourceMapDevtoolPluginwebpack://developmentdevtool: eval devtool: false
4. 为了使Karma加载内联源地图，您需要应用karma-sourcemap-loader。

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

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