|
|
Δημοσιεύτηκε στις 30/6/2022 8:04:02 μ.μ.
|
|
|
|
Απαιτήσεις: Αναπτύξτε τον κώδικα του έργου προσκηνίου (Angular, vue) στο περιβάλλον παραγωγής και το έργο βρίσκεται σεΗ διαδικασία μεταγλώττισης συμπιέζει και συσκοτίζει τον κώδικαΕάν δημιουργηθεί ένα αρχείο χάρτη κατά τη μεταγλώττιση, μπορούμε να χρησιμοποιήσουμε το αρχείο χάρτη για να εντοπίσουμε τη θέση του αρχείου προέλευσης.
Τι είναι το Sourcemap;
Ένας χάρτης πηγής είναι ουσιαστικά ένα αρχείο πληροφοριών που αποθηκεύει τις αντίστοιχες πληροφορίες τοποθεσίας πριν και μετά τη μετατροπή κώδικα. Καταγράφει τη θέση του πηγαίου κώδικα πριν από τη μετατροπή που αντιστοιχεί στον συμπιεσμένο κώδικα και είναι μια αντιστοίχιση μεταξύ του πηγαίου κώδικα και του κώδικα παραγωγής. Το Sourcemap λύνει το πρόβλημα ότι κατά τη διαδικασία συσκευασίας, ο κώδικας συμπιέζεται, αποδιαστέλλεται και μεταγλωττίζεται και μετασχηματίζεται, με αποτέλεσμα την αδυναμία εντοπισμού σφαλμάτων λόγω των μεγάλων διαφορών μεταξύ των κωδικών.
Ο ρόλος του Sourcemap
Με απλά λόγια, το Sourcemap δημιουργεί μια γέφυρα μεταξύ της προεπεξεργασίας και της μετα-επεξεργασίας κώδικα, καθιστώντας εύκολο τον εντοπισμό του πού εμφανίζονται σφάλματα στην παραγωγή. Επειδή η σημερινή ανάπτυξη front-end είναι αρθρωτή και βασίζεται σε στοιχεία, η συγχώνευση και η συμπίεση αρχείων JS και CSS πριν από τη ζωντανή μετάδοση μπορεί εύκολα να προκαλέσει σύγχυση. Η λειτουργία του sourceMap είναι να επιτρέπει στον πίνακα εντοπισμού σφαλμάτων του προγράμματος περιήγησης να αντιστοιχίσει τον κώδικα που δημιουργείται στο αρχείο πηγαίου κώδικα και οι προγραμματιστές μπορούν να κάνουν εντοπισμό σφαλμάτων στο αρχείο πηγαίου κώδικα, κάτι που θα κάνει τον εντοπισμό σφαλμάτων πολύ πιο εύκολο και απλούστερο για τους προγραμματιστές.
Αρχικά, δημιουργήστε ένα νέο έργο Angular και γράψτε ένα κομμάτι προβληματικού κώδικα.
Ο κώδικας html έχει ως εξής:
Ο κωδικός TS έχει ως εξής:
Στο στάδιο ανάπτυξης, εάν υπάρχει σφάλμα, είναι πολύ εύκολο να εντοπίσετε τη λάθος τοποθεσία, όπως φαίνεται στο παρακάτω σχήμα:
Δημιουργήστε το έργο σε ένα πακέτο έκδοσης και δημιουργήστε ένα αρχείο χάρτη με την ακόλουθη εντολή:
Αναπτύξτε το αρχείο που προκύπτει σε διακομιστή HTTP, όπως IIS, Nginx κ.λπ. εν τω μεταξύΜετακίνηση του αρχείου αντιστοίχισης σε διαφορετικό κατάλογο, βολικό για δοκιμή.
Προς το παρόν, δεν μπορούμε να δούμε το μήνυμα σφάλματος και τον πηγαίο κώδικα διαισθητικά, εγκαθιστούμε το "Εργαλείο εντοπισμού πηγαίου κώδικα" με την ακόλουθη εντολή:
Εισαγωγή παραμέτρων:
Usage: sl [options]
Options:
-v, --έκδοση εξάγει τον αριθμό έκδοσης
-p, --source-flie-path Το αρχείο προέλευσης που δημιουργήθηκε μεταγλωττισμένο αρχείο χάρτη
-l, --ine Ο αριθμός γραμμής στη μεταγλωττισμένη γραμμή κώδικα της πηγής που δημιουργείται
-c, --στήλη Ο αριθμός στήλης στην πηγή που δημιουργήθηκε
-h, --βοήθεια για την έξοδο πληροφοριών χρήσης
(Τέλος)
|
Προηγούμενος:Εξαγωγή όλου του κειμένου από ένα αρχείο PDF χρησιμοποιώντας C# (υποστηρίζει .NET Core)Επόμενος:Front-end γνώση JavaScript που συνήθως αναφέρεται ως ES6, ES8, ES 2017, ECMAScript
|
Δημοσιεύτηκε στις 30/6/2022 9:36:37 μ.μ.