Baru-baru ini saya telah melihat file dengan .js.map
ekstensi yang dikirimkan dengan beberapa perpustakaan JavaScript (seperti Angular ), dan itu hanya menimbulkan beberapa pertanyaan di kepala saya:
- Untuk apa ini? Mengapa orang-orang di Angular peduli untuk mengirimkan
.js.map
file? - Bagaimana saya (sebagai pengembang JavaScript) dapat menggunakan
angular.min.js.map
file? - Haruskah saya peduli membuat
.js.map
file untuk aplikasi JavaScript saya? - Bagaimana cara membuatnya? Saya melihat
angular.min.js.map
dan itu diisi dengan string berformat aneh jadi saya menganggap itu tidak dibuat secara manual.
javascript
angularjs
source-maps
Muhammad Reda
sumber
sumber
Jawaban:
The
.map
file untukjs
dancss
(dan sekarangts
juga) file yang telah diminimalkan. Mereka disebut SourceMaps. Ketika Anda mengecilkan file, seperti file angular.js, dibutuhkan ribuan baris kode cantik dan mengubahnya menjadi hanya beberapa baris kode jelek. Mudah-mudahan, ketika Anda mengirimkan kode Anda ke produksi, Anda menggunakan kode yang diperkecil alih-alih versi lengkap, tidak ditambang. Ketika aplikasi Anda dalam produksi, dan memiliki kesalahan, sourcemap akan membantu mengambil file jelek Anda, dan akan memungkinkan Anda untuk melihat versi asli dari kode. Jika Anda tidak memiliki sourcemap, maka kesalahan apa pun akan tampak samar.Sama untuk file CSS. Setelah Anda mengambil file SASS atau KURANG dan mengkompilasinya ke CSS, itu tidak terlihat seperti bentuk aslinya. Jika Anda mengaktifkan sourcemaps, maka Anda dapat melihat status asli file, alih-alih negara yang dimodifikasi.
Jadi, untuk menjawab pertanyaan Anda agar:
Saya harap ini masuk akal.
sumber
.js.map
file memelihara hubungan (seringkali disebut referensi ) antara file buatan tangan dan file yang diperkecil?Hanya ingin fokus pada bagian terakhir dari pertanyaan; Bagaimana file peta sumber dibuat? dengan membuat daftar alat bantu yang saya tahu yang dapat membuat peta sumber.
grunt-contrib-uglify
gulp-uglify
--create_source_map
sumber
Saya tidak menemukan jawaban untuk ini di komentar, di sini adalah bagaimana dapat digunakan:
Alat minifiacation (bagus) menambahkan komentar ke file .min.js Anda :
// # sourceMappingURL = yourFileName.min.js.map
yang akan menghubungkan file .map Anda .
Ketika file min.js dan js.map siap ...
sumber
File peta memetakan file yang tidak diubah ke file yang diperkecil. Jika Anda membuat perubahan pada file yang tidak diubah, perubahan akan secara otomatis tercermin ke versi file yang diperkecil.
sumber
Hanya untuk menambah cara menggunakan file peta. Saya menggunakan chrome untuk ubuntu dan jika saya pergi ke sumber dan mengklik file, jika ada file peta pesan muncul memberitahu saya bahwa saya dapat melihat file asli dan bagaimana melakukannya.
Untuk file Angular tempat saya bekerja hari ini saya klik
Saya kemudian dapat menelusuri daftar untuk melihat file yang ingin saya periksa dan periksa di mana masalahnya mungkin.
sumber