File Javascript .map - mappe sorgente javascript

357

Recentemente ho visto file con .js.mapestensione forniti con alcune librerie JavaScript (come Angular ), e questo mi ha fatto sorgere alcune domande:

Cosa serve? Perché i ragazzi di Angular si preoccupano di consegnare un .js.mapfile?
Come posso (come sviluppatore JavaScript) utilizzare il angular.min.js.mapfile?
Dovrei preoccuparmi di creare .js.mapfile per le mie applicazioni JavaScript?
Come viene creato? Ho dato un'occhiata angular.min.js.maped è stato riempito con stringhe con formattazione strana, quindi suppongo che non sia stato creato manualmente.

javascript angularjs source-maps

— Muhammad Reda
fonte

1

html5rocks.com/en/tutorials/developertools/sourcemaps

— Anand

550

I .mapfile sono per jse css(e ora tsanche) file che sono stati minimizzati. Si chiamano SourceMaps. Quando si minimizza un file, come il file angular.js, prende migliaia di righe di codice grazioso e lo trasforma in poche righe di codice brutto. Si spera che, quando si spedisce il codice in produzione, si sta utilizzando il codice minimizzato anziché la versione completa e non minimizzata. Quando l'app è in produzione e presenta un errore, la mappa sorgente ti aiuterà a prendere il tuo brutto file e ti permetterà di vedere la versione originale del codice. Se non avessi la mappa sorgente, qualsiasi errore sembrerebbe al massimo criptico.

Lo stesso vale per i file CSS. Una volta che prendi un file SASS o LESS e lo compili in CSS, non assomiglia per niente alla sua forma originale. Se abiliti le mappe di origine, puoi vedere lo stato originale del file, anziché lo stato modificato.

Quindi, per rispondere alle tue domande in ordine:

Cosa serve? Per de-referenziare il codice semplificato
Come può utilizzarlo uno sviluppatore? Lo usi per il debug di un'app di produzione. Nella modalità di sviluppo è possibile utilizzare la versione completa di Angular. In produzione, useresti la versione minimizzata.
Dovrei preoccuparmi di creare un file js.map? Se ti interessa poter eseguire il debug del codice di produzione più facilmente, quindi sì, dovresti farlo.
Come viene creato? Viene creato al momento della creazione. Ci sono strumenti di compilazione che possono creare il tuo file .map per te come fanno altri file. https://github.com/gruntjs/grunt-contrib-uglify/issues/71

Spero che abbia senso.

— gelido
fonte

19

nota che il file della mappa non verrà inviato fino a quando non lo chiami, questo è ciò che mi ha fatto confondere stackoverflow.com/a/27196201/861487

— Abdelouahab

2

Grazie aaron, questa è una delle migliori descrizioni che ho visto per sourcemap. Lo sto usando in gulp e avevo imparato quasi tutto su gulp e mi chiedevo esattamente come venivano usate le mappe sorgente, ora posso sentirmi sicuro di usarlo. La maggior parte dei plugin di gulp sono compatibili anche adesso rispetto a un anno fa, quando alcuni non lo erano. Volevo solo dire che ha perfettamente senso!

— Eric Bishard,

@frosty Per de-referenziare il codice semplificato . Puoi spiegarlo per favore? Un .js.mapfile non mantiene una relazione (spesso chiamata riferimento ) tra un file creato a mano e un file minimizzato?

— Mohammed Zameer,

1

@student dice de-reference perché non voglio fare riferimento al codice minimizzato. È minimizzato e se lo guardo, è quasi inutile. Ma, se fosse in grado di rimandare indietro alla fonte originale, sarebbe epico. Ed è esattamente quello che è una mappa sorgente. Spero che aiuti.

— gelido

Adoro questa risposta (grazie), ma ha 420 Mi piace ... la rompo?

— Eric Reed,

33

Volevo solo concentrarmi sull'ultima parte della domanda; Come vengono creati i file delle mappe di origine? elencando gli strumenti di compilazione che so che possono creare mappe di origine.

Grunt : usando plugingrunt-contrib-uglify
Gulp : usando il plugingulp-uglify
Chiusura di Google : utilizzando il parametro--create_source_map

— Muhammad Reda
fonte

31

Come può utilizzarlo uno sviluppatore?

Non ho trovato risposta per questo nei commenti, ecco come si può usare:

Non collegare il tuo file js.map nel tuo file index.html (non è necessario)
Gli strumenti di minifiacation (quelli buoni) aggiungono un commento al tuo file .min.js :

// # sourceMappingURL = yourFileName.min.js.map

che collegherà il tuo file .map .

Quando i file min.js e js.map sono pronti ...

Chrome: apri gli strumenti di sviluppo , vai alla scheda Sorgenti , vedrai la cartella delle fonti , dove sono conservati i file delle applicazioni non minimizzati.

— garfunkel61
fonte

14

Il file di mappa associa il file non minimizzato al file minimizzato. Se si apportano modifiche al file non modificato, le modifiche si rifletteranno automaticamente sulla versione ridotta del file.

— Surendra Yadav
fonte

2

Solo per aggiungere a come utilizzare i file delle mappe. Uso Chrome per Ubuntu e se vado su fonti e faccio clic su un file, se c'è un file di mappa viene visualizzato un messaggio che mi dice che posso visualizzare il file originale e come farlo.

Per i file angolari con cui ho lavorato oggi clicco

Ctrl-P e un elenco di file originali appare in una piccola finestra.

Posso quindi sfogliare l'elenco per visualizzare il file che vorrei ispezionare e verificare dove potrebbe essere il problema.

— rotato poti
fonte