inlineSourceMap în TypeScript

Pune harta sursă direct în fișierul .js (base64), nu într-un .js.map separat; inlineSources include și codul .ts.

Sintaxă
"compilerOptions": {
  "inlineSourceMap": true,
  "inlineSources": true
}

Ce face inlineSourceMap

Cu inlineSourceMap, harta sursă nu mai este un fișier separat: este codificată în base64 pe ultimul rând al fișierului .js (//# sourceMappingURL=data:application/json;base64,...). Ai un singur fișier de copiat, dar fișierul .js devine mai mare. Nu se poate combina cu sourceMap (TS5053).

inlineSources adaugă în hartă și conținutul fișierelor .ts (câmpul sourcesContent). Depanatorul poate afișa sursa chiar dacă fișierele .ts nu sunt pe server. Are nevoie de sourceMap sau inlineSourceMap (TS5051). Ambele sunt implicit false.

Parametri

Parametru Descriere
inlineSourceMap: true Harta este scrisă în fișierul .js, nu separat.
inlineSources: true Harta conține și codul sursă .ts.

Exemple

Exemplul 1: Harta și sursa în același fișier

Rezultatul este un singur fișier dist/index.js. Decodat, ultimul rând conține harta, inclusiv sursa TypeScript în sourcesContent (rândul din cat a fost tăiat la 120 de caractere).

// tsconfig.json
{
  "compilerOptions": {
    "module": "nodenext",
    "target": "es2022",
    "inlineSourceMap": true,
    "inlineSources": true,
    "outDir": "dist"
  }
}

// src/index.ts
const oras: string = "Iași";
console.log(oras);

Rezultat (tsc 5.9)

$ npx tsc && find dist -type f | sort
dist/index.js

$ cat dist/index.js | cut -c1-120
const oras = "Iași";
console.log(oras);
export {};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cm

$ tail -1 dist/index.js | sed 's/.*base64,//' | base64 -d
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAW,MAAM,CAAC;AAC5B,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC","sourcesContent":["const oras: string = \"Iași\";\nconsole.log(oras);\n"]}

Exemplul 2: Combinații refuzate

Primul rezultat: inlineSourceMap împreună cu sourceMap. Al doilea: inlineSources fără nicio hartă.

// tsconfig.json (prima variantă)
{
  "compilerOptions": {
    "module": "nodenext",
    "target": "es2022",
    "inlineSourceMap": true,
    "sourceMap": true
  }
}

Rezultat (tsc 5.9)

$ npx tsc
tsconfig.json(5,5): error TS5053: Option 'sourceMap' cannot be specified with option 'inlineSourceMap'.
tsconfig.json(6,5): error TS5053: Option 'sourceMap' cannot be specified with option 'inlineSourceMap'.

$ npx tsc          # doar "inlineSources": true
tsconfig.json(5,5): error TS5051: Option 'inlineSources can only be used when either option '--inlineSourceMap' or option '--sourceMap' is provided.

Greșeli frecvente

  • Să folosești inlineSourceMap în build-ul de producție al unui site. Fiecare fișier crește mult; folosește hărți separate sau niciuna.

Comenzi înrudite

  • sourceMap: Generează fișiere .js.map care leagă JavaScript-ul generat de rândurile din sursa .ts (pentru depanare și erori).
  • sourceRoot: Schimbă locul unde depanatorul caută sursele .ts (sourceRoot) și hărțile .map (mapRoot), dacă nu sunt lângă fișierele .js.