Ambiente di produzione Angular 11 serie (XIV) per il debug

Piccola feccia · Pubblicato su 11/08/2020 17:59:35

Componenti dinamici a carica dinamica della serie Angular 9 (1)
https://www.itsvse.com/thread-9238-1-1.html

Parametri di trasmissione dinamici dei componenti della serie Angular 9 (2)
https://www.itsvse.com/thread-9245-1-1.html

La serie Angular 9 (3) si abscrive agli eventi dinamici a componente
https://www.itsvse.com/thread-9246-1-1.html

Tubazioni personalizzate Angular 9 Series (IV)
https://www.itsvse.com/thread-9248-1-1.html

Serie Angular 9 (V) formata il formato di valuta di quantità
https://www.itsvse.com/thread-9249-1-1.html

La serie angolare 9 (VI) chiama variabili e metodi JS nativi
https://www.itsvse.com/thread-9254-1-1.html

Cannaletico in stile CSS della serie Angular 9 (VII)
https://www.itsvse.com/thread-9264-1-1.html

La serie angolare 9 (VIII) aggiorna il valore di un componente figlio attivando un evento tramite un set
https://www.itsvse.com/thread-9267-1-1.html

Selettore di #id Angular 9 Series (nove) applicato sulla pagina
https://www.itsvse.com/thread-9278-1-1.html

La serie Angular 9 (10) incorpora i pannelli di debug degli sviluppatori vconsole ed eruda
https://www.itsvse.com/thread-9286-1-1.html

Serie Angular 9 (XI) 5 modi per definire gli stili
https://www.itsvse.com/thread-9305-1-1.html

Angular 9 series (XII) genera token dinamici basati su OTP
https://www.itsvse.com/thread-9325-1-1.html

La serie Angular 10 (tredici) introduce le carte echart di Baidu
https://www.itsvse.com/thread-9347-1-1.html

Impacchettiamo il progetto Angular in un ambiente di produzione con il comando build, e l'effetto atteso può differire da quello che vediamo nel nostro ambiente di sviluppo.

Codice TS:

L'accesso è visibile.

AppComponent è il componente attuale.

Le rappresentazioni dell'ambiente di sviluppo e dell'ambiente di produzione sono le seguenti:

L'ambiente produttivo non era affatto quello che ci aspettavamo.

Informazioni sui dati dei comandi build:

Ottimizzazione delle prestazioni di build angolare
https://www.itsvse.com/thread-9203-1-1.html

Al momento, dobbiamo fare il debug.
SourceMap è un file informativo che memorizza la mappatura delle posizioni del codice sorgente e del codice compilato

Nel lavoro front-end, viene utilizzato principalmente per risolvere problemi di debug nei seguenti tre aspetti:

a. Dopo che la compressione del codice è stata confusa
b. Dopo aver compilato in css o JS usando altri linguaggi come sass e typeScript
c. Dopo la fusione multi-file utilizzando strumenti di packaging come webpack

Nei tre casi sopra, non possiamo debugare il codice sorgente con la stessa facilità con cui si fa durante il debug, quindi abbiamo bisogno di SourceMap per aiutarci a convertirlo in codice sorgente nella console per il debug.

Dobbiamo modificare il comando build, che è il seguente:

L'accesso è visibile.

(Prima di aggiungere parametri)

(Dopo aver aggiunto i parametri)

Puoi vedere che vengono generati molti file *.map.

Come mostrato nell'immagine sopra, usa Google Chrome, premi F12 per entrare in modalità sviluppatore, seleziona la fonte, seleziona main.js, poi clicca con il tasto destro e seleziona l'opzione "Aggiungi mappa sorgente" per aggiungere l'indirizzo del file mappa generato.

Per esempio:

http://127.0.0.1:8089/main.568ae4bdd06023f965c7.js.map

(Fine)

[Angolare] Ambiente di produzione Angular 11 serie (XIV) per il debug

Post correlati

Sezioni visualizzate