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

357

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.
javascript angularjs source-maps Muhammad Reda
źródło
1
html5rocks.com/en/tutorials/developertools/sourcemaps
Anand

Odpowiedzi:

549

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.

mroźny
źródło
19
zwróć uwagę, że plik mapy nie zostanie wysłany, dopóki go nie nazwiesz, co spowodowało, że byłem zdezorientowany stackoverflow.com/a/27196201/861487
Abdelouahab
2
Dzięki Aaron, jest to jeden z lepszych opisów, jakie widziałem dla źródła. Używam go w łyku i nauczyłem się wszystkiego o łyku i zastanawiałem się dokładnie, jak używane są sourcemaps, teraz mogę czuć się pewnie, używając go. Większość wtyczek Gulp jest teraz kompatybilnych także rok temu, a niektóre nie. Chciałem tylko powiedzieć, że to ma sens!
Eric Bishard,
@frosty Odwołanie do kodu nieoczyszczonego . Czy możesz to wyjaśnić? Czy .js.mapplik nie utrzymuje relacji (często nazywanej referencją ) między ręcznie spreparowanym plikiem a plikiem zminimalizowanym?
Mohammed Zameer
1
@student mówi o usunięciu odwołania, ponieważ nie chcę odwoływać się do zminimalizowanego kodu. Jest zminimalizowany i jeśli na to spojrzę, jest prawie bezwartościowy. Ale gdyby mógł odwołać się do oryginalnego źródła, byłoby to epickie. I to właśnie jest mapa zasobów. Mam nadzieję że to pomogło.
mroźny
Uwielbiam tę odpowiedź (dziękuję), ale ma 420 polubień ... czy ją łamię?
Eric Reed,
31
  • 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 ...

  1. 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.
garfunkel61
źródło
14

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

Surendra Yadav
źródło
2

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.

rotato poti
źródło