Zacznij od Babel 7

JavaScript jest wyjątkowy ze względu na szerokość ekosystemu. Podczas gdy nowe standardy dodają cukru składniowego, otrzymując im wspierane na przeglądarkach. Babel pracuje wokół tego problemu za pomocą automatycznej transpilacji.

Pomysł za produktem jest prosty: Babel zajmuje kod ES6 lub ES7 i zastępuje nowe elementy syntaktyczne z kodem emulacji. Jego wyjście potwierdza klasyczną składnię JavaScript i biegnie na starszych przeglądarkach, takich jak Internet Explorer.

Początkowa wersja Babel zabrała świata burza. Wkrótce po raz pierwszy pojawiły się różne ramy takie jak reagować, Vue i Ember. Deweloperzy często korzystają z produktu bez wiedząc, że działa w tle - więcej niż jeden popularny projekt NPM ma zależność od Babel.

• Jak zrobić aplikację

Zależności te przekształciły proces uwalniania poprzednika w romans konfliktowy. Wersja 7, nadal zarządzana przez zespół małego opiekuna, w ten sposób próbował być jak najbardziej kompatybilny. Zmiany łamania są nieliczne i daleko między, podczas gdy jakość generacji kodu pozostaje wysoka (jeśli pracujesz z zespołem, oszczędzając dokumenty magazyn w chmurze pomoże ci pozostać spójnym).

Jeśli wcześniej nie pracowałeś z Babel, niech będzie to twój przewodnik. Możliwość korzystania z zaawansowanych funkcji JavaScript bez zmartwień kompatybilnych ułatwia życie.

Czy chcesz uzyskać narzędzia do usprawnienia swojego procesu? Nasz przewodnik po najlepszych Kreator strony internetowej pomoże. Chcesz mieć wsparcie długoterminowe? Zdobądź prawo hosting usługa.

01. Sprawdzanie wersji.

Babel zwykle mieszka w środowisku wykonawczego węzła. Zacznijmy, sprawdzając używane wersje. Wyjście zapewnia stan wersji znajdującym się na stacji roboczej Ubuntu 14.04 używane do utworzenia następującego artykułu. To nie jest Pedantry - Figura towarzysząca temu krok pokazuje, że drużyna Babel spadła obsługę dla kilku wersji węzłów.

 Tamhan @ Tamhan-ThinkPad: ~ $ węzeł --version
V8.14.0.
Tamhan @ Tamhan-ThinkPad: ~ $ NPM --Version
6.4.1 

02. Zmiana nazw pakietów

Jedna zerwana zmiana w wersji 7 zaangażowała się przeniesienie pakietów babel do własnej przestrzeni nazw. Starsze pakiety nie zostały usunięte z różnych repozytoriów. Jest to ważne, ponieważ stosowanie legajowych nazw pakietów prowadzi do sytuacji pokazanej na rysunku towarzyszącej temu etapowi.

 Tamhan @ Tamhan-ThinkPad: ~ / WorkspaceB7 $ NPM
Instalacja --Save-dev @ Babel / Core @ Babel / Cli @
Babel / Preset-Env @ Babel / Węzeł
. . .
+ @ Babel / Core @ 7.2.0
+ @ babel / węzeł @ 7.2.0
+ @ babel / cli @ 7.2.0
+ @ Babel / Preset-Env2 7.2.0 

03. Dodaj akcję Budowa

Powyższy krok zakłada, że ​​pracujesz w ramach projektu NPM. W takim przypadku prowadzenie Babel za pośrednictwem działania Budowy jest łatwe. otwarty pakiet.json. i zmodyfikuj go tak, jak pokazano w poniższym kodzie:

 {
. . .
"główny": "index.js",
"Skrypty": {
"Test": "Echo" Błąd: brak testu
określone "& amp; & amp; zjazd 1",
"Buduj": "babel index.js -d lib"

}, 

04. Kod transpiicznego ręcznie

Umieszczenie Babel do pracy polega na strzelaniu do działania budowania. Najlepiej to osiągnąć za pomocą polecenia Uruchom NPM. The. -re Wartość informuje Babel, że wyniki muszą być umieszczone w lib Folder - Figura towarzysząca temu krokowi pokazuje, że folder zostanie utworzony w locie.

 Tamhan @ Tamhan-ThinkPad: ~ / WorkspaceB7 $ NPM
uruchomić
& gt; [email protected] Build / Home / Tamhan /
WorkingpaceB7.
& gt; babel index.js -d lib
Pomyślnie skompilował 1 plik z Babel. 

05. Kwestia konfiguracji

Invoking Babel Bez dalszych opcji konfiguracji nie włącza transpilacji. Kod może być transplejowany tylko wtedy, gdy ramy otrzymuje dalsze informacje o środowisku docelowym. Można to zrobić za pośrednictwem parametru wiersza poleceń lub tworząc nazwany plik .babelrc. W korzeniu projektu.

06. Skonfiguruj Babelrc

Babel Skonfiguruje się za pomocą zestawu wtyczek, z których każdy stosuje transfilowanie transformatorów do podstawy kodu. Używamy Preset-Env. Pakiet - jest wyposażony w wstępnie skonfigurowany zestaw transformacji przeznaczonych do pokrycia większości baz.

 {
"Presets": ["@ Babel / Preset-Env"]
} 

07. Czas na napęd testowy

Dodaj trochę nowego wieku JavaScript do index.js, aby przetestować program na niektórych kodzie na żywo. Kod towarzyszący temu kroku nie działałby na starszych przeglądarkach - gdy się skończyła, niejawna funkcja zostaje zastąpiona normalna Deklaracja, jak pokazano na rysunku.

Funkcja Tamstest () {
[1, 2, 3] .map ((n) = & gt; n + 1);
} 

08. Dostosuj kierowanie

Preset-Env. Dotyczy większość transpilacji domyślnie: celem produktu jest stworzenie powszechnie zgodnego JavaScript bez względu na przepustowość i koszty wykonania. Możesz zmienić swoją konfigurację, przechodząc w cele. Obiekt - przykład poniżej celów określonych wersji chromu i tj.

 {
"Presets": [
[
"@ babel / preset-env",
{
"Cele": {
"Chrome": "58",
"IE": "11"
}
}
]
]
} 

09. Zaawansowane kierowanie

Kierowanie przeglądarki Babel nie jest ograniczone do Chrome i Internet Explorer. Dzięki współpracy z Przeglądarka , Deweloperzy mogą mieszać i dopasować z kilkunastu celów, jak pokazano poniżej.

Nazwy są niewrażliwe:

• Android W przypadku Android Webview.
• Baidu. Dla przeglądarki Baidu.
• Jeżyna lub nocleg ze śniadaniem Do przeglądarki BlackBerry.
• Chrom Dla Google Chrome.
• Chromewardroid. lub and_chr. Dla Chrome dla Androida.
• Brzeg dla Microsoft Edge.
• Elektron dla ram elektronów. Zostanie przekonwertowany na wersję Chrome.
• poszukiwacz lub to znaczy Dla Internet Explorer.
• Eksploratoria lub IE_mob. Dla Internet Explorer Mobile.
• Firefox. lub ff. dla Mozilla Firefox.
• Firefoksandroid. lub and_ff. Dla Firefoksa na Androida.
• IOS. lub ios_saf. dla iOS safari.
• Węzeł dla węzła.js.Opera do Opery.
• Opera Mini lub op_mini. dla opery mini.
• Operamobile. lub op_mob dla operacji mobilnej.
• Qqandroid. lub and_qq. W przeglądarce QQ na Androida.
• Safari na safari na pulpicie.
• Samsung. Dla samsung Internet.
• Ucandroid. lub and_uc. W przeglądarce UC na Androida.

10. Zaawansowane kierowanie, część druga

Browserlist może również wziąć zaawansowane zapytania. Jego strona główna. Wyświetla listę opcji konfiguracji, z których prawie wszystkie można również stosować wewnątrz Babel, modyfikując babelrc. . Zapytania można ocenić lokalnie, jeśli twoja stacja robocza ma zainstalowany NPX.

 {
"Cele": "& gt; 0,25%, nie martwe"
} 

11. Automatyczna transpilacja

Muszące szybkie wywołanie babel szybko. Utility NODEMON monitoruje zasoby systemu plików i pożaruje polecenia jako zmiany zostaną wykryte. Teoretycznie, dodanie wsparcia Nodemon jest obsługiwane przez małą zmianę pakiet.json. .

 {
"Nazwa": "Workspaceb7",
. . .
"główny": "index.js",
"Skrypty":
{
"Start": "Nodemon --exec babel-węzeł
index.js ", 

12. Sprawdź obecność

Niektóre stacje robocze mają Nodemon. zainstalowany na całym świecie. Jeśli tak nie jest, wywołanie programu przyniesie komunikat o błędzie podobny do tego pokazanego poniżej. Na szczęście wdrażanie Nodemon. jest łatwo osiągnięty przez NPM Install. Komenda.

 Tamhan @ Tamhan-ThinkPad: ~ / WorkspaceB7 $ NPM
Zainstaluj --Save-dev Nodemon 

13. Sprawdź funkcjonalność

Wypalić się NPM Start. w oknie terminalu i przejdź do zmiany zawartości index.js. z edytorem jak Gedit lub Visual Studio Code. . Po zapisaniu, Nodemon. spowoduje wyświetlenie informacji o stanie.

 [Nodemon] Ponowne uruchomienie z powodu zmian ...
[Nodemon] Rozpoczynający się `Babel-węzeł index.js`
[Nodemon] Czyste wyjście - Czekając na zmiany
przed ponownym uruchomieniem 

14. Napraw trasowanie

Podczas Nodemon. Detekcja powinna działać bez zarzutu w tym momencie, zawartość index.js. znaleziono plik lib nie Aktualizuj. Jest to spowodowane fikcją Babel-Node. - Nie popełnia transpilowanych plików na dysk. Zamiast tego pożęcza zmodyfikowaną wersję węzła CLI, które współpracuje z przetwornymi plikami.

15. Kod transpiili programowo

Babel nie ogranicza się do pracy na linii poleceń. Jeśli zainstalowane są prawidłowe pakiety, kod może być również przekazany z innego programu. Fragment towarzyszący temu krokowi stosuje zestaw podstawowych transformacji do ciągów ciąg. Należy pamiętać, że ustawienia konfiguracji, zwykle uzyskuje się z babelrc. plik.

 var babel = wymagać ("@ Babel / Core");
Importuj {Transform} z "@ Babel / Core";
Import * jako Babel z "@ Babel / Core";
babel.transform ("Kod ();", opcje,
Funkcja (Err, Wynik) {
wynik.
wynik. Mapa;
wynik.
}); 

16. Transpile całe pliki

Kod źródłowy zwykle nie jest zapisany w zmiennych łańcuchów. Babel API kont za pomocą zestawu funkcji związanych z plikami, które opracuj ciąg wejściowy dla zmiennej z nazwą pliku. Wyniki są jednak zwracane jako normalna zmienna javascript.

 Babel.transformFile ("FileName.js", opcje,
Funkcja (Err, Wynik) {
wynik; // = & gt; {kod, mapa, ast}
}
); 

17. Synchronizacja i async

Babel 7 wprowadzono synchroniczne i asynchroniczne wersje większości połączeń API. Upewnij się, że wybrałeś właściwy dla swoich potrzeb - podczas transportu małych przykładów można wykonać w locie, ustawienie Babel luźno w bardziej złożonych plikach może łatwo prowadzić do opóźnień w dziesiątkach sekund.

18. Dowiedz się o indywidualnych wtyczkach

Jeśli kiedykolwiek zastanawiasz się nad tym, co dzieje się w tle, wystarczy odwiedzić ta strona . Zapewnia listę wszystkich wtyczek znajdujących się obecnie w dystrybucji Babel, a także zawiera kilka wskazówek dla wszystkich osób starających się utworzyć własną wtyczkę.

19. Wypisz specyfikę maszynopis

Babel nie ogranicza się do transportu nowych elementów javascript. Produkt zawiera silnik maszynowy zawierający funkcję. Wybiera informacje o wpisaniu i zastępuje zaawansowane elementy. Niestety, Babel nie wykonuje sprawdzania typu - eliminuje to jedno z najważniejszych korzyści języka maszynopisu.

 {
"Presets": ["@ Babel / Preset-Sestscript"]
} 

20. Uruchom babel online

Podczas gdy operacje transpiglacyjne zwykle wykładają płynnie, czasami występują problemy. W takim przypadku Babel REP. jest pomocny. Uruchamia Babel w przeglądarce stacji roboczej i pokazuje wejście i wyjście tuż obok siebie.

21. Dowiedz się o punktach bólu

Nasze wprowadzenie wyjaśniło, że Babel widzi szerokie wykorzystanie w różnych projektach. Zespół opiekuna babel upraszcza aktualizacje wersji za pomocą Szczegółowy dziennik zmiany . Jeśli używasz Babel Programowo, nie zapomnij skonsultować się z Przewodnik Upgrade API .

Ten artykuł został pierwotnie opublikowany w wydaniu 283 Magazynu kreatywnego projektowania stron internetowych Projektant stron internetowych . Kup problem 283 tutaj lub Subskrybuj tutaj projektant stron internetowych .

Powiązane artykuły:

• Jak kodować szybciej, lżejszy javascript
• 5 niesamowitych apis javascript
• 27 Najwyższej klasy szablony stron internetowych