Tworzenie witryn, które działają dobrze we wszystkich popularnych przeglądarkach, to podstawowe założenie otwartego ekosystemu internetowego. Wiąże się to jednak z dodatkowymi pracami nad zapewnieniem, a Ty kod jest obsługiwany w każdej przeglądarce, na którą zamierzasz kierować reklamy. Jeśli jeśli chcesz używać nowych funkcji języka JavaScript, musisz przetranspilować te funkcji do zgodnych wstecznie formatów w przeglądarkach, które jeszcze nie obsługują .
Babel to najczęściej używane narzędzie do kompilacji kodu.
zawierający nowszą składnię kodu, która jest stosowana w różnych przeglądarkach i środowiskach
takich jak Node.js. W tym przewodniku przyjęto założenie, że korzystasz z Babel,
musisz wykonać instrukcje konfiguracji,
uwzględnić go w aplikacji, jeśli jeszcze nie zostało to zrobione. Wybierz webpack
w Build Systems, jeśli używasz pakietu internetowego jako pakietu modułów w swojej aplikacji.
Aby transpilować za pomocą Babel tylko to, co jest potrzebne użytkownikom, muszą:
- Określ przeglądarki, na które chcesz kierować reklamy.
- Używaj interfejsu
@babel/preset-envz odpowiednimi ustawieniami kierowania przeglądarki. - 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 aplikacji, określić, które przeglądarki uzyskują dostęp do aplikacji. Analiza przeglądarek używanych obecnie przez użytkowników, jak również tych, na które chcesz kierować reklamy, świadomej decyzji.
Użyj parametru @babel/preset-env
Transpilacja kodu zazwyczaj skutkuje plikiem o rozmiarze większym niż ze względu na ich pierwotną formę. Przez zminimalizowanie ilości przesyłanych treści może zmniejszyć rozmiar pakietów, by poprawić wydajność strony.
Zamiast dodawać konkretne wtyczki, które wybiórczo skompilują wybrany język używanych funkcji, Babel udostępnia szereg gotowych ustawień, razem. Użyj parametru @babel/preset-env. aby uwzględniać wyłącznie przekształcenia i elementy polyfill wymagane w przeglądarkach, w których chcesz je zastosować. kierowania reklam.
Uwzględnij @babel/preset-env w tablicy presets w Babel
plik konfiguracji, .babelrc:
{
"presets": [
[
"@babel/preset-env",
{
"targets": ">0.25%"
}
]
]
}
W polu targets określ, które wersje przeglądarek chcesz uwzględnić
dodając odpowiednie zapytanie w polu browsers. @babel/preset-env
integruje się z listą przeglądarek, czyli konfiguracją open source współdzieloną przez różne
narzędzi kierowania na przeglądarki. Pełna lista zgodnych zapytań znajduje się w sekcji
browserslist.
Inną możliwością jest użycie pliku .browserslistrc do utworzenia listy środowisk
na które chcesz kierować reklamy.
Wartość ">0.25%" informuje Babel, aby uwzględniał tylko przekształcenia
niezbędne do obsługi przeglądarek, które stanowią ponad 0,25% wszystkich użytkowników na świecie
i ich wykorzystaniu. Dzięki temu pakiet nie będzie zawierał zbędnych transpilowanych danych
dla przeglądarek używanych przez niewielki odsetek użytkowników.
W większości przypadków jest to lepsze rozwiązanie niż Konfiguracja:
"targets": "last 2 versions"
Wartość "last 2 versions" transpiluje Twój kod dla funkcji
ostatnie 2 wersje każdej przeglądarki,
Oznacza to, że obsługiwane są już wycofane przeglądarki, takie jak Internet Explorer.
Może to niepotrzebnie zwiększyć rozmiar pakietu, jeśli nie oczekujesz tych zmian.
przeglądarki, w których chcesz uzyskać dostęp do aplikacji.
Należy wybrać odpowiednią kombinację zapytań, aby tylko kierować reklamy na przeglądarki, które odpowiadają Twoim potrzebom.
Włącz nowoczesne poprawki błędów
@babel/preset-env grupuje wiele funkcji składni JavaScript w kolekcje oraz włącza/wyłącza się
na podstawie określonych docelowych przeglądarek. Chociaż to się sprawdza, cała kolekcja
funkcje składni ulegają zmianom, gdy w docelowej przeglądarce występuje błąd dotyczący tylko jednej funkcji.
Często skutkuje to większą ilością przekształconego kodu, niż jest to konieczne.
Początkowo powstały jako osobne gotowe ustawienia.
opcja poprawek błędów w projekcie @babel/preset-env
rozwiązuje ten problem, konwertując nowoczesną składnię, która działa nieprawidłowo w niektórych przeglądarkach, na format najbliższy
która nie działa w tych przeglądarkach. Efektem jest niemal identyczny nowoczesny kod
wprowadzając niewielkie poprawki składni, które gwarantują zgodność we wszystkich przeglądarkach docelowych. Aby użyć
upewnij się, że masz zainstalowaną wersję @babel/preset-env 7.10 lub nowszą, a następnie
Usługę bugfixes na użytkownika true:
{
"presets": [
[
"@babel/preset-env",
{
"bugfixes": true
}
]
]
}
W Babel 8 opcja bugfixes jest domyślnie włączona.
Użyj konta <script type="module">
Moduły JavaScript, czyli moduły ES, są stosunkowo nową funkcją obsługiwaną
wszystkich popularnych przeglądarek. Możesz użyć modułów
do tworzenia skryptów, które można importować i eksportować z innych modułów, ale możesz
użyj ich też w połączeniu z zasadą @babel/preset-env, by kierować reklamy tylko na przeglądarki, które obsługują
.
Zamiast pytać o konkretne wersje przeglądarek lub udział w rynku, rozważ
określając "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 JavaScriptu. Wykonując tę czynność, uprościć proces i upewnić się, że używany jest tylko kod po transpilacji. w przeglądarkach, które jej potrzebują.
Przeglądarki obsługujące moduły ignorują skrypty z atrybutem nomodule.
Natomiast przeglądarki, które nie obsługują modułów, ignorują elementy skryptu z tagami
type="module" Oznacza to, że możesz dołączyć moduł oraz skompilowaną kreację zastępczą.
Optymalnym rozwiązaniem są te dwa skrypty wersji aplikacji:
<script type="module" src="main.mjs"></script>
<script nomodule src="compiled.js" defer></script>
Przeglądarki, które obsługują moduły, pobierają i uruchamiają tag main.mjs, ignorując 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 wartości docelowe dla dwóch oddzielne wersje Twojej aplikacji:
- Wersja przeznaczona tylko dla przeglądarek obsługujących moduły.
- Wersja zawierająca skompilowany skrypt, który działa w każdej starszej wersji przeglądarki. W takim przypadku plik jest większy, ponieważ transpilacja musi obsługiwać większą liczbę przeglądarek.
Z podziękowaniem Connorem Clarka i Jasonowi Millerowi za ich opinie.