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 kod jest obsługiwany we wszystkich przeglądarkach, które chcesz uwzględnić. Jeśli chcesz używać nowych funkcji języka JavaScript, musisz je przetranspilować na formaty zgodne wstecznie w przeglądarkach, 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 aplikacji, musisz określić, które przeglądarki uzyskują do niej dostęp. 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 parametru @babel/preset-env
Transpilacja kodu zazwyczaj skutkuje plikiem, który jest większy niż w oryginalnej formie. 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ć.
Umieść @babel/preset-env w tablicy presets w pliku konfiguracji Babel (.babelrc):
{
"presets": [
[
"@babel/preset-env",
{
"targets": ">0.25%"
}
]
]
}
W polu targets możesz określić, które wersje przeglądarek 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.
Możesz też użyć pliku .browserslistrc do utworzenia listy ś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 rozwiązanie niż poniższa konfiguracja:
"targets": "last 2 versions"
Wartość "last 2 versions" transpiluje kod dla 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 spodziewasz się, że te przeglądarki będą używane do uzyskania dostępu do Twojej aplikacji.
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 ich włączanie i wyłączanie 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.
Opcja poprawek błędów w @babel/preset-env została pierwotnie opracowana jako oddzielne gotowe ustawienia. Rozwiązanie tego problemu polega na konwertowaniu nowoczesnej składni, która nie działa w niektórych przeglądarkach, na składnię równoważną, która nie występuje 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 względnie nowa funkcja obsługiwana we wszystkich popularnych przeglądarkach. Za pomocą modułów możesz tworzyć skrypty, które umożliwiają importowanie i eksportowanie z innych modułów, ale możesz też używać ich w połączeniu z interfejsem @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, możesz podać parametr "esmodules" : true w polu targets pliku .babelrc.
{
"presets":[
[
"@babel/preset-env",
{
"targets":{
"esmodules": true
}
}
]
]
}
Wiele nowszych funkcji ECMAScript skompilowanych z użyciem Babel jest już obsługiwanych w środowiskach obsługujących moduły JavaScript. Upraszcza to więc proces upewniania się, że tylko transpilowany kod jest 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 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ą main.mjs, a ignorują compiled.js.
Przeglądarki, które nie obsługują modułów, działają odwrotnie.
Jeśli używasz pakietu internetowego, możesz ustawić w konfiguracjach różne środowiska docelowe dla 2 osobnych wersji aplikacji:
- Wersja przeznaczona 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 za opinie Connorowi Clarkowi i Jasonowi Millerowi.