Код Visual Studio - Debug Node JS через TypeScript

Question

В настоящее время я пытаюсь отлаживать приложение Node JS, написанное в TypeScript из кода Visual Studio, но у меня есть некоторые проблемы. У меня есть ситуация, подобная той, которая описана на этой question

|-- .settings 
|----- launch.json 
|-- bin 
|----- app.js 
|----- app.js.map 
|--src 
|----- app.ts 
|-- tsconfig.json 

Тогда у меня есть tsconfig.json файл:

{ 
    "compilerOptions": { 
     "module": "commonjs", 
     "target": "es5", 
     "outDir": "bin", 
     "rootDir": "src", 
     "sourceMap": true 
    } 
} 

В app.ts:

console.log("Hello World!"); 

launch.json:

{ 
    "version": "0.1.0", 
    "configurations": [ 
     { 
      "name": "Launch type", 
      "type": "node", 
      "program": "src/app.ts", 
      "stopOnEntry": false, 
      "sourceMaps": true, 
      "outDir": "bin" 
     } 
    ] 
} 

Затем я вручную скомпилировать проект из командной строки с

tsc 

так что я получаю два файла в бен каталог. Я поставил точку останова на app.ts и, наконец, запустить решение с F5, запускается приложение и останавливается на правой линии, но на файл JS вместо этого TS один: почему ???

Я делаю что-то неправильно или пытаюсь добиться невозможного?

Большое вам спасибо за помощь! :)

EDIT

Я просто поделился своим проектом на GitHub для того, чтобы сделать вещи проще! Посмотрите, если сможете! :)

Answer 1

Это абсолютно возможно.

Наиболее вероятно, что node.js не может найти соответствующие файлы ts с помощью сгенерированного файла map.js. Вы можете попробовать указать «sourceRoot» в tsconfig.json, чтобы указать на корень вашего проекта:

sourceRoot: "/Users/SomeUser/projects/test" 

Лично я предпочитаю использовать глоток для этой цели, и в моем случае это будет выглядеть следующим образом (обратите внимание - Я не хардкорный путь sourceRoot здесь с помощью Node.js глобальной переменной «__dirname»):

var ts = require('gulp-typescript'); 

gulp.task('build.js.dev', function() 
{ 
    var tsProject = ts.createProject('tsconfig.json'); 

    var tsResult = tsProject.src() 
     .pipe(sourcemaps.init()) 
     .pipe(ts(tsProject)); 

    return merge([ 
     //Write definitions 
     //tsResult.dts.pipe(gulp.dest("bin")), 
     //Write compiled js 
     tsResult.js.pipe(sourcemaps.write("./", { sourceRoot: __dirname })).pipe(gulp.dest("bin"))]); 
}); 

После этого рассмотрим сгенерированный map.js файл. Он должен содержать что-то вроде этой линии в начале:

"sources":["src/app.ts"] 

и в конце концов:

"sourceRoot":"/Users/SomeUser/projects/test" 

В сочетании друг с другом, они должны указывать на правильное местоположение вашего файла app.ts. Если нет - отрегулируйте sourceRoot соответственно.

[EDIT]

Ниже перечислены части проекта, идентичного ваш (без глотка) - что я могу отладить на моей машине.

launch.json:

{ 
    // Name of configuration; appears in the launch configuration drop down menu. 
    "name": "Launch Server", 
    // Type of configuration. 
    "type": "node", 
    // Workspace relative or absolute path to the program. 
    "program": "${workspaceRoot}/src/app.ts", 
    // Automatically stop program after launch. 
    "stopOnEntry": false, 
    // Command line arguments passed to the program. 
    "args": [], 
    // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace. 
    "cwd": "${workspaceRoot}", 
    // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH. 
    "runtimeExecutable": null, 
    // Optional arguments passed to the runtime executable. 
    "runtimeArgs": ["--nolazy"], 
    // Environment variables passed to the program. 
    "env": { 
     "NODE_ENV": "development" 
    }, 
    // Use JavaScript source maps (if they exist). 
    "sourceMaps": true, 
    // If JavaScript source maps are enabled, the generated code is expected in this directory. 
    "outDir": "${workspaceRoot}/bin", 
    "request": "launch" 
} 

tsconfig.json:

{ 
    "compilerOptions": { 
     "emitDecoratorMetadata": true, 
     "experimentalDecorators": true, 
     "moduleResolution": "node", 
     "module": "commonjs", 
     "target": "es6", 
     "sourceMap": true, 
     "outDir": "bin", 
     "declaration": true, 
     "noImplicitAny": true 
    }, 
    "exclude": [ 
     "node_modules", 
     "bin", 
     ".vscode", 
     "typings/browser.d.ts", 
     "typings/browser/**" 
    ] 
} 

И построить задачу в tasks.json:

{ 
    "version": "0.1.0", 

    // The command is tsc. Assumes that tsc has been installed locally using npm install typescript 
    "command": "${workspaceRoot}/node_modules/typescript/bin/tsc", 

    // The command is a shell script 
    "isShellCommand": true, 

    // Show the output window only if unrecognized errors occur. 
    "showOutput": "silent", 

    // args is the HelloWorld program to compile. 
    "args": [], 

    // use the standard tsc problem matcher to find compile problems 
    // in the output. 
    "problemMatcher": "$tsc" 
} 

[EDIT]

У меня есть сделали следующие незначительные обновления для y наш репозиторий git сможет отлаживать его локально.

Добавить package.json в корневой папке, и указать там TSC, как зависимость (я предпочитаю локальные установки):

{ 
    "name": "123", 
    "namelower": "123", 
    "version": "0.0.1", 
    "private": true, 
    "dependencies": { 
    }, 
    "devDependencies": { 
    "typescript": "latest" 
    } 
} 

затем перейдите на мерзавца «StackOverflow» корневую папку и запустить в командной строке:

npm install 

Изменение в строке tasks.json "команду":

"command": "${workspaceRoot}/node_modules/typescript/bin/tsc", 

После этого т HESE шагов и построение проекта я был в состоянии поставить точку останова в app.ts и VSCode остановилось на нем на ход (F5)

[UPDATE]

Версии tasks.json совместимой с окнами:

{ 
    "version": "0.1.0", 
    "command": "tsc", 

    "showOutput": "always", 

    "windows": { 
     "command": "node.exe" 
    }, 

    "args": ["${workspaceRoot}\\node_modules\\typescript\\bin\\tsc.js"], 

    "problemMatcher": "$tsc"  
} 

Надеюсь, это поможет.