Pliki .map JavaScript - mapy źródeł javascript

Ostatnio widziałem pliki z .js.maprozszerzeniem dostarczane z niektórymi bibliotekami JavaScript (takimi jak Angular ), a to tylko wywołało kilka pytań:

• Po co to jest? Dlaczego faceci z Angular dbają o dostarczenie .js.mappliku?
• Jak mogę (jako programista JavaScript) korzystać z angular.min.js.mappliku?
• Czy powinienem dbać o tworzenie .js.mapplików dla moich aplikacji JavaScript?
• Jak powstaje? Rzuciłem okiem angular.min.js.mapi było wypełnione dziwnie sformatowanymi ciągami, więc zakładam, że nie jest tworzone ręcznie.

Te .mappliki są dla jsi css(i teraz tsteż) pliki, które zostały minified. Nazywa się je SourceMaps. Po zminimalizowaniu pliku, takiego jak plik angular.js, zajmuje on tysiące wierszy ładnego kodu i zamienia go w zaledwie kilka wierszy brzydkiego kodu. Mamy nadzieję, że wysyłając kod do wersji produkcyjnej, używasz kodu zminimalizowanego zamiast pełnej, nieuprawnionej wersji. Gdy twoja aplikacja jest w produkcji i ma błąd, sourcemap pomoże ci wziąć brzydki plik i pozwoli ci zobaczyć oryginalną wersję kodu. Jeśli nie posiadasz sourcemap, każdy błąd wydaje się w najlepszym razie tajemniczy.

To samo dotyczy plików CSS. Po pobraniu pliku SASS lub LESS i skompilowaniu go w CSS nie wygląda to tak, jakby był w oryginalnej formie. Jeśli włączysz sourcemaps, zobaczysz oryginalny stan pliku zamiast stanu zmodyfikowanego.

Aby odpowiedzieć na pytania w kolejności:

• Po co to jest? Aby usunąć odniesienie do kodu nieoczyszczonego
• Jak deweloper może z niego korzystać? Używasz go do debugowania aplikacji produkcyjnej. W trybie programistycznym możesz użyć pełnej wersji Angulara. W produkcji używałbyś wersji zminimalizowanej.
• Czy powinienem dbać o utworzenie pliku js.map? Jeśli zależy ci na łatwiejszym debugowaniu kodu produkcyjnego, to tak, powinieneś to zrobić.
• Jak powstaje? Jest tworzony w czasie kompilacji. Istnieją narzędzia do budowania, które mogą zbudować plik .map za Ciebie, podobnie jak inne pliki. https://github.com/gruntjs/grunt-contrib-uglify/issues/71

Mam nadzieję, że to ma sens.

Chciałem tylko skupić się na ostatniej części pytania; Jak tworzone są pliki map źródłowych? wymieniając narzędzia do budowania, które znam, które mogą tworzyć mapy źródłowe.

1. Grunt : za pomocą wtyczkigrunt-contrib-uglify
2. Gulp : za pomocą wtyczkigulp-uglify
3. Zamknięcie Google : przy użyciu parametru--create_source_map

• Jak deweloper może z niego korzystać?

Nie znalazłem odpowiedzi na to w komentarzach, oto jak można użyć:

1. Nie łącz swojego pliku js.map z plikiem index.html (nie ma takiej potrzeby)

2. Narzędzia do minifikacji (dobre) dodają komentarz do pliku .min.js :

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

który połączy Twój plik .map .

Gdy pliki min.js i js.map są gotowe ...

3. Chrome: otwórz narzędzia deweloperskie, przejdź do zakładki Źródła , zobaczysz folder źródeł , w którym przechowywane są niezminimalizowane pliki aplikacji.

Plik odwzorowania odwzorowuje plik niezminimalizowany na plik zminimalizowany. Jeśli wprowadzisz zmiany w niezminimalizowanym pliku, zmiany zostaną automatycznie odzwierciedlone w zminimalizowanej wersji pliku.

Aby dodać, jak korzystać z plików map. Używam chrome dla Ubuntu i jeśli przejdę do źródeł i kliknę plik, jeśli jest plik mapy, pojawi się komunikat z informacją, że mogę zobaczyć oryginalny plik i jak to zrobić.

W przypadku plików Angular, z którymi dzisiaj pracowałem, klikam

Ctrl-P i lista oryginalnych plików pojawia się w małym oknie.

Następnie mogę przejrzeć listę, aby wyświetlić plik, który chciałbym sprawdzić i sprawdzić, gdzie może być problem.