Polyfill to kod JavaScript, który implementuje funkcję nowoczesnego standardu w przeglądarkach, które jej jeszcze nie obsługują. Dzięki niemu programista może używać np. nowej metody tablic lub interfejsu API, a starsze środowiska nadal będą działać poprawnie.
Jak działa polyfill?
Skrypt sprawdza, czy dana funkcja istnieje, a jeśli nie, tworzy jej odpowiednik zgodny ze specyfikacją. Przykład to dodanie metody Array.prototype.includes w środowisku, które jej nie zawiera. Biblioteka core-js dostarcza polyfille dla większości funkcji języka.
Polyfill a transpilacja
Polyfill dodaje brakujące funkcje, a transpilacja (np. przez Babel) przepisuje nową składnię języka, na przykład funkcje strzałkowe, na starszą. Składni nie da się wypełnić polyfillem, dlatego często stosuje się oba rozwiązania razem.
Czy nadal są potrzebne?
Obecne przeglądarki obsługują większość nowych funkcji, więc zakres polyfilli zmalał. Warto ładować je selektywnie, na podstawie docelowych przeglądarek, aby nie powiększać niepotrzebnie paczki.
Jak zdecydować, czego potrzebujesz?
Sprawdź zgodność interfejsów w tabelach kompatybilności, określ obsługiwane przeglądarki w browserslist i pozwól narzędziom (np. core-js z Babelem) dołączać tylko brakujące polyfille. Unikaj ładowania zewnętrznych usług polyfilli bez kontroli ich pochodzenia, bo skrypt z cudzej domeny ma pełen dostęp do Twojej strony.
Wiele problemów z tym związanych to typowe błędy JavaScript.
Zobacz w praktyce
Błędy JavaScript - jak ich skutecznie unikać?
Jak zaciemnić kod JavaScript i kiedy to ma sens
Działanie strony internetowej w przeglądarce