Tworzenie witryn, które dobrze działają we wszystkich popularnych przeglądarkach, to podstawowa zasada otwartego ekosystemu sieci. Oznacza to jednak, że musisz się dodatkowo upewnić, że cały napisany przez Ciebie kod jest obsługiwany w każdej przeglądarce, którą chcesz uwzględnić. Jeśli chcesz korzystać z nowych funkcji języka JavaScript, musisz przetłumaczyć te funkcje na formaty zgodne ze starszymi wersjami w przypadku przeglądarek, które jeszcze ich nie obsługują.
Babel to najczęściej używane narzędzie do kompilowania kodu, który zawiera nowszą składnię, w kody zrozumiałe dla różnych przeglądarek i środowisk (np. Node). W tym przewodniku zakładamy, że używasz Babel. Jeśli jeszcze tego nie zrobiono, musisz wykonać instrukcje konfiguracji, aby uwzględnić Babel w aplikacji. Wybierz webpack
w Build Systems, jeśli w swojej aplikacji używasz webpacka jako modułu pakietującego.
Aby używać Babela tylko do transpilacji tego, czego potrzebują użytkownicy, musisz:
- Określ przeglądarki, na które chcesz kierować reklamy.
- Użyj tagu
@babel/preset-envz odpowiednimi celami przeglądarki. - Użyj opcji
<script type="module">, aby zatrzymać wysyłanie przetłumaczonego kodu 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ą dostęp do aplikacji. Aby podjąć świadomą decyzję, sprawdź, z których przeglądarek korzystają obecnie użytkownicy, a także te, na które chcesz kierować reklamy.
Użyj @babel/preset-env.
Transpilacja kodu zwykle powoduje, że plik jest większy niż jego pierwotna forma. Minimalizując ilość kompilacji, możesz zmniejszyć rozmiar pakietów, aby poprawić wydajność strony internetowej.
Zamiast dołączać konkretne wtyczki do selektywnego kompilowania używanych funkcji językowych, Babel udostępnia kilka wstępnie skompilowanych zestawów, które zawierają wtyczki. Użyj @babel/preset-env, aby uwzględnić tylko te przekształcenia i polyfille, które są potrzebne w przypadku przeglądarek, które chcesz uwzględnić.
W pliku konfiguracji Babel .babelrc uwzględnij element @babel/preset-env w tablicy presets:
{
"presets": [
[
"@babel/preset-env",
{
"targets": ">0.25%"
}
]
]
}
W polu targets możesz określić, które wersje przeglądarki chcesz uwzględnić, dodając odpowiednie zapytanie do pola browsers. @babel/preset-envintegruje się z browserslist, czyli z konfiguracją open source udostępnianą między różnymi narzędziami do kierowania na przeglądarki. Pełną listę kompatybilnych zapytań znajdziesz w dokumentacji browserslist.
Inną opcją jest użycie pliku .browserslistrc, aby podać listę środowisk, na które chcesz kierować reklamy.
Wartość ">0.25%" informuje Babel, aby uwzględniał tylko te przekształcenia, które są potrzebne do obsługi przeglądarek, które stanowią ponad 0,25% globalnego wykorzystania. Dzięki temu pakiet nie będzie zawierać niepotrzebnego kodu transpilowanego dla przeglądarek, których używa bardzo mały odsetek użytkowników.
W większości przypadków jest to lepsze podejście niż użycie tej konfiguracji:
"targets": "last 2 versions"
Wartość "last 2 versions" przetłumaczy Twój kod na dwie ostatnie wersje każdej przeglądarki, co oznacza, że zapewniamy obsługę przeglądarek wycofanych, takich jak Internet Explorer.
Jeśli nie spodziewasz się, że te przeglądarki będą używane do uzyskiwania dostępu do aplikacji, może to niepotrzebnie zwiększyć rozmiar pakietu.
Ostatecznie musisz wybrać odpowiednią kombinację zapytań, aby kierować reklamy tylko do przeglądarek, które odpowiadają Twoim potrzebom.
Włączanie nowoczesnych poprawek błędów
@babel/preset-env grupowanie wielu funkcji składni JavaScript w kolekcje oraz włączanie i wyłączanie tych funkcji na podstawie określonych przeglądarek docelowych. Chociaż ta metoda działa dobrze, w przypadku błędu w jednej funkcji w docelowej przeglądarce zmienia się cała kolekcja funkcji składniowych.
Często powoduje to przekształcenie większej ilości kodu niż to konieczne.
Ta opcja została pierwotnie opracowana jako oddzielny wstępny zestaw ustawień, a opcja poprawek błędów w @babel/preset-env rozwiązuje ten problem, konwertując współczesną składnię, która jest nieprawidłowa w niektórych przeglądarkach, na najbliższą jej ekwiwalent, która nie jest nieprawidłowa w tych przeglądarkach. W rezultacie otrzymujemy prawie identyczny nowoczesny kod z kilkoma drobnymi zmianami składni, które gwarantują zgodność we wszystkich docelowych przeglądarkach. Aby korzystać z tej optymalizacji, zainstaluj @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żyj konta <script type="module">
Moduły JavaScriptu, czyli moduły ES, to stosunkowo nowa funkcja obsługiwana we wszystkich głównych przeglądarkach. Za pomocą modułów możesz tworzyć skrypty, które mogą importować i eksportować dane z innych modułów. Możesz ich też używać z opcją @babel/preset-env, aby kierować je tylko do przeglądarek, które je obsługują.
Zamiast wysyłać zapytanie o konkretne wersje przeglądarki lub udział w rynku, możesz w polu targets w pliku .babelrc podać wartość "esmodules" : true.
{
"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 uprościsz proces sprawdzania, czy w przypadku przeglądarek, które tego potrzebują, jest używany tylko skompilowany kod.
Przeglądarki, które obsługują moduły, ignorują skrypty z atrybutem nomodule.
Z kolei przeglądarki, które nie obsługują modułów, ignorują elementy skryptu z wartością type="module". Oznacza to, że możesz uwzględnić moduł i skompilowany plik zastępczy.
W idealnej sytuacji 2 wersje skryptu aplikacji są 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ą tag main.mjs, a ignorują tag compiled.js.
Przeglądarki, które nie obsługują modułów, działają odwrotnie.
Jeśli używasz webpacka, możesz w swoich konfiguracjach ustawić różne cele 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 dowolnej starszej przeglądarce. Plik ma większy rozmiar, ponieważ transpilacja musi obsługiwać większą liczbę przeglądarek.
Dziękujemy Connorowi Clarkowi i Jasonowi Millerowi za opinie.