نقطه توقف VSCode در تایپاسکریپت با sourcemap تولید شده توسط gulp-sourcemaps کار نمیکند

من یک فایل تایپاسکریپت users.ts در زیرپوشه routes دارم.

کد گالپ در gulpfile.js:

var tsProject = ts.createProject(tsConfigFile);
return tsProject.src()
    .pipe(sourcemaps.init())
    .pipe(ts(tsProject))
    .js
    .pipe(sourcemaps.write('.', {includeContent: false, sourceRoot: ''})) 
    .pipe(gulp.dest('.'));

نقشهمنبع تولید شده توسط gulp-sourcemaps با VSCode کار نمیکند :

{"version":3,"sources":["routes/users.ts"],"names":[], "mappings":"...","file":"routes/users.js","sourceRoot":""}

نقشه منبع تولید شده توسط tsc در VSCode به خوبی کار میکند:

{"version":3,"file":"users.js","sourceRoot":"","sources":["users.ts"],"names":[], "mappings":"..."}

و نقطه توقف VSCode با نقشه منبعی که توسط tsc تولید شده است، به خوبی کار میکند.

پس چگونه gulp-typescript/gulp-sourcemaps را پیکربندی کنیم تا همان نقشهمنبع که tsc تولید میکند، ایجاد شود؟

پاسخ شماره ۱

این همان مشکل در Gulp Typescript + Browserify است؛ نقشه منبع بستهبندی شده به جای فایل TypeScript اصلی به JS تبدیلشده اشاره میکند
تابع sourceRoot را به sourcemaps.write(...) اضافه کنید
فرض بر این است که فایلهای .ts شما در پوشه src پروژه قرار دارند، مسیر لوله sourcemaps به شکل زیر خواهد بود:

.pipe(sourcemaps.write('.', {
           sourceRoot: function(file){ return file.cwd + '/src'; }
      }))

پاسخ شماره ۲

پاسخ پذیرفتهشده درست است، با این حال مدتی طول کشید تا بفهمم چرا این کار میکند و چگونه پاسخ را برای محیط خاص خودم تنظیم کنم (در مورد من، نیاز داشتم که پسوند /src را حذف کنم).

اگر نقشههای منبع تولید شده را بررسی کنید (این فقط وقتی که خروجی به فایلهای نقشه باشد کار میکند، به عنوان مثال sourcemaps.write(''.''))، باید دو فیلد در شیء JSON ببینید: sources و sourceRoot، دو چیز وجود دارد که باید از آنها مطمئن شوید:

1. مسیر sourceRoot باید یک مسیر مطلق باشد.
2. هر مسیر در sources باید با sourceRoot ترکیب شود تا مسیر مطلق به فایل منبع شما تشکیل شود.

اگر مورد شماره ۱ درست نباشد، مسیر در برخی موارد کار خواهد کرد و در برخی دیگر نه (برخی ابزارها مسیرهای نسبی را نسبت به فایل نقشه منبع حل میکنند، و برخی دیگر بر اساس ریشه فضای کاری شما، پوشه کاری فعلی، یا مسیر دیگری).

اگر مورد شماره ۲ درست نباشد، ابزارهای شما به دنبال فایلهای منبع در مکان اشتباه خواهند گشت.

یک نکته دیگر: به یاد داشته باشید که تغییر gulpfile شما باعث اجرای مجدد حالت watch یا پاک کردن هرگونه حافظه پنهان فایل نمیشود، زیرا فایل منبع شما تغییر نکرده است.