a Beginner ’ s Guide to Babel

Posted on by admin

ten artykuł przedstawia Babel, kompilator JavaScript, który pozwala programistom korzystać z JavaScript nowej generacji już dziś.

pisanie JavaScript podczas tworzenia aplikacji internetowych może być frustrujące. Musimy zastanowić się nad funkcjami dostępnymi w przeglądarkach, które kierujemy i co się dzieje, gdy funkcja nie jest zaimplementowana. Niektórzy ludzie zalecają po prostu nie używać go, co jest bolesnym doświadczeniem w większości przypadków, jeśli budujemy coś skomplikowanego.

na szczęście niektóre narzędzia pozwalają nam przestać martwić się o to, co jest obsługiwane i po prostu napisać najlepszy kod, jaki możemy. Nazywają się transpilery. Transpiler jest narzędziem, które pobiera kod źródłowy jako wejście i tworzy nowy kod źródłowy jako wyjście, z inną składnią, ale semantycznie tak blisko, jak to możliwe — lub idealnie równoważny — do oryginału.

Babel jest standardowym transpilerem do tłumaczenia współczesnego JavaScript (ES2015+) NA kompatybilne implementacje, które działają w starych przeglądarkach. Jest to idealne rozwiązanie, jeśli chcesz skoncentrować się na pisaniu JavaScript.

i chociaż głównym celem Babel jest przetłumaczenie najnowszych standardów ECMAScript (ES) dla starych — lub czasami obecnych — przeglądarek, może zrobić więcej. Istnieje ekosystem ustawień wstępnych i wtyczek, które umożliwiają również dodanie niestandardowych funkcji. Każda wtyczka udostępnia nową funkcję / transformację dla Twojego kodu, a Ustawienia wstępne są tylko zbiorem wtyczek.

rozpoczęcie pracy

istnieją różne sposoby konfiguracji Babel w zależności od projektu i narzędzi, których używasz. W tym artykule wyjaśnimy, jak skonfigurować Babel za pomocą CLI, chociaż jeśli używasz systemu budowania lub frameworka, możesz zapoznać się z konkretnymi instrukcjami na oficjalnej stronie. Przez większość czasu CLI jest najszybszym i najłatwiejszym sposobem na rozpoczęcie pracy, więc jeśli jesteś użytkownikiem po raz pierwszy, możesz kontynuować.

pierwszym krokiem do skonfigurowania Babel w projekcie jest zainstalowanie pakietu przy użyciu npm i dodanie go jako zależności dev. Zakładając, że masz działający węzeł.środowisko js już na miejscu, to tylko kwestia uruchomienia następujących W terminalu:

mkdir babel-testcd babel-testnpm init -ynpm install --save-dev babel-cli

spowoduje to utworzenie katalogu (babel-test) zmieniającego się w ten katalog, zainicjalizuje projekt npm (tworząc w ten sposób plik package.json), a następnie zainstaluje babel-CLI jako zależność dev.

jeśli potrzebujesz pomocy z powyższym, zapoznaj się z naszymi samouczkami na temat instalacji węzła i pracy z npm.

następnie możemy otworzyć package.json i dodać polecenie build do naszych skryptów npm:

"scripts": { "build": "babel src -d dist"}

spowoduje to pobranie plików źródłowych z katalogu src i wyprowadzenie wyniku w katalogu dist. Wtedy możemy go wykonać jako:

npm run build

ale czekaj! Przed uruchomieniem Babel musimy zainstalować i skonfigurować wtyczki, które zmienią nasz kod. Najprostszym i najszybszym sposobem jest dodanie presetu Env, który wybiera odpowiednie wtyczki w zależności od wskazanej przeglądarki docelowej. Można go zainstalować za pomocą:

npm install babel-preset-env --save-dev

następnie utwórz plik .babelrc w katalogu głównym projektu i dodaj preset:

{ "presets": }

plik .babelrc jest miejscem, w którym umieszczasz wszystkie ustawienia Babel. Będziesz używać tego przede wszystkim do konfigurowania ustawień wstępnych i wtyczek, ale dostępnych jest znacznie więcej opcji. Pełną listę można sprawdzić na stronie Babel API.

należy pamiętać, że w zależności od systemu operacyjnego pliki zaczynające się od kropki będą domyślnie ukryte. Jeśli jest to dla Ciebie problematyczne (lub jeśli po prostu wolisz mniejszą liczbę plików), możesz umieścić ustawienia Babel w pliku package.json, pod kluczem babel, w ten sposób:

{ "name": "babel-test", "version": "1.0.0", "babel": { // config }}

na koniec stwórzmy katalogi i pliki, które Babel spodziewa się znaleźć:

mkdir src dist

i dać mu coś do przemiany:

let a = 1;let b = 2; = ;console.log(a);console.log(b);

ten przykład wykorzystuje destrukcyjne przypisanie do zamiany wartości dwóch zmiennych.

uruchamianie Babel

teraz, gdy masz już gotową do użycia instalację Babel, możesz wykonać polecenie build, aby uruchomić proces kompilacji:

npm run build

spowoduje to pobranie kodu z src/main.js, przekształcenie go w kod ES5 i wyprowadzenie przekształconego kodu do dist/main.js.

oto co wyprodukował:

"use strict";var a = 1;var b = 2;var _ref = ;a = _ref;b = _ref;console.log(a);console.log(b);

jak widać, let został zastąpiony przez var, a Babel wprowadził zmienną tymczasową (oznaczoną znakiem podkreślenia), aby ułatwić zamianę.

i tyle. Kod zapisany w katalogu src zostanie przetłumaczony na poprzednie wersje języka. Domyślnie, jeśli nie dodasz żadnych opcji do ustawień domyślnych, załaduje on wszystkie przekształcenia. Możesz również wskazać przeglądarki docelowe w następujący sposób:

{ "presets": } }] ]}

spowoduje to załadowanie wymaganych przekształceń, aby obsługiwać najnowsze dwie wersje każdej przeglądarki i Safari większe lub równe wersji 7. Dostępne opcje dla przeglądarek docelowych można znaleźć w repozytorium listy przeglądarek.

Ekosystem Babel: Szybki przegląd

jak zauważyłeś w poprzedniej sekcji, Babel nie zrobi nic sam po zainstalowaniu. Musimy zainstalować zestaw wtyczek, aby uzyskać pożądane zachowanie, lub możemy użyć presetów, które są predefiniowanymi zestawami wtyczek.

zazwyczaj każda funkcja, którą chcesz dołączyć, będzie miała postać wtyczki. Niektóre przykłady ES2015 obejmują:

  • stałe
  • funkcje strzałek
  • funkcje blokowe
  • klasy
  • dla-z
  • rozkładanie
  • literały szablonów

Zobacz pełna lista wtyczek w Babel docs.

ale czasami nie chcesz zawierać wszystkich wtyczek jeden po drugim. Istnieją więc prebuilt presety, które ułatwią proces instalacji każdej wtyczki.

obecnie dostępne są trzy oficjalne ustawienia wstępne:

  • Env
  • React
  • Flow

Env jest najczęściej używanym i tym, którego tutaj używamy. Automatycznie ładuje wszystkie niezbędne przekształcenia, aby Twój kod był zgodny w zależności od docelowych przeglądarek.

react preset przekształca kod typowy dla projektów Reactowych, głównie dodając zgodność z adnotacjami Flow i JSX.

i wreszcie, ustawienie Flow predefiniowane jest używane do czyszczenia kodu z adnotacji typu Flow (chociaż nie sprawdza, czy typy są poprawne, czy nie.)

Babel Polyfill

istnieją funkcje JavaScript, których nie można przekształcić składniowo, zwykle dlatego, że Nie zaimplementowano równoważnej funkcjonalności-na przykład funkcji Promises i generatora.

tego typu funkcje muszą być zaimplementowane w przeglądarce przez bibliotekę, która ma być używana w kodzie, a to jest praca polyfill.

Babel polyfill składa się z core-js i regenerator runtime. Razem obejmują wszystkie funkcje ES2015+.

zaawansowane użycie

jak wspomniano, Babel może być również używany do przekształcania funkcji, które nie zostały jeszcze zaimplementowane w tym języku. Dobrym tego przykładem jest propozycja pól klasowych (obecnie tc39 stage 3: candidate). Jest to szczególnie popularne wśród programistów Reactowych, ponieważ eliminuje konieczność jawnego wiązania metod z konkretnym komponentem, a także oznacza, że komponent state może być zadeklarowany jako pole klasy (potencjalnie eliminując potrzebę konstruktora).

dla tych z Was, którzy chcą dzisiaj używać pól klasy, musielibyście dodać właściwości babel-plugin-transform-class-jako zależność dev:

npm install --save-dev babel-plugin-transform-class-properties

zaktualizujesz również plik .babelrc w następujący sposób:

{ "presets": , "plugins": }

teraz możesz pisać:

class App extends Component { state = { count: 0 }; incCount = () => { this.setState(ps => ({ count: ps.count + 1 })); }; render() { return ( <div> <p>{ this.state.count }</p> <button onClick={this.incCount}>add one</button> </div> ); }}

i na tym się nie kończy. Możesz również użyć Babel, aby dodać nowe funkcje do języka, jak pokazuje nasz samouczek zrozumienie ASTs poprzez budowanie własnej wtyczki Babel.

alternatywy

pisanie nowoczesnych aplikacji internetowych czasami wymaga więcej niż funkcje dostępne w JavaScript. Inne języki można również przetłumaczyć na zgodny JavaScript, ale także zaimplementować inne przydatne funkcje.

najpopularniejszą opcją jest TypeScript, czyli zwykły JavaScript, który implementuje nowoczesne funkcje ES, ale dodaje również inne, szczególnie dotyczące bezpieczeństwa typów.

z drugiej strony, istnieją zupełnie różne języki w różnych kategoriach, od funkcjonalnych, takich jak PureScript, po zorientowane obiektowo, takie jak Dart.

aby uzyskać głębszy przegląd alternatywnych języków, spójrz na 10 języków, które kompilują się do JavaScript.

podsumowanie

Babel jest świetną opcją do pisania nowoczesnych aplikacji, jednocześnie obsługując JavaScript, który może być zrozumiały dla wszystkich programistów i szeroki zakres przeglądarek, w których kod musi być uruchomiony.

Babel jest przydatny nie tylko do przekształcenia ES2015+ na poprzednie wersje języka — zarówno w przeglądarce, jak i na platformach takich jak Node.js – ale także do dodawania nowych funkcji, które nie są częścią standardu. Aby zobaczyć, co mam na myśli, wystarczy spojrzeć na katalog npm, aby znaleźć wszystkie dostępne wtyczki Babel lub presety.

ponieważ JavaScript rozwija się w tak szybkim tempie, oczywiste jest, że producenci przeglądarek będą potrzebować trochę czasu, aby wdrożyć najnowsze funkcje. Umieszczenie Babel w swoim zestawie narzędzi oznacza, że możesz pisać najnowocześniejszy JavaScript już dziś, wiedząc, że nie porzucasz żadnego z użytkowników. Czego tu nie kochać?

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.