Javascript .map dosyaları - javascript kaynak haritaları

Son zamanlarda .js.mapbazı JavaScript kitaplıklarıyla ( Angular gibi ) gönderilen uzantıya sahip dosyaları gördüm ve bu sadece kafamda birkaç soruya neden oldu:

• Bu ne için? Angular'daki adamlar neden .js.mapdosya teslim ediyorlar ?
• Bir JavaScript geliştiricisi olarak angular.min.js.mapdosyayı nasıl kullanabilirim ?
• .js.mapJavaScript uygulamalarım için dosya oluşturmayı önemsemeli miyim ?
• Nasıl yaratılır? Bir göz attım angular.min.js.mapve garip biçimlendirilmiş dizelerle doluydu, bu yüzden elle oluşturulmadığını varsayıyorum.

.mapİçin dosyalardır jsve css(ve şimdi tsçok) dosyaları minified edildiğini. Bunlara SourceMaps denir. Angular.js dosyası gibi bir dosyayı küçültüldüğünüzde binlerce satırlık güzel kod alır ve yalnızca birkaç satır çirkin kod haline dönüşür. Umarım, kodunuzu üretime gönderirken, tam, sonlandırılmamış sürüm yerine küçültülmüş kodu kullanıyorsunuzdur. Uygulamanız hazır olduğunda ve bir hata olduğunda, sourcemap çirkin dosyanızı almanıza yardımcı olacak ve kodun orijinal sürümünü görmenize izin verecektir. Sourcemap'e sahip değilseniz, herhangi bir hata en iyi ihtimalle şifreli görünecektir.

CSS dosyaları için aynıdır. Bir SASS veya LESS dosyası alıp CSS'ye derledikten sonra orijinal formuna benzemez. Kaynak haritalarını etkinleştirirseniz, değiştirilen durum yerine dosyanın orijinal durumunu görebilirsiniz.

Size sırayla soruları cevaplamak için:

• Bu ne için? Geliştirilmiş kodun referansını kaldırmak için
• Bir geliştirici bunu nasıl kullanabilir? 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, minimize edilmiş versiyonu kullanırsınız.
• Bir js.map dosyası oluşturmayı ummalı mıyım? Üretim kodunda daha kolay hata ayıklamayı önemsiyorsanız, evet, yapmanız gerekir.
• Nasıl yaratılır? Oluşturma zamanında oluşturulur. Diğer dosyalarda olduğu gibi .map dosyanızı oluşturabilen oluşturma araçları vardır. https://github.com/gruntjs/grunt-contrib-uglify/issues/71

Umarım bu mantıklı gelir.

Sorunun son kısmına odaklanmak istedim; Kaynak harita dosyaları nasıl oluşturulur? kaynak haritaları oluşturabileceğimi biliyorum inşa araçları listeleyerek.

1. Grunt : eklenti kullanmagrunt-contrib-uglify
2. Gulp : eklenti kullanmagulp-uglify
3. Google kapatma : parametre kullanma--create_source_map

• Bir geliştirici bunu nasıl kullanabilir?

Yorumlarda bunun cevabını bulamadım, işte nasıl kullanılabilir:

1. Bağlantı vermeyin index.html dosyasında js.map dosyası (buna gerek yok)

2. Küçültme araçları (iyi olanlar) .min.js dosyanıza bir yorum ekler:

   // # sourceMappingURL = DosyaAdınız.min.js.map

bu da .map dosyanızı bağlar .

Ne zaman min.js ve js.map dosyaları hazır ...

3. Chrome: Geliştirici araçlarını açın , Kaynaklar sekmesine gidin, Küçültülmemiş uygulama dosyalarının tutulduğu kaynaklar klasörünü göreceksiniz .

Harita dosyası, küçültülmemiş dosyayı küçültülmüş dosyayla eşler. Değiştirilmemiş dosyada değişiklik yaparsanız, değişiklikler otomatik olarak dosyanın küçültülmüş sürümüne yansıtılır.

Sadece harita dosyalarını nasıl kullanacağınıza eklemek için. Ubuntu için krom kullanıyorum ve kaynaklara gidip bir dosyaya tıklarsam, bir harita dosyası varsa, orijinal dosyayı görüntüleyebileceğimi ve nasıl yapılacağını söyleyen bir mesaj gelir.

Bugün çalıştığım açısal dosyalar için

Ctrl-P ve orijinal dosyaların bir listesi küçük bir pencerede görüntülenir.

Daha sonra incelemek istediğim dosyayı görüntülemek ve sorunun nerede olabileceğini kontrol etmek için listeye göz atabilirim.