|
|
Diposting pada 30/06/2022 20.04.02
|
|
|
|
Persyaratan: Sebarkan kode proyek front-end (Angular, vue) ke lingkungan produksi, dan proyek ada diProses kompilasi mengompresi dan mengaburkan kodeJika file peta dihasilkan selama kompilasi, kita dapat menggunakan file peta untuk menemukan lokasi file sumber.
Apa itu Peta Sumber?
Peta sumber pada dasarnya adalah file informasi yang menyimpan informasi lokasi yang sesuai sebelum dan sesudah konversi kode. Ini mencatat lokasi kode sumber sebelum konversi yang sesuai dengan kode terkompresi, dan merupakan pemetaan antara kode sumber dan kode produksi. Sourcemap memecahkan masalah bahwa selama proses pengemasan, kode dikompresi, didespace, dan dikompilasi dan diubah, mengakibatkan ketidakmampuan untuk men-debug karena perbedaan besar antara kode.
Peran Sourcemap
Sederhananya, Sourcemap membangun jembatan antara kode pra-pemrosesan dan pasca-pemrosesan, sehingga mudah untuk menemukan di mana bug terjadi dalam produksi. Karena pengembangan front-end saat ini modular dan berbasis komponen, menggabungkan dan mengompresi file JS dan CSS sebelum ditayangkan dapat dengan mudah menyebabkan kebingungan. Fungsi sourceMap adalah untuk memungkinkan panel debugging browser untuk memetakan kode yang dihasilkan ke file kode sumber, dan pengembang dapat men-debug dalam file kode sumber, yang akan membuat debugging jauh lebih mudah dan sederhana bagi pemrogram.
Pertama, buat proyek Angular baru dan tulis sepotong kode yang bermasalah.
Kode html adalah sebagai berikut:
Kode TS adalah sebagai berikut:
Pada tahap pengembangan, jika terjadi kesalahan, sangat mudah untuk menemukan lokasi yang salah, seperti yang ditunjukkan pada gambar di bawah ini:
Bangun proyek ke dalam paket rilis dan buat file peta dengan perintah berikut:
Sebarkan file yang dihasilkan di server HTTP, seperti IIS, Nginx, dll. SementaraMemindahkan file peta ke direktori lain, nyaman untuk pengujian.
Saat ini, kami tidak dapat melihat pesan kesalahan dan kode sumber secara intuitif, kami menginstal "Alat Pencari Kode Sumber" dengan perintah berikut:
Pengenalan parameter:
Usage: sl [options]
Options:
-v, --version keluarkan nomor versi
-p, --source-flie-path File sumber yang dihasilkan berkas peta yang dikompilasi
-l, --ine Nomor baris dalam baris kode yang dikompilasi sumber yang dihasilkan
-c, --column Nomor kolom di sumber yang dihasilkan
-h, --bantuan informasi penggunaan keluaran
(Akhir)
|
Mantan:Ekstrak semua teks dari file PDF menggunakan C# (mendukung .NET Core)Depan:Pengetahuan front-end tentang JavaScript yang biasa disebut sebagai ES6, ES8, ES 2017, ECMAScript
|
Diposting pada 30/06/2022 21.36.37