Come eseguire il debug del codice TypeScript sul lato server in WebStorm

Question

Confrontando questo codice con Visual Studio, è sufficiente consentire alle mappe di origine e VSCode di eseguire il debug di TypeScript, ma non è possibile ottenere lo stesso su WebStorm.

mi può facilmente eseguire il debug lato server JavaScript WebStorm ma non dattiloscritto

Answer 1

Per chiunque altro alle prese con il debug dattiloscritto in WebStorm/IDEA, ho avuto frustrazioni simili come OP (forse per ragione diversa). Il mio problema era semplicemente che non ho impostato la directory di lavoro nella cartella dist nella configurazione di esecuzione del nodo. Sto facendo dei test in Jest e ho pensato che la directory di lavoro dovrebbe essere la radice del mio progetto. Impostalo su dist e il debug inizia a funzionare!

Ulteriori informazioni ...

Fonte Ts file in src

versione tipografico: 2.0.3

File tsconfig.json:

{ 
    "compilerOptions": { 
    "jsx": "react", 
    "module": "commonjs", 
    "noImplicitAny": false, 
    "outDir": "dist", 
    "preserveConstEnums": true, 
    "removeComments": true, 
    "sourceMap": true, 
    "target": "es6", 
    "moduleResolution": "node" 
    }, 
    "exclude": [ 
    "node_modules", 
    "dist" 
    ] 
} 

Jest config (in package.json):

"jest": { 
    "scriptPreprocessor": "<rootDir>/node_modules/ts-jest/dist/preprocessor.js", 
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx)$", 
    "moduleFileExtensions": [ 
     "ts", 
     "tsx", 
     "js" 
    ] 
    } 

configurazione Esegui ...

Directory di lavoro: <project_root>/dist

file JavaScript: ../node_modules/jest-cli/bin/jest.js

params di applicazione: --runInBand

Speranza che aiuta!

Answer 2

Per l'esecuzione WebStorm (2017/02/03) debugger attorno alle sorgenti dattiloscritto che ho fatto:

1. Setup Node.js configurazione:
   • Directory di lavoro: root/of/the/project (dove si trova il mio package.json) File
   • JavaScript: dist/index.js

2. Sto compilando il mio TypeScript con gulp-typescript, ma più importante i file della mappa di origine. Così, per la compilazione è stato utilizzato compito come di seguito:

   const gulp = require('gulp'); 
   const ts = require('gulp-typescript'); 
   const sourcemaps = require('gulp-sourcemaps'); 
   const merge = require('merge2'); 
   
   const tsProject = ts.createProject('tsconfig.json', { 
       declaration: true, 
       typescript: require('typescript'), 
   }); 
   
   gulp.task('default',() => { 
       const result = gulp.src('./app/**/*.ts') 
       .pipe(sourcemaps.init()) 
       .pipe(sourcemaps.identityMap()) // optional 
       .pipe(tsProject()); 
   
       return merge([ 
   result.js 
        .pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '../app' })) 
        .pipe(gulp.dest('dist')), 
       result.dts 
        .pipe(gulp.dest('dist')), 
       ]); 
   }); 
   

Tutti i file TS fonte situata nella cartella './app', tutti i file compilati si trovano nella cartella ./dist. La più importante opzione di file sorgente sourceRoot, valore errato non ti porta al file ts.

Con sourcemaps.write('.', { includeContent: false, sourceRoot: '../app' } sto scrivendo il mio file .map accanto .js file e fare riferimento alla cartella app. Non ho bisogno di contenuti nei file .map perché è già lì (cartella app).

Grazie a @Ekaterina sono riuscito a eseguire il debug del nodo con Typescript.