Peta Sumber adalah fail yang memetakan kod yang dimampatkan atau disusun kembali ke kod sumber asal, menjadikan debugging lebih mudah. 1. Ia membolehkan anda debug kod asal dan bukannya kod termampat dalam penyemak imbas; 2. Prinsip kerja adalah untuk merekodkan surat -menyurat antara kod asal dan disusun melalui fail .map; 3. Membina alat seperti Webpack menjana peta sumber dan merujuknya pada akhir fail JS; 4. Ia sering digunakan untuk menyahpepijat laporan kesilapan persekitaran pengeluaran, debugging pembangunan tempatan, dan analisis pengoptimuman prestasi; 5. Kaedah konfigurasi termasuk menetapkan pilihan devtool seperti peta sumber, peta sumber murah, dan lain-lain. Pendek kata, pemetaan sumber memainkan peranan utama dalam pembangunan, walaupun tidak mencolok, sangat diperlukan.

Peta sumber adalah fail yang "peta" kod dimampatkan atau disusun kembali ke kod sumber asal. Ia sangat biasa dalam pembangunan front-end moden, terutamanya apabila menggunakan alat binaan seperti webpack, vite, rollup, dll.

Ringkasnya, fungsinya adalah: Biarkan anda debug kod asal yang anda tulis dalam penyemak imbas, bukannya memampatkan dan menghancurkan sekumpulan kod yang tidak dapat difahami .

Mengapa pemetaan sumber diperlukan?

Kini kebanyakan projek akan membungkus, memampatkan, menterjemah dan proses lain untuk JavaScript, CSS dan juga Typescript. Contohnya:

• Gunakan Babel untuk menukar sintaks ES6 ke ES5
• Kompresi kod js dengan terse
• Tulis gaya dengan SASS/SCSS dan akhirnya menjana CSS

Operasi ini akan menjadikan kod output akhir sukar dibaca dan debug. Fungsi pemetaan sumber adalah untuk memulihkan kod yang dilaksanakan kepada versi yang anda tulis pada asalnya dalam alat pemaju pelayar untuk memudahkan kedudukan masalah.

Bagaimana sumber pemetaan sumber berfungsi?

Peta sumber pada dasarnya adalah fail .map -end yang merekodkan surat -menyurat antara kod asal dan kod yang disusun.

Sebagai contoh: anda menulis garis kod seperti ini:

 const Greet = (name) => console.log (`hello, $ {name}`);

Selepas mampatan, ia mungkin menjadi:

 var n = (n => console.log ("hello," n));

Sekiranya tiada peta sumber, kedudukan ralat yang anda lihat di konsol akan menunjuk pada baris kod termampat ini. Tetapi dengan peta sumber, penyemak imbas boleh memberitahu anda garis mana fungsi ini berasal dari fail asal, dan juga memaparkan nama pembolehubah asal.

Aliran kerja pemetaan sumber adalah kira -kira seperti berikut:

• Alat membina menghasilkan fail .map semasa mengeluarkan kod termampat
• Penyemak imbas mengesan bahawa rujukan peta sumber adalah (biasanya menambah ayat pada akhir fail JS //# sourceMappingURL=xxx.js.map )
• Penyemak imbas secara automatik memuatkan fail .map yang sepadan dan menggunakannya untuk menghuraikan stack panggilan dan maklumat berubah semasa pelaksanaan.

Bilakah pemetaan sumber akan digunakan?

1. Laporkan kesilapan dalam debugging persekitaran pengeluaran
   • Sesetengah sistem pemantauan (seperti Sentry) sokongan memuat naik peta sumber, supaya lokasi ralat asal boleh dipulihkan walaupun kod dalam talian dimampatkan.
2. Pembangunan tempatan debugging
   • Alat binaan akan menjana peta sumber dalam mod pembangunan secara lalai, membantu anda untuk debug kod asal secara langsung dalam penyemak imbas.
3. Analisis Pengoptimuman Prestasi
   • Kadang -kadang anda ingin melihat modul mana yang mengandungi bundle, dan peta sumber dapat membantu dalam menganalisis hasil pembinaan.

Bagaimana cara mengkonfigurasi pemetaan sumber?

Alat binaan yang berbeza mempunyai kaedah konfigurasi yang sedikit berbeza, tetapi idea teras adalah sama: tentukan cara untuk menjana peta sumber.

Mengambil Webpack sebagai contoh, tetapkannya di webpack.config.js :

 modul.exports = {
  Devtool: 'Sumber-Map', // atau Murah-Sumber-peta, peta-Sumber-peta, dan lain-lain}

Pilihan biasa termasuk:

• source-map : Pemetaan Lengkap, Sesuai untuk Debugging Pelepasan Pengeluaran
• cheap-source-map : Abaikan maklumat lajur dan saiz yang lebih kecil
• inline-source-map : Kandungan peta sumber terus tertanam dalam fail JS, memuat lebih cepat
• eval-source-map : digunakan dalam peringkat pembangunan, kelajuan cepat tetapi keselamatan yang rendah

Pada dasarnya itu sahaja.
Pemetaan sumber bukan teknologi hitam, tetapi ia memainkan peranan penting dalam pembangunan dan penyahpepijatan. Walaupun anda mungkin tidak memperhatikannya secara normal, ia adalah pembantu yang baik yang "tidak dapat dilihat tetapi tidak dapat dipisahkan".

Atas ialah kandungan terperinci Apa itu Pemetaan Sumber. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!