Source map

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.

Örnek çözümü göster

function mapFileName(jsPath: string, inline: boolean): string {
  if (inline) return "(inline)";
  return jsPath + ".map";
}

console.log(mapFileName("dist/index.js", false));

Kendini test et

`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
- Source map üretimini kapatır
Cevabı göster

Source map'i .js dosyasına gömülü olarak ekler — 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.

Source map'i aç

{
  "compilerOptions": {
    "____": true
  }
}

Cevabı göster

{
  "compilerOptions": {
    "sourceMap": true
  }
}

Source map parçaları

sourceMap: true

ayrı .js.map üretir
inlineSourceMap: true

haritayı .js'e gömer
.js.map

harita dosyası
base64

gömülü harita kodlaması

Sıradaki ders: Declaration emit

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler