使用VSCode在浏览器中debugging简单的Typescript应用程序
我正在构build我的第一个打字稿项目（我的背景是C＃，Java）。这些应用程序按预期工作，但是我不能在打字稿中放置一个断点并debugging应用程序。
此外，当我使用纯打字机编译器（tscs与tsc.exe）映射完美的作品。 我正在使用gulp，因为我想将所有js放入一个文件中。
当生成的js中有一个错误，那么Visual Studio代码打击js文件（bundle.js）中的断点而不是打字稿，但是自定义断点不工作
我正在使用Windows 10进行开发。
请在下面find我的代码。
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> 键入脚本
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 （我相信这个文件是不需要的，因为我们使用gulp编译，当使用纯粹的打字稿编译断点工作正如所料）
{ "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" ] }
也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 }, ] }
