Zacznę małym coming outem: nie umiem posługiwać się czystym JavaScriptem. To znaczy – umiem na bardzo podstawowym poziomie. Gdy potrzebuję rozszerzyć funkcjonowanie elementów strony internetowej, a nie mogę uzyskać rezultatu przy użyciu arkuszy CSS, posiłkuję się biblioteką jQuery. Dlatego też, natrafiwszy na wadliwie działający plugin do WordPressa, napisany przy użyciu czystego JS, znalazłem się w nie lada kłopocie. Rozwiązanie przyszło ze strony, której się zupełnie nie spodziewałem.
Tytułem wprowadzenia: na potrzeby strony, którą przygotowywałem dla klienta, zastosowałem plugin pozwalający uzyskać dostęp do wybranych treści po wpisaniu hasła. Wtyczka spisywała się znakomicie i działała dokładnie tak, jak działać miała. Stronę rozwijałem w oparciu o popularne przeglądarki (Firefox, Chrome, Opera, Edge) i nie zwróciłem odpowiednio wcześnie uwagi na to, że uwierzytelnianie nie funkcjonuje w Internet Explorerze (co, ogólnie rzecz biorąc, nie powinno nikogo dziwić).
Po krótkim dochodzeniu ustaliłem, że winne były funkcje strzałkowe, wprowadzone przez JavaScript ES2015 i nieobsługiwane przez stare przeglądarki Microsoftu. Podjąłem, rzecz jasna, próbę zgłębienia tematu i przepisania kodu na starszą wersję języka, jednak taka ręczna konwersja JavaScript ES2015 do ES5 przerosła moje umiejętności. Nie mogłem też poświęcić tematowi więcej czasu, bo moje zlecenie było z gatunku „na wczoraj”…
Automatyczna konwersja JavaScript ES2015 do ES5
Zacząłem zatem, bez większej wiary, poszukiwać narzędzia, które wykonałoby potrzebną robotę automatycznie. Być może jestem niedoinformowany lub zbyt pesymistycznie podchodzę do rzeczywistości (albo jedno i drugie), bo byłem naprawdę zaskoczony, gdy znalazłem potrzebny konwerter po ledwie kilku minutach researchu.
Rzecz nazywa się Babel i znajdziecie ją pod adresem babeljs.io. Rozwój projektu sponsorują m.in. Airbnb, Salesforce i Trivago, a wśród patronów znajdziemy np. LinkedIn.
Jak piszą autorzy:
Babel to zestaw narzędzi, który służy głównie do konwersji kodu ECMAScript 2015+ na kompatybilną wstecznie wersję JavaScriptu dla obecnych i starszych przeglądarek lub środowisk. Oto główne rzeczy, które Babel może dla Ciebie zrobić:
a) przekształć składnię
https://babeljs.io/docs/en/index.html
b) dostarczyć polyfill dla funkcji, których brakuje w środowisku docelowym (przez @ babel / polyfill)
c) przekształcić kod źródłowy (codemods)
d) …i więcej!
Prosty przykład?
// Babel na wejściu: ES2015 funkcja strzałkowa
[1, 2, 3].map((n) => n + 1);
// Babel na wyjściu: ES5 ekwiwalent
[1, 2, 3].map(function(n) {
return n + 1;
});Try it out – warto wypróbować!
Rozbudowany edytor, dostępny pod Try it out w menu strony, umożliwia dodatkowo ustawienie szeregu opcji. Ja skorzystałem np. z możliwości określenia środowiska docelowego ENV PRESET na konkretną przeglądarkę – Internet Explorere 9. W rezultacie otrzymałem kod zrozumiały dla tego archaicznego i zabugowanego medium, a w konsekwencji również dla jego starszych, równie pokracznych, braci. Kodem tym zastąpiłem potem JavaScript pluginu, wyrejestrowując w functions.php motywu WordPressa skrypt oryginalny i rejestrując własny zamiennik, tak, aby nie stracić zmian w przypadku aktualizacji wtyczki… ale to już zupełnie inna historia.