Cách gỡ lỗi mã TypeScript phía máy chủ trong WebStorm

Question

So sánh điều này với Visual Studio Code tất cả những gì bạn cần làm là cho phép bản đồ nguồn và VSCode sẽ gỡ lỗi TypeScript tuy nhiên tôi không thể đạt được điều tương tự trên WebStorm.

tôi có thể dễ dàng gỡ lỗi phía máy chủ JavaScript trong WebStorm nhưng không phải nguyên cảo

Answer 1

Đối với bất cứ ai khác vật lộn với nguyên cảo gỡ lỗi trong WebStorm/IDEA, tôi đã thất vọng tương tự như OP (có thể vì lý do khác nhau). Vấn đề của tôi chỉ đơn giản là tôi đã không đặt thư mục làm việc vào thư mục dist trong cấu hình chạy nút. Tôi đang chạy thử nghiệm trong Jest và giả định các thư mục làm việc nên được gốc của dự án của tôi. Đặt nó thành dist và gỡ lỗi bắt đầu hoạt động!

Thêm thông tin ...

Nguồn .ts file trong src

phiên bản nguyên cảo: 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 cấu hình (trong package.json):

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

cấu hình Run ...

thư mục làm việc: <project_root>/dist

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

params Ứng dụng: --runInBand

Hy vọng nó sẽ giúp!

Answer 2

Đối với chạy WebStorm (2017/02/03) debugger xung quanh nguồn nguyên cảo tôi đã làm:

1. Cài đặt Node.js cấu hình:
   • thư mục làm việc: root/of/the/project (nơi tọa lạc của tôi package.json)
   • Javascript file: dist/index.js

2. Tôi đang biên dịch TypeScript của tôi với gulp-typescript, nhưng quan trọng hơn là các tệp bản đồ nguồn. Vì vậy, để biên dịch đã được sử dụng nhiệm vụ như dưới đây:

   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')), 
       ]); 
   }); 
   

Tất cả nguồn TS file nằm trong thư mục './app', tất cả các file biên soạn nằm ở ./dist thư mục. Tùy chọn nguồn tập tin quan trọng nhất sourceRoot, giá trị sai không đưa bạn đến tập tin ts.

Bằng cách sourcemaps.write('.', { includeContent: false, sourceRoot: '../app' } Tôi đang viết các tệp .map bên cạnh .js tệp và tham chiếu đến app thư mục. Tôi không cần nội dung trong các tệp .map vì nó đã có (app thư mục).

Nhờ @Ekaterina tôi đã có thể chạy gỡ lỗi Node với Typecript.