在chrome中调试代码时,源映射会使用javascript代码引用文件

时间:2019-05-22 06:30:30

标签: typescript source-maps

当尝试在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版本进行调试?

0 个答案:

没有答案