sourceRoot în TypeScript

Schimbă locul unde depanatorul caută sursele .ts (sourceRoot) și hărțile .map (mapRoot), dacă nu sunt lângă fișierele .js.

Sintaxă
"compilerOptions": {
  "sourceMap": true,
  "sourceRoot": "https://exemplu.ro/surse/",
  "mapRoot": "https://exemplu.ro/harti/"
}

Ce face sourceRoot

sourceRoot este scris în câmpul cu același nume din hartă: depanatorul caută fișierele .ts pornind de la această adresă, nu de la locul hărții. mapRoot schimbă rândul //# sourceMappingURL= din fișierul .js, ca harta să fie căutată la altă adresă (de exemplu pe un server intern).

Ambele sunt pentru situații în care sursele sau hărțile nu stau lângă fișierele .js. Au sens doar cu sourceMap. Nu au valoare implicită.

Parametri

Parametru Descriere
sourceRoot Cale sau URL unde se găsesc sursele .ts.
mapRoot Cale sau URL unde se găsesc fișierele .map.

Exemple

Exemplul 1: Ce se schimbă în fișierele generate

Rândul final din index.js trimite la mapRoot, iar harta are sourceRoot setat (și sources relativ la el).

// tsconfig.json
{
  "compilerOptions": {
    "module": "nodenext",
    "target": "es2022",
    "sourceMap": true,
    "outDir": "dist",
    "sourceRoot": "https://exemplu.ro/surse/",
    "mapRoot": "https://exemplu.ro/harti/"
  }
}

// src/index.ts
console.log("Bună");

Rezultat (tsc 5.9)

$ npx tsc && tail -1 dist/index.js
//# sourceMappingURL=https://exemplu.ro/harti/index.js.map

$ cat dist/index.js.map
{"version":3,"file":"index.js","sourceRoot":"https://exemplu.ro/surse/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC"}

Greșeli frecvente

  • Să setezi mapRoot și să lași hărțile în dist. Depanatorul le caută la adresa din mapRoot și nu le găsește.

Comenzi înrudite

  • sourceMap: Generează fișiere .js.map care leagă JavaScript-ul generat de rândurile din sursa .ts (pentru depanare și erori).
  • inlineSourceMap: Pune harta sursă direct în fișierul .js (base64), nu într-un .js.map separat; inlineSources include și codul .ts.