Sprawdź nasz kurs wideo Babel 7 i Webpack 4:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD
Podnieś swoje umiejętności JavaScript na wyższy poziom:
https://www.udemy.com/course/javascript-boost/?referralCode=06AF8499F008CC241201
Babel to toolchain, który służy głównie do konwersji kodu ECMAScript 2015+ na wstecznie kompatybilną wersję JavaScriptu w obecnych i starszych przeglądarkach lub środowiskach. ECMAScript 2015+ równa się ES6+.
Można myśleć o Babel jako o tłumaczu. ES6+ JS oferuje nam wiele nowych funkcji i składni. Mogą one ogromnie poprawić wydajność naszego rozwoju. Ale w tej chwili większość z tych nowych funkcji jest nierozpoznawalna w przeglądarkach. Aby znaleźć równowagę między kompatybilnością a wygodą i wydajnością programowania, powstał Babel.
My programiści piszemy kody w ES6+, a następnie prosimy Babel o przetłumaczenie ich na kody zrozumiałe dla przeglądarek.
Sam Babel radzi sobie tylko z tłumaczeniem nowych składni. ES6+ dodał również wiele nowych API takich jak Promise, Map, Object.assign(), itp. Nowe API oznacza nowe obiekty, właściwości i metody. API to tylko wymyślna nazwa. Nie daj się jej zastraszyć. Aby sobie z nimi poradzić, musimy dodać te API do ES5. To zadanie wykonuje asystent Babela. Pokażemy Ci, kim jest ten asystent później.
Zapamiętaj więc ten wniosek: Babel tłumaczy nowe składnie, a jego asystent obsługuje nowe API.
Najpierw przejdź na oficjalną stronę Babela i kliknij przycisk Docs.
Babel zajmuje się tłumaczeniem składni. Polyfill obsługuje brakujące funkcje. Zatem odpowiedź na pytanie, które zostawiliśmy wcześniej: pomocnikiem Babel jest polyfill.
Oprócz tłumaczenia ES6+, Babel radzi sobie również z JSX i TypeScript. I tu pojawia się kolejne pojęcie: preset. Preset jest tłumaczeniem, którego używa Babel. Kontroluje on sposób, w jaki Babel wykonuje tłumaczenie.
Więc teraz poznałeś dwie ważne koncepcje Babel: preset i polyfill.
Następnie, zainstalujmy Babel.
Instalacja i konfiguracja Babel:
To jest polecenie instalacyjne sugerowane przez oficjalny podręcznik Babel. Jeśli przyjrzysz się uważnie, zauważysz, że w rzeczywistości instalowane są cztery pakiety, trzy jako zależność rozwojowa i jeden jako zależność produkcyjna.
- npm install – save-dev @babel/core
- npm install @babel/cli
- npm install @babel/preset-env
- npm install – save @babel/polyfill
Babel/core, tak jak sugeruje jego nazwa, jest rdzeniem całego programu Babel.
Babel/cli jest interfejsem wiersza poleceń. Używamy go do komunikacji z babelem.
Babel sam nie wie jak tłumaczyć kody ES6. Wymaga wtyczek, które powiedzą mu jak. Wtyczek jest wiele. Instalowanie i ustawianie ich jeden po drugim jest pracochłonne. Dlatego najlepszym rozwiązaniem jest skorzystanie z babel preset. Preset to zbiór wtyczek. Preset, którego używamy to preset-env.
Babel/preset-env jest standardem, którego Babel 7 używa do tłumaczenia ES6+ na ES5. W Babel 7, preset-env zastąpił preset-2015/6/7, etc.
Babel/polyfill służy do dodawania funkcji ES6+ do ES5. Więc dlaczego musimy to zrobić?
Nowa składnia nie jest jedyną różnicą między ES6 a ES5. ES6 otrzymał już wiele nowych API. API to tylko wymyślna nazwa dla wbudowanych obiektów. Te nowe wbudowane obiekty są bardzo przydatne, ale problem polega na tym, że nie istnieją w środowisku ES5.
Jedynym rozwiązaniem jest dodanie tych wbudowanych obiektów do środowiska ES5. Do tego właśnie służy polyfill.
Włączmy nasz własny terminal i skonfigurujmy projekt.
Po pierwsze, włączamy terminal i tworzymy katalog główny projektu. Następnie wchodzimy do niego i npm init.
Następnie kopiujemy cztery polecenia instalacyjne z oficjalnego podręcznika Babel i wklejamy je do terminala.
Po zakończeniu instalacji powinieneś zobaczyć, że te cztery pakiety są zainstalowane:
Otwórzmy nasz projekt w VSC i sprawdźmy pakiet.json.
Cli, core, i preset-env są zależnościami rozwojowymi. polyfill jest zależnością produkcyjną.
Możesz myśleć o polyfill jak o kodzie źródłowym. Przechowuje on źródła wszystkich nowych funkcji es6.
ES5 + polyfill = ES6.
Zanim będziemy mogli używać Babel, musimy go skonfigurować. Najlepszym sposobem na to jest stworzenie pliku do przechowywania informacji konfiguracyjnych Babela.
W Babelu 6, informacje konfiguracyjne przechowujemy w .babelrc lub package.json.
Babel 7 oferuje nam nowe rozwiązanie: babel.config.js.
Podręcznik Babela oferuje nam szablon do tworzenia babel.config.js. Wystarczy, że skopiujemy go do katalogu głównego naszego projektu.
Na początek eksportujemy obiekt modułu.
Następnie definiujemy w nim właściwość presets. Wartością presetów jest tablica.
Wewnątrz tablicy umieszczamy kolejną tablicę.
Pierwszym elementem tablicy child jest preset, którego chcemy użyć. Tutaj ustawiamy go na @babel/env lub @babel/preset-env.
Drugi element to obiekt config. Wewnątrz niego znajdują się dwie właściwości: targets oraz useBuiltIns. Targets służy do konfigurowania przeglądarek, a useBuiltIns do polyfill’ów.
Teraz zainstalowaliśmy i skonfigurowaliśmy Babel.
Następnie przetestujmy go.
W katalogu głównym projektu tworzymy nowy plik: es6.js.
Następnie włączamy terminal i wpisujemy komendę babel: npx babel es6.js. Oto co otrzymamy:
ES6 let został zamieniony na ES5 var.
NPX babel jest taki sam jak node_modules/.bin/babel
Teraz, udało nam się „Babelować” nasz pierwszy plik ES6.
Możesz chcieć wyprowadzić przetłumaczony plik jako niezależny plik. W tym przypadku, potrzebujesz -o lub – output-dir.
-o i – output-file mogą tłumaczyć tylko jeden plik na raz. W prawdziwym życiu, możesz chcieć przechowywać pliki ES6 w jednym katalogu i tłumaczyć każdy plik w tym katalogu.
Na przykład, w katalogu głównym projektu, tworzymy dwa katalogi podrzędne: ES6 i ES5. Zapisujemy nasze pliki ES6 w dir ES6. Następnie „Babel” przenosimy je do dir ES5. Pliki HTML linkują pliki JS z dir es5.
W tym przypadku poleceniem, którego potrzebujemy jest npx babel ES6 -d ES5 lub npx babel ES6 – out-dir ES5.
Teraz wszystkie pliki w dir ES6 zostaną „babelowane” do dir ES5.
Następnie pokażmy, co polyfill może dla nas zrobić.
To jest plik, który chcemy babelować:
Używa on wielu API ES6, które nie istnieją w ES5. Jedynym sposobem, aby umożliwić im pracę w środowisku ES5, jest dodanie kodów źródłowych tych nowych interfejsów API do środowiska ES5. Właśnie po to jest polyfill i właśnie dlatego polyfill jest instalowany jako zależność produkcyjna. Potrzebujemy go w produkcji.
A oto mniej dokładna analogia, która pomoże Ci zrozumieć, dlaczego potrzebujemy polyfill.
Pozwólmy, że mamy program jQuery. Nie możemy uruchomić naszego programu jQuery bezpośrednio. Musimy najpierw połączyć się z kodem źródłowym jQuery. Polyfill jest kodem źródłowym jQuery, który linkujemy.
To jest „babeled” plik ES5, który dostaliśmy:
Widzisz te wszystkie wymagane pliki? Są one ładowane przez polyfill. Ale plik „babeled” nie może być użyty bezpośrednio przez pliki HTML. Musimy je spakować za pomocą webpacka. Ale wszystkie potrzebne „kody źródłowe API” zostały załadowane.
To ustawienie jest kontrolowane przez właściwość useBuiltIns w babel.config.js. Ta właściwość ma trzy wartości: usage, false i entry.
Usage jest najlepszą i najczęściej używaną wartością. Jest również tym, co zalecamy.
Oprócz usage, useBuiltIns posiada dwie inne wartości: false i entry.
False spowoduje wyłączenie polyfill. Oznacza to, że musisz ręcznie połączyć potrzebne interfejsy API. Zdecydowanie nie chcesz tego robić.
Jeśli używasz wpisu, musisz „wymagać” @babel/polyfillEntry na początku twojego pliku. Następnie babel najpierw sprawdzi właściwość targets, aby dowiedzieć się, jakie są docelowe przeglądarki. Załaduje wszystkie API, które nie są obsługiwane przez docelową przeglądarkę. Oczywiście w ten sposób otrzymamy wiele niepotrzebnych API.
Podsumowując, ustaw useBuiltIns na usage, a Babel zajmie się resztą za Ciebie.
Sprawdź nasz PEŁNY kurs Babel 7 i Webpack 4 na Udemy:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=MDM_BABEL_P
Sprawdź nasz PEŁNY kurs tworzenia stron internetowych na Udemy:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD
.