.map dosyaları nedir, ne işe yarar ?
Web sayfanıza bir Javascript kütüphanesi eklediğinizde aşağıdaki gibi bir uyarıyı gözlemleyebilirsiniz. Çünkü sizden .min.x.js eklemesi yaptığınızda sonu .map uzantılı bir dosya isteyecektir.
Web üzerinde .map dosyaları Javascript, CSS ve Typescript dosyaları için kullanılmaktadır. Bu dosyalar kaynak haritaları olarak adlandırılırlar. Peki ne amaçla kullanılmaktadırlar.
Angular.js gibi bir kütüphane dosyasını minify ettiğinizde, elinizdeki düzenli kodu verip yerine okunamayacak biçimde yani sözdeyimi çirkin hale getirilmiş boşluklarından arındırılmış biçimini alırsınız. Uygulamanız üretim modunda yani projenin sunum halinde bir hata oluştuğunda kaynak haritası minify edilmiş dosyanızı otomatik olarak alacak ve kodun orjinal sürümünü görmenize izin verecektir. Bunu görmek için bir örnek uygulamakta fayda var.
.map Dosyasını Kullanmak
Örnek vermek gerekirse sitemizde Bootstrap kullanıyor olalım. Bootstrap içerisinde bootstrap.min.js ve bootstrap.min.js.map dosyalarını dist/js içerisinden site dizinimize atalım. İndirdiğiniz arşiv içerisindeki js/src altındaki dosyaları site dizininizde bir /maps klasörü oluşturun ve içerisine atın. Ardından .map dosyanızı editörde açın ve içerisindeki "../../js/src/" kaynak yollarının hepsini oluşturduğunuz /maps dizini yolu ile değiştirin.
Şimdi bootstrap.min.js dosyamızı <script> etiketi ile çağıralım. Siteyi açtığınızda Console altında .map dosyası için bir hata ile karşılaşmayacaksınız çünkü tarayıcı .min.js ile aynı dizinde olan .map dosyasını otomatik olarak tespit edecektir.
Ardından Geliştirici Araçlarının, Sources panelinden bootstrap.min.js dosyasını bulup açtığınızda dosya içerisinde şöyle bir uyarı ile karşılaşacaksınız.
"Source Map detected". Yani .map dosyası tespit edildi. Bu uyarıyı gördüğünüze göre şimdi Ctrl+P ile dosya denetleyicisi penceresini açın ve oradan bir Bootstrap dosyası olan modal.js dosyasını açın. Dosyayı açtığınızda artık debug yapmak istediğinizde, buradan sorunun tam olarak nerede olduğunu dosyanın orjinali üzerinden tespit edebileceksiniz.
Aynı durum CSS için de geçerlidir. SASS ve SCSS dosyalarımızın kaynak haritasını da çıkartarak bu işlemi uygulayabiliriz.
Bir geliştirici bu işlemi nasıl uygulayabilir ?
Bir üretim uygulamasında hata ayıklamak için kullanırsınız. Geliştirme modunda, Angular'ın tam sürümünü kullanabilirsiniz. Üretimde, minify edilmiş sürümü kullanırsınız.Kaynak haritası kullanmak zorunda mıyım ?
Üretim kodunda daha kolay hata ayıklamayı önemsiyorsanız, evet, yapmalısınız.Map dosyası ile ilgili açıklamalar bu kadardı, bir sonraki makalede görüşmek üzere.
2013 yılında geniş hayaller ile önce tasarım sonra da yazılım alanında çalışmalar yapmaya başladım. Sıfırdan başlayarak pek çok MVC tabanlı sistemler ve Web Sayfaları tasarladım.