Co to jest plik mapy TypeScript?

Widziałem .mappliki dla TypeScript. Chcę wiedzieć, do czego służą te pliki. Czy zawierają odniesienia do innych plików, do których istnieją odniesienia w pliku .ts?

Pliki .map to pliki map źródłowych, które umożliwiają narzędziom mapowanie między wyemitowanym kodem JavaScript a plikami źródłowymi TypeScript, które go utworzyły. Wiele debugerów (np. Visual Studio lub narzędzia deweloperskie Chrome) może używać tych plików, dzięki czemu można debugować plik TypeScript zamiast pliku JavaScript.

Jest to ten sam format mapy źródłowej, który jest tworzony przez niektóre minifier i inne języki skompilowane do JS, takie jak CoffeeScript .

Mapa źródłowa jest w zasadzie tym, co mówi, mapą z jednego języka na inny, więc debugger może uruchomić kod JavaScript, ale pokazuje wiersz, który go wygenerował.

Do praktycznych celów debugowania:

Mapa źródłowa umożliwia ustawienie punktu przerwania w pliku TypeScript , a następnie debugowanie kodu. Można to zrobić w Chrome i Firefox. Nieco mylące zachowanie debugera w Chrome polega na tym, że po osiągnięciu punktu przerwania plik „.js” jest faktycznie wyświetlany (zatrzymywany w punkcie przerwania).

Od dzisiaj debugger Firefoksa będzie wyświetlał rzeczywisty plik TypeScript, gdy się zepsuje. Zobacz poniższe odniesienie:

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

(pokazuje to również, jak można skonfigurować program Visual Studio do tworzenia mapy źródłowej)

Aby zrozumieć, jak działa mapa źródłowa, możesz przeczytać sekcję „Anatomia mapy źródłowej” tutaj:

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

Istnieją dwa typy .mapplików, które są najczęściej używane w programie Typescript. Jedna to Source Map ( .js.map), a druga to Declaration Map ( .d.ts.map). Oba szczegółowo wyjaśnię po kolei.

Mapy źródłowe: .js.map

.js.mapPliki mapy źródłowej ( ) zawierają definicje mapowań, które łączą każdy fragment wygenerowanego kodu JavaScript z powrotem do określonej linii i kolumny odpowiedniego pliku Typescript. Definicje mapowania w tych plikach są w formacie JSON.

Gdy mapy źródłowe są włączone, podczas debugowania Visual Studio Code i Chrome DevTools pokażą Twój kod Typescript zamiast wygenerowanego złożonego kodu JavaScript.

Dlaczego warto korzystać z map źródłowych?

Na przykład w aplikacjach produkcyjnych używamy narzędzi do kompilacji, takich jak Rollup, aby usunąć martwy kod, Prepack w celu wyeliminowania i zastąpienia kodu obliczeniami, które można ocenić w czasie kompilacji, a nie w czasie wykonywania, a następnie minimalizujemy kod za pomocą Uglify. Nie wspominając o złożoności już transponowanego kodu Javascript. Zatem wynikowy kod może znacznie różnić się od kodu, który faktycznie napisałeś. Dlatego zaleca się używanie map źródłowych, bardzo ułatwia to debugowanie, ponieważ można przejść przez oryginalny kod źródłowy.

Narzędzia do monitorowania procesów, monitorowania błędów, rejestrowania i śledzenia stosu, takie jak Sentry, Bugsnag, PM2, Winston, również używają map źródłowych do mapowania wierszy i kolumn w śladach stosu wyjątków JavaScript z powrotem do Typescript.

Jak korzystać z map źródłowych?

Możesz włączyć mapy źródłowe, używając --sourceMapopcji podczas kompilacji lub określając je compilerOptionsw tsconfig.jsonpliku projektu, na przykład:

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

Uwaga dotycząca bezpieczeństwa map źródłowych:

Jeśli chcesz uzyskać pewne bezpieczeństwo, zaciemniając kod przeglądarki, możesz wykluczyć mapy źródłowe z kodu przeglądarki w aplikacji produkcyjnej.

Mapy deklaracji: .d.ts.map

.d.ts.mapPliki deklaracji map ( ), znane również jako mapy źródeł deklaracji, zawierają definicje odwzorowań, które łączą każdą deklarację typu wygenerowaną w .d.tsplikach z powrotem do oryginalnego pliku źródłowego ( .ts). Definicje mapowania w tych plikach są w formacie JSON.

Jest to pomocne w nawigacji po kodzie. Będziesz mógł korzystać z funkcji edytora, takich jak „Przejdź do definicji” i Zmień nazwę, aby w przejrzysty sposób nawigować i edytować kod między projektami podrzędnymi, gdy podzielisz duży projekt na kilka małych projektów przy użyciu odniesień do projektów.

Aby włączyć mapy deklaracji, określ następujące dwie opcje w tsconfig.jsonpliku projektu:

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

Otóż ​​to! Mam nadzieję, że to pomoże.