webpack5 typescript karma 无效堆栈跟踪行

Question

在使用 karma+webpack+typescript 时，我无法让源映射显示正确的行。我尝试了两种设置：devtool: inline-source-maps 和 devtool: eval-source-maps，但其中 none 显示了正确的行。

测试正确执行。

问题：我缺少哪些配置选项？

`devtool: inline-source-maps`

1) should do xyz
     ReferenceError: projects is not defined
    at UserContext.<anonymous> (/var/folders/lm/nrqzgwdd6kl1lfh5n6_kr7zh0000gn/T/_karma_webpack_470937/commons.js:21026:23)
    at <Jasmine>

没有显示有意义的行（commons.js:21026:23），尽管 webpack typescript guide 建议此设置。

webpack.dev.config.js

const path = require('path');

module.exports = {
  watch: true,
  entry: './src/index',
  devtool: 'inline-source-map',
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
  },
  devServer: {
    contentBase: path.join(__dirname, './dist'),
    compress: true,
    hot: true,
  },
};

karma.conf.js

const webpackConfig = require('./webpack.dev.config');

module.exports = function (config) {
  config.set({
    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: [
      'jasmine',
      'webpack'
    ],

    // list of files / patterns to load in the browser
    files: [
      'test/**/*.ts',
      'test/**/*.js',
    ],

    // list of files / patterns to exclude
    exclude: [],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      'test/**/*.ts': ['webpack', 'sourcemap'],
      'test/**/*.js': ['webpack', 'sourcemap'],
    },
    webpack: {
      module: webpackConfig.module,
      resolve: webpackConfig.resolve,
      mode: webpackConfig.mode,
      devtool: 'inline-source-map',
    },

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['spec'],

    // web server port
    port: 9876,

    // enable / disable colors in the output (reporters and logs)
    colors: true,

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity,
  });
};

`devtool: eval-source-maps`

在两个文件中（webpack.dev.config.js 和 karma.conf.js）我只更改了 1 行：devtool: eval-source-maps.

我得到以下堆栈跟踪：

1) should do xyz
     ReferenceError: projects is not defined
    at UserContext.eval (webpack-internal:///./test/functions/xyz.spec.ts:228:23)
    at <Jasmine>

这个堆栈跟踪更有意义，但实际上，xyz.spec.ts 文件中的 ReferenceError: projects is not defined 错误不是在 228 行上抛出，而是在 276 上抛出。

tsconfig.json（两种方法）

{
  "compilerOptions": {
    "sourceMap": true,
    "esModuleInterop": true,
    "target": "esnext",
    "moduleResolution": "node",
    "removeComments": false
  },
  "include": ["test/**/*"],
  "exclude": ["node_modules"]
}

我也尝试过各种组合，例如使用 inlineSources: true / inlineSourceMaps: true 而不是 sourceMaps: true，但结果完全相同。

这些是依赖项（对于两种方法）：

  "devDependencies": {
    "@types/jasmine": "^3.10.3",
    "karma": "^6.3.10",
    "karma-chrome-launcher": "^3.1.0",
    "karma-firefox-launcher": "^2.1.2",
    "karma-ie-launcher": "^1.0.0",
    "karma-safari-launcher": "^1.0.0",
    "karma-cli": "^2.0.0",
    "karma-jasmine": "^4.0.1",
    "karma-sourcemap-loader": "^0.3.8",
    "karma-spec-reporter": "0.0.33",
    "karma-webpack": "^5.0.0",
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.4",
    "webpack": "^5.66.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.3"
  }

Answer 1

答案非常令人惊讶 - 至于现在，karma-webpack 在处理源映射时遇到问题，当在代码库中使用 import 时（与节点 require).

相比

根据 https://github.com/ryanclark/karma-webpack/issues/493#issuecomment-780411348，karma-webpack 无法正确处理 splitChunks，因此我们需要将其关闭：

    devtool: 'inline-source-map',
    optimization: {
      splitChunks: false
    }

这会关闭 tree shaking，这可能很麻烦，但堆栈跟踪行是正确的。

webpack5 typescript karma 无效堆栈跟踪行

webpack5 typescript karma invalid stack trace lines

typescript

webpack

karma-runner

source-maps

`devtool: inline-source-maps`

`devtool: eval-source-maps`