当尝试在chrome中调试ts项目时,在源映射所引用的所有.ts文件中,都是已编译的js代码。例如,原始的Option.ts:
export abstract class Option<T> {
value: T = null;
isEmpty(): boolean {
return this.value == null;
}
isDefined(): boolean {
return this.value != null;
}
get(): T {
return this.value;
}
}
export class Some<T> extends Option<T> {
constructor(value: T) {
super();
this.value = value;
}
}
export class None extends Option<any> {}
当我尝试在浏览器中调试此代码时,此文件将包含编译后的代码:
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
exports.__esModule = true;
var Option = /** @class */ (function () {
function Option() {
this.value = null;
}
Option.prototype.isEmpty = function () {
return this.value == null;
};
Option.prototype.isDefined = function () {
return this.value != null;
};
Option.prototype.get = function () {
return this.value;
};
return Option;
}());
exports.Option = Option;
var Some = /** @class */ (function (_super) {
__extends(Some, _super);
function Some(value) {
var _this = _super.call(this) || this;
_this.value = value;
return _this;
}
return Some;
}(Option));
exports.Some = Some;
var None = /** @class */ (function (_super) {
__extends(None, _super);
function None() {
return _super !== null && _super.apply(this, arguments) || this;
}
return None;
}(Option));
exports.None = None;
我的webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: path.join(__dirname, './src/app.ts'),
devtool: 'source-map',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
sourceMapFilename: "bundle.js.map"
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
},
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: false,
port: 8080
},
};
如何通过原始ts代码而不是其已编译的js版本进行调试?