Tworzenie witryn, które działają dobrze we wszystkich popularnych przeglądarkach, jest podstawową zasadą otwartego ekosystemu internetowego. Oznacza to jednak dodatkową pracę związaną z zapewnieniem, że cały pisany przez Ciebie kod jest obsługiwany w każdej przeglądarce, na którą chcesz kierować reklamy. Jeśli chcesz używać nowych funkcji języka JavaScript, musisz transpilować je do formatów zgodnych wstecznie z przeglądarkami, które ich nie obsługują.
Babel to najczęściej używane narzędzie do kompilowania kodu zawierającego nowszą składnię na kod, który mogą zrozumieć różne przeglądarki i środowiska (np. Node). W tym przewodniku założyliśmy, że używasz Babel, więc jeśli jeszcze tego nie zrobisz, musisz postępować zgodnie z instrukcjami konfiguracji, aby uwzględnić go w aplikacji. Wybierz webpack
w Build Systems, jeśli używasz webpacka jako narzędzia do łączenia modułów w aplikacji.
Aby używać Babel do transpilacji tylko tego, co jest potrzebne użytkownikom, musisz:
- Określ przeglądarki, na które chcesz kierować reklamy.
- Użyj tagu
@babel/preset-envz odpowiednimi przeglądarkami docelowymi. - Użyj
<script type="module">, aby przestać wysyłać przekompilowany kod do przeglądarek, które go nie potrzebują.
Określ przeglądarki, na które chcesz kierować reklamy
Zanim zaczniesz modyfikować sposób transpilacji kodu w aplikacji, musisz określić, które przeglądarki mają do niej dostęp. Analizuj, z jakich przeglądarek korzystają Twoi użytkownicy i na których chcesz się skupić, aby podejmować świadome decyzje.
Używanie @babel/preset-env
Transpilacja kodu zwykle powoduje utworzenie pliku o większym rozmiarze niż jego pierwotna postać. Minimalizując ilość kompilacji, możesz zmniejszyć rozmiar pakietów, aby poprawić wydajność strony internetowej.
Zamiast uwzględniać konkretne wtyczki, aby selektywnie kompilować używane funkcje języka, Babel udostępnia kilka gotowych ustawień, które łączą wtyczki w pakiety. Użyj @babel/preset-env, aby uwzględnić tylko przekształcenia i wypełnienia potrzebne w przypadku przeglądarek, na których chcesz się skupić.
Dodaj @babel/preset-env do tablicy presets w pliku konfiguracji Babel .babelrc:
{
"presets": [
[
"@babel/preset-env",
{
"targets": ">0.25%"
}
]
]
}
Użyj pola targets, aby określić wersje przeglądarki, które chcesz uwzględnić, dodając odpowiednie zapytanie do pola browsers. @babel/preset-env
integruje się z browserslist, konfiguracją open source udostępnianą różnym narzędziom do kierowania na przeglądarki. Pełną listę zgodnych zapytań znajdziesz w dokumentacji browserslist.
Możesz też użyć pliku .browserslistrc, aby podać listę środowisk, na które chcesz kierować reklamy.
Wartość ">0.25%" informuje Babel, aby uwzględniał tylko przekształcenia potrzebne do obsługi przeglądarek, które stanowią ponad 0,25% globalnego użytkowania. Dzięki temu pakiet nie będzie zawierać niepotrzebnego skompilowanego kodu dla przeglądarek, z których korzysta bardzo mały 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" przekształca kod na potrzeby 2 ostatnich wersji każdej przeglądarki, co oznacza, że obsługiwane są wycofane przeglądarki, takie jak Internet Explorer.
Może to niepotrzebnie zwiększyć rozmiar pakietu, jeśli nie oczekujesz, ż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, które spełniają Twoje potrzeby.
Włączanie nowoczesnych poprawek błędów
@babel/preset-env grupuje wiele funkcji składni JavaScriptu w kolekcje, włącza i wyłącza je na podstawie określonych przeglądarek docelowych. Chociaż to rozwiązanie działa dobrze, cała kolekcja funkcji składniowych jest przekształcana, gdy docelowa przeglądarka zawiera błąd tylko w jednej funkcji.
Często powoduje to przekształcenie większej ilości kodu niż jest to konieczne.
Opcja bugfixes, która pierwotnie była osobnym ustawieniem wstępnym, w @babel/preset-env rozwiązuje ten problem, konwertując nowoczesną składnię, która nie działa w niektórych przeglądarkach, na najbliższą jej odpowiedniczkę, która w tych przeglądarkach działa. Wynikiem jest niemal identyczny nowoczesny kod
z kilkoma niewielkimi zmianami w składni, które gwarantują zgodność we wszystkich docelowych przeglądarkach. Aby używać tej optymalizacji, zainstaluj pakiet @babel/preset-env w wersji 7.10 lub nowszej, a potem ustaw właściwość bugfixes na true:
{
"presets": [
[
"@babel/preset-env",
{
"bugfixes": true
}
]
]
}
W Babel 8 opcja bugfixes będzie domyślnie włączona.
Używaj funkcji <script type="module">
Moduły JavaScript, czyli moduły ES, to stosunkowo nowa funkcja obsługiwana przez wszystkie główne przeglądarki. Za pomocą modułów możesz tworzyć skrypty, które mogą importować i eksportować dane z innych modułów. Możesz też używać ich z @babel/preset-env, aby kierować reklamy tylko na przeglądarki, które je obsługują.
Zamiast wysyłać zapytania o konkretne wersje przeglądarek lub udział w rynku, rozważ podanie "esmodules" : true w polu targets pliku .babelrc.
{
"presets":[
[
"@babel/preset-env",
{
"targets":{
"esmodules": true
}
}
]
]
}
Wiele nowszych funkcji ECMAScript skompilowanych za pomocą Babel jest już obsługiwanych w środowiskach, które obsługują moduły JavaScript. Dzięki temu upraszczasz proces upewniania się, że w przypadku przeglądarek, które tego wymagają, używany jest tylko przekompilowany kod.
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 atrybutem type="module". Oznacza to, że możesz uwzględnić moduł, a także skompilowaną wartość zastępczą.
Najlepiej, aby skrypty 2 wersji aplikacji były uwzględnione w ten sposób:
<script type="module" src="main.mjs"></script>
<script nomodule src="compiled.js" defer></script>
Przeglądarki, które obsługują moduły, pobierają i wykonują main.mjs, a ignorują compiled.js. Przeglądarki bez obsługi modułów robią odwrotnie.
Jeśli używasz webpacka, możesz ustawić różne cele w konfiguracjach dla 2 oddzielnych wersji aplikacji:
- Wersja tylko dla przeglądarek obsługujących moduły.
- Wersja zawierająca skompilowany skrypt, który działa w każdej starszej przeglądarce. Ma on większy rozmiar pliku, ponieważ transpilacja musi obsługiwać szerszy zakres przeglądarek.
Dziękujemy Connorowi Clarkowi i Jasonowi Millerowi za ich opinie.