"sourceMap"
Generuje mapy źródeł .js.map, dzięki którym debuger pokazuje kod TypeScript zamiast wygenerowanego JavaScriptu.
Przykład
#{
"compilerOptions": {
"strict": true,
"target": "ES2022",
"module": "ESNext",
"sourceMap": true,
"outDir": "./dist"
},
"include": ["src"]
}Definicja i zastosowanie
#Przy sourceMap: true kompilator obok każdego pliku .js zapisuje plik .js.map. To mapa, która łączy miejsca w wygenerowanym JavaScripcie z wierszami i kolumnami oryginalnego pliku .ts.
Narzędzia deweloperskie przeglądarki i debuger w edytorze korzystają z niej, żeby pokazywać twój kod TypeScript: punkty przerwania ustawiasz w pliku .ts, a ślady stosu wskazują właściwe wiersze. Na końcu pliku .js pojawia się komentarz //# sourceMappingURL=…, po którym narzędzia znajdują mapę.
Node.js użyje map w śladach stosu po uruchomieniu z flagą --enable-source-maps. Opcja inlineSourceMap wkleja mapę bezpośrednio do pliku .js, bez osobnego pliku. W aplikacjach z bundlerem mapy źródeł konfiguruje się zwykle w samym bundlerze.
Składnia
#"sourceMap": trueWięcej przykładów
#export interface Course {
title: string
}
export function findCourse(courses: Course[], title: string): Course {
const course = courses.find((c) => c.title === title)
if (!course) throw new Error(`Brak kursu: ${title}`)
return course
}
findCourse([{ title: 'HTML' }], 'Rust')npx tsc
ls dist
# app.js app.js.map
node dist/app.js
# Error: Brak kursu: Rust
# at findCourse (file:///projekt/dist/app.js:4:15)
node --enable-source-maps dist/app.js
# Error: Brak kursu: Rust
# at findCourse (/projekt/src/app.ts:7:22)Dobre praktyki
#- Mapy źródeł na produkcji ułatwiają analizę błędów, ale ujawniają kod źródłowy. Wiele zespołów wysyła je tylko do narzędzia do monitorowania błędów, zamiast publikować je razem ze stroną.
- Przenosząc skompilowane pliki, przenoś razem z nimi pliki
.js.map. KomentarzsourceMappingURLwskazuje mapę ścieżką względną. - W bibliotekach dołącz też
declarationMap, żeby „Przejdź do definicji” w edytorze prowadziło do źródła.ts, a nie do pliku.d.ts.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.