Babel to narzędzie, które przepisuje (transpiluje) nowoczesny kod JavaScript, w tym składnię JSX i TypeScript, na wersję obsługiwaną przez wskazane przeglądarki. Pozwala korzystać z najnowszych możliwości języka bez czekania, aż będą dostępne wszędzie.
Jak działa Babel?
Parsuje kod do drzewa składniowego, modyfikuje je za pomocą wtyczek i generuje nowy kod. Zestaw presetów, np. @babel/preset-env, dobiera potrzebne przekształcenia na podstawie listy docelowych przeglądarek.
Babel w projekcie
Zazwyczaj działa jako część bundlera, np. Webpacka, i przetwarza pliki podczas budowania. Nowsze narzędzia, takie jak Vite, używają szybszych transformerów, więc Babel jest potrzebny rzadziej.
Czy nadal warto go używać?
Gdy musisz wspierać starsze przeglądarki lub korzystasz z własnych przekształceń kodu. Dla projektów skierowanych do współczesnych przeglądarek transpilacja bywa zbędna i tylko powiększa kod.
Przykład działania
Funkcja strzałkowa i składnia opcjonalnego łańcuchowania w kodzie źródłowym są po transpilacji zamieniane na starsze odpowiedniki, które rozumie przeglądarka z listy docelowej. Same nowe funkcje, jak Promise.allSettled, wymagają dodatkowo polyfilli, bo Babel zmienia składnię, a nie dodaje brakujących interfejsów. Dobór docelowych przeglądarek w browserslist decyduje o wielkości wynikowego kodu.