Onlangs heb ik bestanden gezien met de extensie .js.mapdie bij sommige JavaScript-bibliotheken zijn geleverd (zoals Angular), en dat riep alleen maar een paar vragen op in mijn hoofd:
- Waar is het voor? Waarom zorgen de jongens van Angular ervoor dat een
.js.map-bestand wordt afgeleverd? - Hoe kan ik (als JavaScript-ontwikkelaar) het bestand
angular.min.js.mapgebruiken? - Moet ik me zorgen maken over het maken van
.js.map-bestanden voor mijn JavaScript-toepassingen? - Hoe wordt het gemaakt? Ik heb
angular.min.js.mapbekeken en het stond vol met vreemd opgemaakte strings, dus ik neem aan dat het niet handmatig is gemaakt.
Antwoord 1, autoriteit 100%
De .mapbestanden zijn voor jsen css(en nu ook ts) bestanden die zijn verkleind. Ze heten SourceMaps. Wanneer je een bestand verkleint, zoals het bestand angular.js, kost het duizenden regels mooie code en verandert het in slechts een paar regels lelijke code. Hopelijk gebruikt u, wanneer u uw code naar productie verzendt, de verkleinde code in plaats van de volledige, niet-verkleinde versie. Wanneer uw app in productie is en een fout bevat, zal de bronkaart u helpen uw lelijke bestand te nemen en u de originele versie van de code laten zien. Als je de sourcemap niet had, zou elke fout op zijn best cryptisch lijken.
Hetzelfde voor CSS-bestanden. Als je eenmaal een SASS- of LESS-bestand hebt genomen en het naar CSS hebt gecompileerd, lijkt het in niets meer op zijn oorspronkelijke vorm. Als u sourcemaps inschakelt, kunt u de oorspronkelijke staat van het bestand zien, in plaats van de gewijzigde staat.
Dus, om je vragen in volgorde te beantwoorden:
- Waar is het voor?Verfraaide code de-referentie
- Hoe kan een ontwikkelaar het gebruiken?U gebruikt het voor het debuggen van een productie-app. In de ontwikkelingsmodus kunt u de volledige versie van Angular gebruiken. In productie zou je de verkleinde versie gebruiken.
- Moet ik me zorgen maken over het maken van een js.map-bestand?Als je het belangrijk vindt dat je productiecode gemakkelijker kunt debuggen, dan moet je dat zeker doen.
- Hoe wordt het gemaakt?Het wordt gemaakt tijdens het bouwen. Er zijn bouwhulpmiddelen die uw .map-bestand voor u kunnen bouwen, net als andere bestanden. https://github.com/gruntjs/grunt-contrib-uglify/issues/71
Ik hoop dat dit logisch is.
Antwoord 2, autoriteit 6%
- Hoe kan een ontwikkelaar het gebruiken?
Ik heb hier geen antwoord op gevonden in de opmerkingen, hier is hoe het kan worden gebruikt:
- Koppel nietuw js.map-bestand in uw index.html-bestand (dat is niet nodig)
-
Minificatietools (goede) voeg een opmerking toe aan je .min.js-bestand:
//# sourceMappingURL=yourFileName.min.js.map
die uw .map-bestand zal verbinden.
Als de bestanden min.jsen js.mapklaar zijn…
- Chrome: Open dev-tools, ga naar het tabblad Bronnen. U ziet de map sources, waar niet-geminimaliseerde applicatiebestanden worden bewaard .
Antwoord 3, autoriteit 6%
Ik wilde me alleen concentreren op het laatste deel van de vraag; Hoe worden bronkaartbestanden gemaakt?door de bouwtools op te sommen die ik ken waarmee bronkaarten kunnen worden gemaakt.
- Grunt: met behulp van plug-in
grunt-contrib-uglify - Gulp: met plug-in
gulp-uglify - Google-sluiting: met parameter
--create_source_map
Antwoord 4, autoriteit 2%
Het kaartbestand wijst het niet-verkleinde bestand toe aan het verkleinde bestand. Als u wijzigingen aanbrengt in het niet-verkleinde bestand, worden de wijzigingen automatisch doorgevoerd in de verkleinde versie van het bestand.
Antwoord 5
Alleen om toe te voegen aan het gebruik van kaartbestanden. Ik gebruik chrome voor ubuntu en als ik naar bronnen ga en op een bestand klik, als er een kaartbestand is, verschijnt er een bericht dat ik het originele bestand kan bekijken en hoe ik het moet doen.
Voor de Angular-bestanden waarmee ik vandaag heb gewerkt, klik ik op
Ctrl-P
en een lijst met originele bestanden verschijnt in een klein venster.
Ik kan dan door de lijst bladeren om het bestand te bekijken dat ik wil inspecteren en na te gaan waar het probleem zou kunnen zijn.