TypeScript Map dosyası nedir?

TypeScript için .map dosyalarını gördüm. Bilmek istediğim, bu dosyaların ne amaçla kullanıldığı. .ts dosyasında referans verilen diğer dosyalara referans içeriyorlar mı?

Cevap #1

.map dosyaları, araçların yayımlanan JavaScript kodu ile onu oluşturan TypeScript kaynak dosyaları arasında eşleme yapmasını sağlayan kaynak harita dosyalarıdır. Birçok hata ayıklayıcı (örneğin Visual Studio veya Chrome'un geliştirici araçları) bu dosyaları kullanabilir, böylece JavaScript dosyası yerine TypeScript dosyasını hata ayıklayabilirsiniz.

Bu, bazı minifier'lar ve CoffeeScript gibi JS'e derlenen diğer diller tarafından üretilen aynı kaynak haritası formatıdır.

Cevap #2

TypeScript'te en yaygın iki tür .map dosyası vardır. Biri Source Map (.js.map), diğeri ise Declaration Map (.d.ts.map) dosyasıdır. Her ikisini de teker teker detaylı olarak açıklayacağım.

Kaynak Haritalar: .js.map

Kaynak harita (.js.map) dosyaları, üretilen JavaScript kodunuzun her parçasını ilgili Typescript dosyasının belirli satır ve sütununa bağlayan eşleme tanımlarını içerir. Bu dosyalardaki eşleme tanımları JSON formatındadır.

Kaynak haritaları etkinleştirildiğinde, hata ayıklama sırasında, Visual Studio Code ve Chrome DevTools, oluşturulan karmaşık Javascript kodu yerine Typescript kodunuzu gösterecektir.

Kaynak haritaları neden kullanılmalı?

Örneğin üretim uygulamalarında, ölü kodu kaldırmak için Rollup gibi derleme araçları, derleme zamanında çalıştırmak yerine hesaplanabilen kodu ortadan kaldırmak ve yerine geçecek şekilde değiştirmek için Prepack kullanıyoruz, ardından kodu Uglify ile küçültüyoruz. Ve zaten dönüştürülmüş Javascript kodunun karmaşıklığından bahsetmiyorum bile. Bu yüzden ortaya çıkan kod, aslında yazdığınız koddan çok farklı olabilir. Bu nedenle kaynak haritaları kullanmanız önerilir, çünkü hata ayıklamayı çok kolay hale getirir; orijinal kaynak kodunuz üzerinde adım adım ilerleyebilirsiniz.

Sentry, Bugsnag, PM2, Winston gibi süreç izleme, hata izleme, kayıt ve yığın izleme araçları da Javascript istisna yığın izlerindeki satır ve sütunları Typescript'e geri eşlemek için kaynak haritalarını kullanır.

Kaynak haritaları nasıl kullanılır?

Kaynak haritalarını ya derleme sırasında --sourceMap seçeneğini kullanarak ya da projenizin tsconfig.json dosyasındaki compilerOptions içinde belirterek etkinleştirebilirsiniz, şu şekilde:

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

Kaynak haritaları için güvenlik notu:

Tarayıcı kodunuzu karma hale getirerek bir güvenlik sağlamak istiyorsanız, üretim uygulamanızda tarayıcı kodundan kaynak haritalarını hariç tutmak isteyebilirsiniz.

Beyan Haritaları: .d.ts.map

Deklarasyon haritası (.d.ts.map) dosyaları, deklarasyon kaynak haritaları olarak da bilinir, .d.ts dosyalarında üretilen her tür bildiriminizi orijinal kaynak dosyanıza (.ts) bağlayan eşleme tanımlarını içerir. Bu dosyalardaki eşleme tanımları JSON formatındadır.

Bu, kod navigasyonunda faydalıdır. Büyük bir projeyi proje referansları kullanarak küçük birden çok projeye böldüğünüzde, alt projeler arasında kodu şeffaf bir şekilde gezmek ve düzenlemek için "Tanıma Git" ve Yeniden Adlandır gibi editör özelliklerini kullanabileceksiniz.

Deklarasyon haritalarını etkinleştirmek için, projenizin tsconfig.json dosyasında aşağıdaki iki seçeneği belirtin:

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

Hepsi bu! Umarım yardımcı olur.

Cevap #3

Bir kaynak haritası temelde dediği şeydir, bir dilden diğerine bir harita, böylece hata ayıklayıcı JavaScript kodunu çalıştırabilir ama aslında onu üreten satırı size gösterebilir.

Pratik hata ayıklama amaçları için:

Kaynak haritasının size izin verdiği şey, TypeScript dosyasında bir kesme noktası ayarlamak ve ardından kodu hata ayıklamaktır. Bu, Chrome ve Firefox'ta yapılabilir. Biraz kafa karıştırıcı bir şekilde, Chrome'daki hata ayıklayıcı davranışı şudur: Kesme noktasına ulaşıldığında, aslında '.js' dosyası gösterilir (kesme noktasında durur).

Bugünden itibaren, Firefox hata ayıklayıcı durduğunda gerçek TypeScript dosyasını gösterecektir. Aşağıdaki referansa bakın:

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

(bu ayrıca Visual Studio'nun kaynak haritası oluşturacak şekilde nasıl yapılandırılabileceğini gösterir)

Bir kaynak haritasının nasıl çalıştığını anlamak için, buradaki 'Bir kaynak haritasının anatomisi' bölümünü okuyabilirsiniz:

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

İlgili makaleler