在 Visual Studio 代码调试中表达 Typescript Gulp

Question

我正在尝试实现 express/typescript/gulp 应用程序，它可以工作，但我仍然无法使用源映射对其进行调试。

这是我的设置

Gulp 文件

var gulp = require('gulp'),
    nodemon = require('gulp-nodemon'),
    livereload = require('gulp-livereload'),
    sourcemaps = require('gulp-sourcemaps'),
    gulpPlumber = require('gulp-plumber'),
    merge = require('merge2'),
    ts = require('gulp-typescript');

var tsProject = ts.createProject('tsconfig.json');

gulp.task('typescript', function() {
   console.log('Compiling TypeScript');

    var tsResult = gulp.src(['src/**/*.ts']) 
        .pipe(gulpPlumber())
        .pipe(sourcemaps.init())
        .pipe(tsProject());

    // merge dts & js output streams...
    return merge([
        // type definitions
         tsResult.dts
            .pipe(gulp.dest("./src/")),
          // javascript
        tsResult.js
            //.pipe(sourcemaps.write(writeOptions))
            .pipe(gulp.dest('./src/'))
        ]);


});

gulp.task('serve', ['typescript'], function () {

    gulp.watch('./**/*.ts', ['typescript']);

    livereload.listen();

    nodemon({
        script: './relax',
        ext: 'js',
    }).on('restart', function () {
        setTimeout(function () {
            console.log("reload!");
            livereload.reload();
        }, 500);
    });

});

这是 VS 代码启动文件：

"configurations": [
    {
        "name": "Launch Program",
        "type": "node2",
        "request": "launch",
        "program": "${workspaceRoot}\relax.js",
        "cwd": "${workspaceRoot}",
        "outFiles": [],
        "sourceMaps": true
    },
    {
        "name": "Attach to Process",
        "type": "node2",
        "request": "attach",
        "address": "localhost",
        "restart": false,
        "sourceMaps": false,
        "localRoot": "${workspaceRoot}",
        "remoteRoot": null,
        "port": 5858
    }
]

完整代码可以在 git 仓库中找到：https://github.com/MichalZak/beanbag

我无法将此进程附加到我的节点服务器。有什么建议吗？

Answer 1

不使用源地图的原因是它们不存在。换句话说，您不是 writing/saving 生成的源映射。您可以通过将这两行添加到 gulpfile.js:

return merge([
...
    ])
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./src/'));

在 Visual Studio 代码调试中表达 Typescript Gulp

Express Typescript Gulp in Visual Studio Code Debug

node.js

express

typescript

gulp

gulp-sourcemaps