|
|
Pubblicato su 30/06/2022 20:04:02
|
|
|
|
Requisiti: Distribuire il codice front-end del progetto (Angular, vue) nell'ambiente di produzione, e il progetto è in faseIl processo di compilazione comprime e oscura il codiceSe durante la compilazione viene generato un file mappa, possiamo usare il file map per localizzare la posizione del file sorgente.
Cos'è Sourcemap?
Una sourcemap è essenzialmente un file informativo che memorizza le corrispondenti informazioni sulla posizione prima e dopo la conversione del codice. Registra la posizione del codice sorgente prima della conversione corrispondente al codice compresso, ed è una mappatura tra il codice sorgente e il codice di produzione. Sourcemap risolve il problema che durante il processo di confezionamento il codice viene compresso, despaziato, compilato e trasformato, con il risultato dell'impossibilità di fare debug a causa delle grandi differenze tra i codici.
Il ruolo di Sourcemap
In poche parole, Sourcemap crea un ponte tra il codice di pre-elaborazione e post-elaborazione, rendendo facile individuare dove si verificano i bug in produzione. Poiché lo sviluppo front-end di oggi è modulare e basato su componenti, unire e comprimere file JS e CSS prima di essere pubblicati può facilmente causare confusione. La funzione di sourceMap è permettere al pannello di debug del browser di mappare il codice generato al file del codice sorgente, e gli sviluppatori possono debugare nel file del codice sorgente, rendendo il debug molto più semplice e semplice per i programmatori.
Per prima cosa, crea un nuovo progetto Angular e scrivi un pezzo di codice problematico.
Il codice html è il seguente:
Il codice TS è il seguente:
Nella fase di sviluppo, se si verifica un errore, è molto facile individuare la posizione sbagliata, come mostrato nella figura sottostante:
Costruisci il progetto in un pacchetto di release e genera un file mappa con il seguente comando:
Distribuisci il file risultante su un server HTTP, come IIS, Nginx, ecc. frattempoSposta il file della mappa in una directory diversa, comodo per i test.
Al momento, non possiamo vedere il messaggio di errore e il codice sorgente in modo intuitivo, installiamo il "Source Code Locator Tool" con il seguente comando:
Introduzione dei parametri:
Usage: sl [options]
Options:
-v, --versione output il numero di versione
-p, --source-flie-path Il file sorgente generato compilava il file mappa
-l, --ine Il numero di riga nella riga compilata della sorgente generata
-c, --colonna Il numero di colonna nella sorgente generata
-h, --aiuta le informazioni sull'utilizzo dell'output
(Fine)
|
Precedente:Estrae tutto il testo da un file PDF usando C# (supporta .NET Core)Prossimo:Conoscenza front-end di JavaScript comunemente nota come ES6, ES8, ES 2017, ECMAScript
|
Pubblicato su 30/06/2022 21:36:37