Czym są mapy źródłowe (i czy są potrzebne)?

Jeśli pracujesz na interfejsie witryny w jakimkolwiek charakterze – czy to w przypadku wtyczki, motywu, a nawet czegoś poza WordPress – prawdopodobnie pracujesz z narzędziami do minifikacji.

Korzyści są oczywiste, prawda?

• zmniejsza ładowność,
• pozwala nam skupić się na rozwoju w naszych lokalnych środowiskach

Ale jedną z funkcji związanych z pracą z tymi technologiami jest możliwość generowania map źródłowych.

A to rodzi pytanie (a może dwa): Czym są mapy źródłowe? A czy są w ogóle potrzebne?

Możesz twierdzić, że jest już późno, aby o tym mówić, ale zawsze są ludzie, którzy wchodzą do branży, którzy mogą nie znać tego materiału.

Dlaczego więc tego nie przykryć?

Co to są mapy źródłowe?

Krótko mówiąc, mapy źródłowe są sposobem, w jaki nowoczesne przeglądarki mogą wziąć zminifikowany kod i umożliwić nam odczytanie kodu w jego niezminifikowanym stanie.

Na przykład w projekcie, nad którym pracowałem, mam prosty plik plugin-setting.scss, który zostaje skrócony do plugin-setting.css. Ten plik jest następnie umieszczany w kolejce przez WordPress.

Mam jednak również swoje narzędzie do budowania, które generuje mapę źródłową. Oznacza to, że mam też plik o nazwie plugin-settings.css.map.

Tak więc kod dostarczany z wtyczką wygląda tak:

form label{font-weight:normal}form input[type="text"],form textarea{width:100%}.admin-featurebox{background:#FFF;border:1px solid #CCC;margin:20px 0;padding:10px 20px}

/*# sourceMappingURL=plugin-settings.css.map */

Ale patrząc w narzędziu do debugowania przeglądarki wygląda to tak:

form {
  label {
    font-weight: normal;
  }

  input[type="text"],
  textarea {
    width: 100%;
  }
}

.admin-featurebox {
  background:#FFF;
  border:1px solid #CCC;
  margin:20px 0;
  padding:10px 20px;
}

Mapy źródłowe można generować zarówno dla arkuszy stylów, jak i JavaScript.

Czy są potrzebne?

Nie mogę dać temu konkretnemu „tak" lub „nie”; jednak odkryłem, że im dłużej pracuję w tej branży, a w projektach są one o wiele bardziej pomocne niż alternatywa (która zwykle jest kolejkowaniem niezminimalizowanego stylu do celów debugowania).

Zalecam ich wygenerowanie i uwzględnienie, ponieważ ułatwia to debugowanie. Ale to, czy są potrzebne, zależy od Ciebie lub Twojego zespołu.