Source map
- TypeScript kursu
- Uzman
- Ders 19/35
- 4 dk
sourceMap ve inlineSourceMap'i öğrenirsin.
Source map nedir?
Bir source map, derlenen JavaScript'i kaynak TypeScript dosyasına bağlayan bir haritadır. sourceMap: true her .js için bir .js.map dosyası üretir; hata ayıklayıcı bunu kullanarak kullanıcıya orijinal TypeScript satırlarını gösterir.
{
"compilerOptions": {
"sourceMap": true
}
}Source map olmadan, hata yığınları derlenmiş JavaScript satırlarını gösterir.
sourceMap vs inlineSourceMap
sourceMap: true her JavaScript dosyasının yanında bir .js.map dosyası üretir; bu, çok dosyalı projelerde yaygın tercihtir. inlineSourceMap: true ise haritayı .js dosyasına gömer ve ayrı dosya üretmez; bu, tek dosyalı dağıtımlar için uygundur.
// sourceMap: dist/index.js + dist/index.js.map
// inlineSourceMap: dist/index.js (map gömülü)İkisi birlikte kullanılmaz; biri seçilir.
Uygulama Source map dosya adını hesapla
Bir mapFileName fonksiyonu yaz: bir JavaScript dosya yolunu alsın ve source map dosya adını (.js uzantısına .map ekle) döndürsün. inline parametresi true ise gömülü harita olduğu için ayrı dosya adı yerine "(inline)" döndürsün. mapFileName("dist/index.js", false) sonucunu yazdır.
Başlangıç kodu
// mapFileName: JavaScript dosyasına karşılık map adını verir
// gömülü modda "(inline)" döndür
// ayrı dosya durumunda uzantıya map eki ekle
// "dist/index.js", false için sonucu yazdırÖrnek çözüm
function mapFileName(jsPath: string, inline: boolean): string {
if (inline) return "(inline)";
return jsPath + ".map";
}
console.log(mapFileName("dist/index.js", false));Beklenen çıktı
dist/index.js.map
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 `inlineSourceMap: true` ne yapar?
- Yalnızca .d.ts üretir
- Ayrı bir .js.map dosyası üretir
- Source map'i .js dosyasına gömülü olarak ekler Doğru cevap
- Source map üretimini kapatır
Açıklama: inlineSourceMap: true, source map'i ayrı bir dosya yerine .js dosyasının sonunda base64 olarak gömer; sourceMap ayrı .js.map üretir, noEmit ve emitDeclarationOnly farklı amaçlara hizmet eder.
2 Source map'i aç
{
"compilerOptions": {
"____": true
}
}{
"compilerOptions": {
"sourceMap": true
}
}Açıklama: Ayrı .js.map dosyası üretmek için sourceMap kullanılır; inlineSourceMap gömülü harita üretir, noEmit çıktıyı kapatır, map ise geçerli bir seçenek adı değildir.
3 Source map parçaları
| Kavram | Anlamı |
|---|---|
sourceMap: true |
ayrı .js.map üretir |
inlineSourceMap: true |
haritayı .js'e gömer |
.js.map |
harita dosyası |
base64 |
gömülü harita kodlaması |