При отладке кода в chrome исходные карты ссылаются на файлы с кодом javascript - PullRequest
0 голосов
/ 22 мая 2019

При попытке отладки проекта ts в chrome во всех файлах .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;

My 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?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...