Podstawową zasadą otwartego ekosystemu internetowego jest tworzenie witryn, które działają dobrze we wszystkich popularnych przeglądarkach. Wiąże się to jednak z dodatkowymi wysiłkami w zakresie zapewnienia obsługi całego napisanego kodu w każdej przeglądarce, na którą chcesz kierować reklamy. Jeśli chcesz korzystać z nowych funkcji językowych JavaScriptu, musisz je transpilować do formatów zgodnych wstecznie przeglądarek, które jeszcze ich nie obsługują.
Babel to najczęściej używane narzędzie do kompilowania kodu o nowszej składni do postaci zrozumiałej dla różnych przeglądarek i środowisk (np. węzła). W tym przewodniku zakładamy, że korzystasz z Babel, więc jeśli jeszcze tego nie zrobiłeś, wykonaj instrukcje konfiguracji, aby dodać ten interfejs do aplikacji. Wybierz webpack w narzędziu Build Systems, jeśli używasz pakietu webpack jako usługi tworzenia pakietów modułów w aplikacji.
Aby użyć Babel do transpilacji tylko tych informacji, które są potrzebne użytkownikom, musisz:
- Określ przeglądarki, na które chcesz kierować reklamy.
- Używaj
@babel/preset-envz odpowiednimi przeglądarkami docelowymi. - Użyj operatora
<script type="module">, aby przestać wysyłać transpilowany kod do przeglądarek, które go nie potrzebują.
Określ, na które przeglądarki chcesz kierować reklamy
Zanim zaczniesz modyfikować sposób transpilacji kodu w aplikacji, musisz określić, które przeglądarki uzyskują do niej dostęp. Aby podjąć przemyślaną decyzję, przeanalizuj, z jakich przeglądarek obecnie korzystają Twoi użytkownicy oraz te, na które planujesz kierować reklamy.
Użyj @babel/gotowe-env
Transpilacja kodu powoduje zwykle, że plik ma rozmiar większy niż oryginalny. Minimalizowanie ilości kompilacji pozwala zmniejszyć rozmiar pakietów, aby poprawić wydajność strony internetowej.
Zamiast dodawać konkretne wtyczki, które będą selektywnie kompilować używane funkcje językowe, Babel udostępnia zestaw gotowych ustawień, które łączą wszystkie wtyczki w pakiety. Użyj @babel/preset-env, aby uwzględnić tylko przekształcenia i kody polyfill potrzebne w przeglądarkach, na które chcesz kierować reklamy.
Umieść @babel/preset-env w tablicy presets w pliku konfiguracji Babel, .babelrc:
{
"presets": [
[
"@babel/preset-env",
{
"targets": ">0.25%"
}
]
]
}
Aby określić, które wersje przeglądarek chcesz uwzględnić, użyj pola targets, dodając odpowiednie zapytanie w polu browsers. @babel/preset-env integruje się z przeglądarką, czyli konfiguracją open source współużytkowaną przez różne narzędzia do kierowania reklam na przeglądarki. Pełną listę zgodnych zapytań znajdziesz w dokumentacji przeglądarki internetowej.
Możesz też użyć pliku .browserslistrc do utworzenia listy środowisk, na które chcesz kierować reklamy.
Wartość ">0.25%" informuje Babel o uwzględnianiu tylko przekształceń niezbędnych do obsługi przeglądarek, które odpowiadają za ponad 0,25% globalnego wykorzystania. Dzięki temu pakiet nie będzie zawierać zbędnego transpilowanego kodu
w przeglądarkach, z których korzysta niewielki odsetek użytkowników.
W większości przypadków jest to lepsze rozwiązanie niż użycie tej konfiguracji:
"targets": "last 2 versions"
Wartość "last 2 versions" transpiluje kod do 2 ostatnich wersji każdej przeglądarki, co oznacza, że obsługa wycofywanych przeglądarek, takich jak Internet Explorer, jest obsługiwana.
Może to niepotrzebnie zwiększyć rozmiar pakietu, jeśli nie spodziewasz się, że te przeglądarki będą używane do uzyskiwania dostępu do aplikacji.
Ostatecznie należy wybrać odpowiednią kombinację zapytań, aby kierować reklamy tylko na przeglądarki spełniające Twoje potrzeby.
Włącz nowoczesne poprawki błędów
@babel/preset-env grupuje wiele funkcji składni JavaScript w kolekcje i włącza je lub wyłącza w zależności od określonych przeglądarek docelowych. Działa to dobrze, ale cały zbiór funkcji składniowych zmienia się, gdy docelowa przeglądarka zawiera błąd obejmujący tylko jedną funkcję.
Często powoduje to większą ilość przekształconego kodu, niż jest to konieczne.
Opcja poprawek błędów w @babel/preset-env, pierwotnie utworzona jako osobne gotowe ustawienia, rozwiązuje ten problem, konwertując nowoczesną składnię, która nie działa w niektórych przeglądarkach, na najbliższą składnię, która nie występuje w tych przeglądarkach. W efekcie powstaje prawie taki sam nowoczesny kod, ale z kilkoma niewielkimi poprawkami w składni, które zapewniają zgodność ze wszystkimi przeglądarkami docelowymi. Aby korzystać z tej optymalizacji, upewnij się, że masz zainstalowaną wersję @babel/preset-env w wersji 7.10 lub nowszej, a następnie ustaw we właściwości bugfixes wartość true:
{
"presets": [
[
"@babel/preset-env",
{
"bugfixes": true
}
]
]
}
W Babel 8 opcja bugfixes jest domyślnie włączona.
Użyj formatu: <script type="module">
Moduły JavaScript – czyli ES – to stosunkowo nowa funkcja obsługiwana we wszystkich popularnych przeglądarkach. Za pomocą modułów możesz tworzyć skrypty, które można importować i eksportować z innych modułów, ale możesz też używać ich w połączeniu z zasadą @babel/preset-env, aby kierować reklamy tylko na przeglądarki, które je obsługują.
Zamiast wysyłać zapytania o konkretne wersje przeglądarki lub udział w rynku, możesz podać "esmodules" : true w polu targets pliku .babelrc.
{
"presets":[
[
"@babel/preset-env",
{
"targets":{
"esmodules": true
}
}
]
]
}
Wiele nowszych funkcji ECMAScript skompilowanych z Babel jest już obsługiwanych w środowiskach obsługujących moduły JavaScript. Upraszczając to zadanie, pilnując, by tylko transpilowany kod był używany w przeglądarkach, które go faktycznie potrzebują.
Przeglądarki obsługujące moduły ignorują skrypty z atrybutem nomodule.
Z kolei przeglądarki, które nie obsługują modułów, ignorują elementy skryptu z parametrem type="module". Oznacza to, że możesz uwzględnić moduł, a także skompilowaną kreację zastępczą.
W idealnej sytuacji wymienione są dwa skrypty wersji aplikacji w następujący sposób:
<script type="module" src="main.mjs"></script>
<script nomodule src="compiled.js" defer></script>
Przeglądarki obsługujące moduły pobierają i uruchamiają plik main.mjs oraz ignorują compiled.js.
Przeglądarki, które nie obsługują modułów, działają odwrotnie.
Jeśli używasz pakietu internetowego, możesz ustawić różne wartości docelowe w konfiguracjach dla 2 osobnych wersji aplikacji:
- Wersja tylko dla przeglądarek obsługujących moduły.
- Wersja zawierająca skompilowany skrypt, który działa w dowolnej starszej przeglądarce. Ma to większy rozmiar, ponieważ transpilacja musi obsługiwać większą liczbę przeglądarek.
Dziękujemy Connorowi Clarkowi i Jasonowi Millerowi za ich recenzje.