使用 karma webpack typescript 時，我無法讓源映射顯示正確的行。我嘗試了兩種設定：devtool: inline-source-maps和devtool: eval-source-maps，但它們都沒有顯示正確的行。
測驗正確執行。
問題：我缺少哪些配置選項？
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>
這個堆疊跟蹤更有意義，但實際上，檔案中的ReferenceError: projects is not defined錯誤xyz.spec.ts不是228在線拋出的，而是在276.
tsconfig.json （對于兩種方法）
{
"compilerOptions": {
"sourceMap": true,
"esModuleInterop": true,
"target": "esnext",
"moduleResolution": "node",
"removeComments": false
},
"include": ["test/**/*"],
"exclude": ["node_modules"]
}
我也嘗試了各種組合，例如 withinlineSources: 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"
}
uj5u.com熱心網友回復：
答案非常令人驚訝 -就目前而言，當在代碼庫中使用時（與 node 相比）karma-webpack處理源映射時遇到問題。importrequire
根據https://github.com/ryanclark/karma-webpack/issues/493#issuecomment-780411348，karma-webpack無法splitChunks正常處理，所以我們需要將其關閉：
devtool: 'inline-source-map',
optimization: {
splitChunks: false
}
這會關閉搖樹，這可能很麻煩，但堆疊跟蹤的行是正確的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/418676.html
標籤：