Što je TypeScript Map datoteka?

Vidio sam .map datoteke za TypeScript. Ono što želim znati je čemu te datoteke služe. Sadrže li reference na druge datoteke na koje se poziva u .ts datoteci?

Odgovor #1

.map datoteke su datoteke izvornog koda koje omogućuju alatima da povežu generirani JavaScript kod s izvornim TypeScript datotekama koje su ga stvorile. Mnogi debuggers (npr. Visual Studio ili Chromeovi alati za razvoj) mogu koristiti ove datoteke tako da možete debugirati TypeScript datoteku umjesto JavaScript datoteke.

Ovo je isti format izvornih karata koji proizvode neki minifikatori i drugi jezici koji se prevode u JavaScript, poput CoffeeScripta.

Odgovor #2

Postoje dvije najčešće vrste .map datoteka u Typescriptu. Jedna je Source Map (.js.map), a druga je Declaration Map (.d.ts.map). Objavit ću objašnjenje obje detaljno, jednu po jednu.

Karte izvora: .js.map

Datoteke izvornog mapa (.js.map) sadrže definicije mapiranja koje povezuju svaki dio vašeg generiranog Javascript koda s određenim redom i stupcem odgovarajuće Typescript datoteke. Definicije mapiranja u tim datotekama su u JSON formatu.

Kada su omogućene source mape, tijekom debugiranja, Visual Studio Code i Chrome DevTools prikazivat će vaš Typescript kod umjesto generiranog složenog Javascript koda.

Zašto koristiti izvorišne karte?

U produkcijskim aplikacijama, na primjer, koristimo alate za izgradnju poput Rollupa za uklanjanje mrtvog koda, Prepack za eliminiranje i zamjenu koda s izračunima koji se mogu procijeniti u vrijeme kompilacije umjesto u vrijeme izvođenja, a zatim minimiziramo kod pomoću Uglifyja. A da ne spominjemo složenost već transpajlanog Javascript koda. Dakle, rezultirajući kod može biti vrlo različit od koda koji ste zapravo napisali. Stoga se preporučuje korištenje source mapa, to čini ispravljanje pogrešaka vrlo jednostavnim jer možete korak po korak proći kroz izvorni kod koji ste napisali.

Alati za praćenje procesa, praćenje pogrešaka, zapisivanje i praćenje stoga poput Sentry, Bugsnag, PM2, Winston također koriste izvorne mape za mapiranje redaka i stupaca u Javascript tragovima iznimki natrag u Typescript.

Kako koristiti izvorišne karte?

Možete omogućiti izvorne mape ili korištenjem opcije --sourceMap tijekom kompilacije ili navodeći je u compilerOptions u tsconfig.json datoteci vašeg projekta, kao slijedi:

{
  "compilerOptions": {
    ...
    "sourceMap": true,
    "outDir": "./out"
  }
}

Sigurnosna napomena za izvornu mapu:

Ako želite postići neku sigurnost zamagljivanjem koda vašeg preglednika, možda ćete htjeti isključiti izvorne mape iz koda preglednika u vašoj aplikaciji za proizvodnju.

Karte deklaracija: .d.ts.map

Datoteke karte deklaracija (.d.ts.map), također poznate kao karte izvora deklaracija, sadrže definicije mapiranja koje povezuju svaku deklaraciju tipa generiranu u .d.ts datotekama s vašom izvornom datotekom (.ts). Definicije mapiranja u tim datotekama su u JSON formatu.

Ovo je korisno pri navigaciji koda. Moći ćete koristiti značajke uređivača poput „Idi na definiciju“ i Preimenuj za transparentnu navigaciju i uređivanje koda preko podprojekata kada ste veliki projekt podijelili u više malih projekata koristeći reference projekata.

Da biste omogućili karte deklaracija, navedite sljedeće dvije opcije u datoteci tsconfig.json vašeg projekta:

{
  "compilerOptions": {
    ...
    "declaration": true,
    "declarationMap": true
  }
}

To je to! Nadam se da to pomaže.

Odgovor #3

Mapa izvora je u osnovi ono što ime kaže, karta s jednog jezika na drugi, tako da debugger može pokrenuti JavaScript kod, ali vam pokazati liniju koja ga je zapravo generirala.

Za praktične svrhe ispravljanja pogrešaka:

Ono što vam izvorna karta omogućuje je postavljanje prekida na TypeScript datoteku i zatim debugiranje koda. To se može učiniti u Chromeu i Firefoxu. Pomalo zbunjujuće, ponašanje debugger-a u Chromeu je takvo da kada se dosegne prekid, zapravo se prikazuje '.js' datoteka (zaustavljena na prekidu).

Od danas će Firefoxov debugger prikazivati stvarnu TypeScript datoteku kada naiđe na prekid. Pogledajte donju referencu:

http://www.gamefromscratch.com/post/2014/05/27/TypeScript-debugging-in-Visual-Studio-with-IE-Chrome-and-Firefox-using-Source-Maps.aspx)

(ovo također pokazuje kako se Visual Studio može konfigurirati za stvaranje karte izvornog koda)

Da biste razumjeli kako radi izvorna karta, možete pročitati odjeljak 'Anatomija izvorne karte' ovdje:

https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

Povezani članci