File .map Javascript - peta sumber javascript

357

Baru-baru ini saya telah melihat file dengan .js.mapekstensi 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.mapfile?
Bagaimana saya (sebagai pengembang JavaScript) dapat menggunakan angular.min.js.mapfile?
Haruskah saya peduli membuat .js.mapfile untuk aplikasi JavaScript saya?
Bagaimana cara membuatnya? Saya melihat angular.min.js.mapdan itu diisi dengan string berformat aneh jadi saya menganggap itu tidak dibuat secara manual.

javascript angularjs source-maps

— Muhammad Reda
sumber

1

html5rocks.com/en/tutorials/developertools/sourcemaps

— Anand

550

The .mapfile untuk jsdan css(dan sekarang tsjuga) 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:

Untuk apa ini? Untuk menghilangkan referensi kode uglified
Bagaimana cara pengembang menggunakannya? Anda menggunakannya untuk men-debug aplikasi produksi. Dalam mode pengembangan, Anda dapat menggunakan versi lengkap Angular. Dalam produksi, Anda akan menggunakan versi yang diperkecil.
Haruskah saya peduli membuat file js.map? Jika Anda peduli untuk dapat men-debug kode produksi lebih mudah, maka ya, Anda harus melakukannya.
Bagaimana cara membuatnya? Itu dibuat saat membangun. Ada alat build yang dapat membangun file .map Anda untuk Anda seperti halnya file lain. https://github.com/gruntjs/grunt-contrib-uglify/issues/71

Saya harap ini masuk akal.

— sangat dingin
sumber

19

perhatikan bahwa file peta tidak akan dikirim sampai Anda menyebutnya, itulah yang membuat saya bingung stackoverflow.com/a/27196201/861487

— Abdelouahab

2

Terima kasih Harun, ini adalah salah satu deskripsi yang lebih baik yang saya lihat untuk sumber. Saya menggunakannya dalam tegukan dan saya telah mempelajari sebagian besar segalanya tentang tegukan dan bertanya-tanya bagaimana sebenarnya sumber-sumber itu digunakan, sekarang saya bisa merasa percaya diri menggunakannya. Sebagian besar plugin tegukan kompatibel sekarang juga vs setahun yang lalu ketika beberapa tidak. Hanya ingin mengatakan itu masuk akal!

— Eric Bishard

@frosty Untuk menghilangkan referensi kode yang sudah di- uglified . Bisakah Anda jelaskan ini? Tidakkah .js.mapfile memelihara hubungan (seringkali disebut referensi ) antara file buatan tangan dan file yang diperkecil?

— Mohammed Zameer

1

@student dikatakan de-referensi karena saya tidak ingin referensi kode yang diperkecil. Itu diperkecil dan jika saya melihatnya, itu tidak berharga. Tapi, jika itu bisa de-referensi kembali ke sumber aslinya, itu akan epik. Dan itulah yang menjadi acuan. Saya harap itu membantu.

— sangat dingin

Saya suka jawaban ini (terima kasih), tetapi memiliki 420 suka ... apakah saya mematahkannya?

— Eric Reed

33

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 : menggunakan plugingrunt-contrib-uglify
Gulp : menggunakan plugingulp-uglify
Google closure : menggunakan parameter--create_source_map

— Muhammad Reda
sumber

31

Bagaimana cara pengembang menggunakannya?

Saya tidak menemukan jawaban untuk ini di komentar, di sini adalah bagaimana dapat digunakan:

Jangan menautkan file js.map Anda di file index.html Anda (tidak perlu untuk itu)
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 ...

Chrome: Buka dev-tools , navigasikan ke tab Sources , Anda akan melihat folder sources , tempat file aplikasi yang tidak ditandai disimpan.

— garfunkel61
sumber

14

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.

— Surendra Yadav
sumber

2

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

Ctrl-P dan daftar file asli muncul di jendela kecil.

Saya kemudian dapat menelusuri daftar untuk melihat file yang ingin saya periksa dan periksa di mana masalahnya mungkin.

— rotato poti
sumber