Formatowanie i minifikacja JavaScript

Jak sformatować lub zminifikować JavaScript

1. Wklej kod albo kliknij Otwórz plik, aby wczytać plik .js, .mjs lub .jsx (do 10 MB).
2. Wybierz Wcięcie, a jeśli wolisz styl Allmana, zaznacz Nawiasy klamrowe w osobnym wierszu.
3. Kliknij Formatuj (upiększ), aby kod stał się czytelny.
4. Aby go zmniejszyć, ustaw Opcje minifikacji i kliknij Minifikuj. Jeśli chcesz tylko wyszukać błędy, kliknij Sprawdź składnię.
5. Skopiuj lub pobierz wynik. Wiersz stanu pokazuje rozmiar przed i po oraz procent oszczędności.

Kod jest tylko odczytywany i przekształcany, nigdy uruchamiany: nic, co wkleisz, nie jest wykonywane na tej stronie.

Formatowanie za pomocą js-beautify

Formatuj (upiększ) korzysta z js-beautify. Umieszcza jedną instrukcję w wierszu, wcina bloki, dodaje spacje wokół operatorów i po słowach kluczowych oraz zostawia najwyżej jeden pusty wiersz tam, gdzie je miałeś. Rozumie nowoczesną składnię (klasy, funkcje strzałkowe, literały szablonowe, async/await) i JSX. To najszybszy sposób, by przeczytać zminifikowaną bibliotekę albo jednowierszowy fragment skopiowany ze strony.

Formatowanie zmienia wyłącznie białe znaki. Nie sprawdza poprawności kodu: brakujący nawias po prostu da dziwne wcięcia. Do tego służy Sprawdź składnię.

Minifikacja za pomocą Tersera

Minifikuj korzysta z Tersera, minifikatora używanego przez większość narzędzi do budowania JavaScriptu. Ponieważ jest duży, pobierany jest dopiero przy pierwszym kliknięciu Minifikuj lub Sprawdź składnię. Opcje odpowiadają bezpośrednio ustawieniom Tersera:

• Moduł ES (import/export) parsuje kod jako moduł (module: true): obowiązuje tryb ścisły, a nazwy najwyższego poziomu są prywatne, więc można je przemianować, a nieużywane usunąć. Zostaw tę opcję odznaczoną dla klasycznego skryptu, którego funkcje globalne wywołują inne skrypty.
• Kompresuj (compress) przepisuje kod na krótszy odpowiednik: zwija stałe (2*60 staje się 120), usuwa martwy kod, łączy deklaracje var i skraca warunki.
• Skracaj nazwy zmiennych (mangle) zmienia nazwy zmiennych lokalnych i parametrów na jedną lub dwie litery. Nazwy globalne i właściwości obiektów nigdy nie są zmieniane.
• Zachowaj komentarze licencyjne zostawia komentarze zaczynające się od /*! lub zawierające @license albo @preserve. Wszystkie inne komentarze są usuwane.

Minifikacja nie może zmienić działania kodu, ale kod opierający się na nazwach funkcji (fn.name) lub na eval może po zmianie nazw zachowywać się inaczej. W takim przypadku odznacz Skracaj nazwy zmiennych.

Błędy składni z wierszem i kolumną

Gdy Terser nie potrafi sparsować kodu, Minifikuj i Sprawdź składnię pokazują komunikat błędu z wierszem i kolumną, np. „Wiersz 12, kolumna 8 – Błąd składni: Unexpected token punc «)»”. Sam opis błędu pochodzi z Tersera i jest po angielsku. Kolumny liczone są od 1. Typową przyczyną jest brakujący nawias wcześniej w pliku, więc sprawdź też wiersze tuż przed wskazanym miejscem.