Was ist eine TypeScript-Map-Datei?

Ich habe .mapDateien für TypeScript gesehen. Was ich wissen möchte, ist, wofür diese Dateien sind. Enthalten sie Verweise auf andere Dateien, auf die in der .ts-Datei verwiesen wird?

.map-Dateien sind Quellzuordnungsdateien, mit denen Tools zwischen dem ausgegebenen JavaScript-Code und den TypeScript-Quelldateien, die ihn erstellt haben, zugeordnet werden können. Viele Debugger (z. B. Visual Studio oder die Entwicklertools von Chrome) können diese Dateien verwenden, sodass Sie die TypeScript-Datei anstelle der JavaScript-Datei debuggen können.

Dies ist das gleiche Quellkartenformat, das von einigen Minifizierern und anderen in JS kompilierten Sprachen wie CoffeeScript erzeugt wird .

Eine Quellkarte ist im Grunde das, was sie sagt, eine Karte von einer Sprache in eine andere, sodass der Debugger den JavaScript-Code ausführen kann, Ihnen jedoch die Zeile anzeigt, die ihn tatsächlich generiert hat.

Für praktische Debugging-Zwecke:

Mit der Quellzuordnung können Sie einen Haltepunkt für die TypeScript- Datei festlegen und dann den Code debuggen. Dies kann in Chrome und Firefox erfolgen. Etwas verwirrend ist, dass das Debugger-Verhalten in Chrome darin besteht, dass beim Erreichen des Haltepunkts die '.js'-Datei tatsächlich angezeigt wird (am Haltepunkt gestoppt).

Ab heute zeigt der Firefox-Debugger die aktuelle TypeScript-Datei an, wenn sie beschädigt wird. Siehe die folgende Referenz:

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

(Dies zeigt auch, wie Visual Studio zum Erstellen der Quellzuordnung konfiguriert werden kann.)

Um zu verstehen, wie eine Quellkarte funktioniert, lesen Sie hier den Abschnitt 'Die Anatomie einer Quellkarte':

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

Es gibt zwei Arten von .mapDateien, die in Typescript am häufigsten vorkommen. Eine ist Source Map ( .js.map) und die andere ist Declaration Map ( .d.ts.map). Ich werde beide nacheinander ausführlich erläutern.

Quellkarten: .js.map

Quell-map ( .js.map) -Dateien enthalten Zuordnungsdefinitionen, die jeden Teil Ihres generierten Javascript-Codes mit der spezifischen Zeile und Spalte der entsprechenden Typescript-Datei verknüpfen. Die Zuordnungsdefinitionen in diesen Dateien liegen im JSON-Format vor.

Wenn Quellkarten während des Debuggens aktiviert sind, zeigen Visual Studio Code und Chrome DevTools Ihren Typescript-Code anstelle des generierten komplexen Javascript-Codes an.

Warum Quellkarten verwenden?

In Produktions-Apps verwenden wir beispielsweise Build-Tools wie Rollup, um toten Code zu entfernen, Prepack, um den Code zu entfernen und durch Berechnungen zu ersetzen, die zur Kompilierungszeit anstelle der Laufzeit ausgewertet werden können, und minimieren den Code dann mit Uglify. Und ganz zu schweigen von der Komplexität des bereits transpilierten Javascript-Codes. Der resultierende Code kann sich also stark von dem Code unterscheiden, den Sie tatsächlich geschrieben haben. Daher wird empfohlen, Quellkarten zu verwenden. Dies erleichtert das Debuggen sehr, da Sie Ihren ursprünglichen Quellcode schrittweise durchgehen können.

Tools zur Prozessüberwachung, Fehlerüberwachung, Protokollierung und Stapelverfolgung wie Sentry, Bugsnag, PM2 und Winston verwenden ebenfalls Quellzuordnungen für die Zuordnung von Zeilen und Spalten in Javascript-Ausnahmestapelspuren zurück zu Typescript.

Wie verwende ich Quellkarten?

Sie können Quellzuordnungen entweder mithilfe der --sourceMapOption beim Kompilieren oder durch Angabe compilerOptionsin der tsconfig.jsonDatei Ihres Projekts wie folgt aktivieren :

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

Sicherheitshinweis für Quellkarten:

Wenn Sie durch Verschleierung Ihres Browsercodes eine gewisse Sicherheit erreichen möchten, möchten Sie möglicherweise Quellkarten aus dem Browsercode in Ihrer Produktions-App ausschließen.

Deklarationskarten: .d.ts.map

Deklarationszuordnungsdateien ( .d.ts.map), auch als Deklarationsquellzuordnungen bezeichnet, enthalten Zuordnungsdefinitionen, die jede in .d.tsDateien generierte Typdeklaration mit Ihrer ursprünglichen Quelldatei ( .ts) verknüpfen . Die Zuordnungsdefinition in diesen Dateien liegt im JSON-Format vor.

Dies ist hilfreich bei der Code-Navigation. Sie können Editorfunktionen wie "Gehe zu Definition" und "Umbenennen" verwenden, um transparent durch Unterprojekte zu navigieren und Code zu bearbeiten, wenn Sie ein großes Projekt mithilfe von Projektreferenzen in kleine Projekte aufgeteilt haben.

Geben Sie zum Aktivieren von Deklarationszuordnungen die folgenden zwei Optionen in der tsconfig.jsonDatei Ihres Projekts an:

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

Das ist es! Hoffentlich hilft das.