javascript - Debuggen van een eenvoudige Typescript-app in een browser met VSCode

Ik ben mijn eerste TypeScript-project aan het bouwen (mijn achtergrond is C#, Java). De app werkt zoals verwacht, maar ik kan geen breakpoint in TypeScript zetten en de applicatie debuggen.

Ook wanneer ik de pure TypeScript-compiler gebruik (tsconfig met tsc.exe), werkt de mapping perfect. Ik gebruik gulp omdat ik alle js in één bestand wil samenvoegen.

Wanneer er een fout is in de gegenereerde js, wordt in Visual Studio Code het breakpunt in het js-bestand (bundle.js) geraakt in plaats van in TypeScript, maar aangepaste breakpoints werken nooit

Ik gebruik Windows 10 voor ontwikkeling.

Vind mijn code hieronder.

De HTML

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello World!</title>        
        <!-- <script data-main="main" src="scripts/require.js"></script> -->
    </head>
    <body>
        <p id="greeting">Loading ...</p>
        <script src="bundle.js"></script>
    </body>
</html>

Typescripts

main.ts

import { Student } from "./student";

class Startup {
    public static main(): string {
      return Startup.showHello();
    }

   public static showHello() : string {
     var std = new Student();
      return std.GetText();
    }
}

document.getElementById("greeting").innerHTML = Startup.main();;

student.ts

export class Student
{
   public GetText() : string
   {
       return "Hi from VB ggggggggggg";
   }
}

Gulpfile.js

'use strict';

var gulp = require("gulp");

var ts = require("gulp-typescript");
var tsProject = ts.createProject("tsconfig.json");

var browserify = require("browserify");
var source = require('vinyl-source-stream');

var tsify = require("tsify");
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var buffer = require('vinyl-buffer');

var paths = {
    pages: ['src/*.html']
};

gulp.task("copy-html", function () {
    return gulp.src(paths.pages)
        .pipe(gulp.dest("dist"));
});

gulp.task("default", ["copy-html"], function () {

    return browserify({
        basedir: '.',
        debug: true,
        entries: ['src/student.ts','src/main.ts'],
        cache: {},
        packageCache: {}
    })
    .plugin(tsify)
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest("dist"));  
}); 

tsconfig.json (ik geloof dat dit bestand niet nodig is aangezien we gulp gebruiken om te compileren. Bij het gebruik van pure Typescript-compilatie werken de breakpoints zoals verwacht)

{
    "compilerOptions": {
        "module": "commonjs",
        "outDir": "dist",
        "target": "es5",
        "sourceRoot": "src",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        // "outFile": "dist/bundle.js",
        "sourceMap": true
    },
    "include": [
        "src/**/*.ts"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

ook launch.js

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:8080/index.html",
           "sourceMaps": true,
           "webRoot": "${workspaceRoot}/dist",

        },
        {
            "name": "Launch localhost with sourcemaps",
            "type": "edge",
            "request": "launch",
            "url": "http://localhost:8080/index.html",
            "webRoot": "${workspaceRoot}/dist",
            "sourceMaps": true
        },
    ]
}