Articles /

Zacznij od Babel 7

JavaScript jest unikalny z powodu rozległości ekosystemu. Podczas gdy nowe standardy dodają cukier syntaktyczny, uzyskanie ich wsparcia w przeglądarkach wymaga czasu. Babel działa wokół tego problemu poprzez automatyczną transpilację.

Pomysł na produkt jest prosty: Babel przyjmuje kod ES6 lub ES7 i zastępuje nowe elementy składniowe kodem emulacyjnym. Jego wyjście potwierdza klasyczną składnię JavaScript i działa na starszych przeglądarkach, takich jak Internet Explorer.

Początkowe wydanie Babela wzięło świat szturmem. Wkrótce po jego pojawieniu się, różne frameworki takie jak React, Vue i Ember przyjęły go. Programiści często używają produktu nie wiedząc, że działa on 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 wydania poprzednika w pełną konfliktów sprawę. Wersja 7, nadal zarządzana przez mały zespół opiekunów, starała się być tak kompatybilna, jak to tylko możliwe. Zmiany są bardzo rzadkie, podczas gdy jakość generowanego kodu pozostaje wysoka (jeśli pracujesz z zespołem, zapisywanie dokumentów w chmurze pomoże zachować spójność).

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

Czy chciałbyś mieć kilka narzędzi, aby usprawnić swój proces? Nasz przewodnik po najlepszych kreatorach stron internetowych pomoże Ci w tym. Chcesz długoterminowego wsparcia? Zdobądź odpowiednią usługę hostingową.

Sprawdzenie wersji

Babel zazwyczaj mieszka w środowisku uruchomieniowym Node. Zacznijmy od sprawdzenia używanych wersji. Wyjście podaje stan wersji znaleziony na stacji roboczej Ubuntu 14.04 użytej do stworzenia poniższego artykułu. To nie jest pedanteria – rysunek towarzyszący temu krokowi pokazuje, że zespół Babel porzucił wsparcie dla całkiem sporej liczby wersji Node.js.

tamhan@tamhan-thinkpad:~$ node --versionv8.14.0tamhan@tamhan-thinkpad:~$ npm --version6.4.1

Zmiana nazw pakietów

Jedną z przełomowych zmian w wersji 7 było przeniesienie pakietów Babel do ich własnej przestrzeni nazw. Starsze pakiety nie zostały usunięte z różnych repozytoriów. Jest to ważne, ponieważ używanie starszych nazw pakietów prowadzi do sytuacji pokazanej na rysunku towarzyszącym temu krokowi.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node. . .+ @babel/[email protected]+ @babel/[email protected]+ @babel/[email protected]+ @babel/[email protected]

Add a build action

Krok powyżej zakłada, że pracujesz wewnątrz projektu npm. W takim przypadku, uruchomienie Babel poprzez akcję budowania jest proste. Otwórz plik package.json i zmodyfikuj go tak, jak pokazano w poniższym kodzie:

{. . ."main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "babel index.js -d lib"},

Transpile code by hand

Wprowadzenie Babela do pracy wymaga uruchomienia akcji budowania. Najlepiej jest to zrobić za pomocą polecenia npm run. Wartość -d informuje Babel, że wyniki muszą być umieszczone w folderze lib – rysunek towarzyszący temu krokowi pokazuje, że folder ten jest tworzony w locie.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm run build> [email protected] build /home/tamhan/workspaceB7> babel index.js -d libSuccessfully compiled 1 file with Babel.

Kwestia konfiguracji

Wywołanie Babel bez dalszych opcji konfiguracyjnych nie umożliwia transpilacji. Kod może być transpilowany tylko wtedy, gdy framework otrzyma dalsze informacje o środowisku docelowym. Można to zrobić za pomocą parametru wiersza poleceń lub przez utworzenie pliku .babelrc w katalogu głównym projektu.

Konfiguracja babelrc

Babel konfiguruje się za pomocą zestawu wtyczek, z których każda stosuje transformacje transpilacyjne do bazy kodu. My używamy pakietu preset-env – jest on dostarczany z prekonfigurowanym zestawem transformacji, które mają pokryć większość podstaw.

{"presets": }

Czas na jazdę testową

Dodaj trochę new-age JavaScript do index.js, aby przetestować program na żywym kodzie. Kod towarzyszący temu krokowi nie działałby na starszych przeglądarkach – po wykonaniu tej czynności funkcja implicite zostaje zastąpiona normalną deklaracją, jak pokazano na rysunku.

function tamstest(){.map((n) => n + 1);}

Dostosowanie ukierunkowania

preset-env domyślnie stosuje większość transpilacji: celem produktu jest stworzenie uniwersalnie kompatybilnego JavaScriptu bez względu na koszty przepustowości i wydajności. Można zmienić jego konfigurację, przekazując obiekt targets – poniższy przykład jest skierowany do konkretnych wersji Chrome i IE.

{"presets": ]}

Zaawansowane targetowanie

Targetowanie przeglądarki przez Babel nie jest ograniczone do Chrome i Internet Explorera. Dzięki współpracy z browserslist, deweloperzy mogą mieszać i dopasowywać z ponad tuzina docelowych przeglądarek, jak pokazano poniżej.

Nazwy nie uwzględniają wielkości liter:

  • Android dla Android WebView.
  • Baidu dla Baidu Browser.
  • BlackBerry lub bb dla przeglądarki Blackberry.
  • Chrome dla Google Chrome.
  • ChromeAndroid lub and_chr dla Chrome dla Android.
  • Edge dla Microsoft Edge.
  • Electron dla frameworka Electron. Zostanie on przekonwertowany na wersję Chrome.
  • Explorer lub ie dla Internet Explorer.
  • ExplorerMobile lub ie_mob dla Internet Explorer Mobile.
  • Firefox lub ff dla Mozilla Firefox.
  • FirefoxAndroid lub and_ff dla Firefox dla Android.
  • iOS lub ios_saf dla iOS Safari.
  • Node dla Node.js.Opera dla Opera.
  • OperaMini lub op_mini dla Opera Mini.
  • OperaMobile lub op_mob dla Opera Mobile.
  • QQAndroid lub and_qq dla QQ Browser dla Android.
  • Safari dla desktop Safari.
  • Samsung dla Samsung Internet.
  • UCAndroid lub and_uc dla UC Browser dla Androida.

Zaawansowane kierowanie, część druga

Browserlist może również przyjmować zaawansowane zapytania. Jego strona główna zawiera listę opcji konfiguracyjnych, z których prawie wszystkie mogą być również użyte wewnątrz Babel poprzez modyfikację babelrc. Zapytania mogą być obliczane lokalnie, jeśli stacja robocza ma zainstalowany npx.

{"targets": "> 0.25%, not dead"}

Automatyczna transpilacja

Potrzeba ręcznego wywoływania Babela szybko staje się uciążliwa. Narzędzie nodemon monitoruje zasoby systemu plików i odpala komendy, gdy wykryje zmiany. W teorii, dodanie obsługi nodemona jest obsługiwane przez małą zmianę w package.json.

{"name": "workspaceb7",. . ."main": "index.js","scripts": {"start": "nodemon --exec babel-node index.js",

Sprawdź obecność

Niektóre stacje robocze mają nodemona zainstalowanego globalnie. Jeśli tak nie jest, wywołanie programu spowoduje wyświetlenie komunikatu o błędzie podobnego do tego pokazanego poniżej. Na szczęście instalację nodemona można łatwo przeprowadzić za pomocą polecenia npm install.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm install --save-dev nodemon

Sprawdź funkcjonalność

Wystarczy uruchomić npm start w oknie terminala i przystąpić do zmiany zawartości pliku index.js za pomocą edytora takiego jak gedit lub Visual Studio Code. Po zapisaniu nodemon wyświetli informacje o statusie.

 restarting due to changes... starting `babel-node index.js` clean exit - waiting for changes before restart

Popraw transpilację

W tym momencie wykrywanie nodemona powinno działać bezbłędnie, jednak zawartość pliku index.js znajdującego się w lib nie jest aktualizowana. Jest to spowodowane pewną cechą babel-node – nie zapisuje on transpilowanych plików na dysk. Zamiast tego uruchamia zmodyfikowaną wersję Node CLI, która pracuje z transpilowanymi plikami.

Transpiluj kod programowo

Babel nie jest ograniczony do pracy w linii poleceń. Jeśli zainstalowane są odpowiednie pakiety, kod może być również transponowany z innego programu. Snippet towarzyszący temu krokowi stosuje zestaw podstawowych przekształceń do łańcucha wejściowego. Należy pamiętać, że ustawienia konfiguracyjne, zazwyczaj, są uzyskiwane z pliku babelrc.

var babel = require("@babel/core");import { transform } from "@babel/core";import * as babel from "@babel/core";babel.transform("code();", options, function(err, result) {result.code;result.map;result.ast;});

Transpiluj całe pliki

Kod źródłowy zazwyczaj nie jest przechowywany w zmiennych łańcuchowych. API Babel uwzględnia to poprzez zestaw funkcji związanych z plikami, które rezygnują z łańcucha wejściowego na rzecz zmiennej z nazwą pliku. Wyniki, jednakże, są zwracane jako normalna zmienna JavaScript.

babel.transformFile("filename.js", options, function (err, result) {result; // => { code, map, ast }});

Sync i async

Babel 7 wprowadził synchroniczne i asynchroniczne wersje większości wywołań API. Upewnij się, że wybrałeś właściwą dla swoich potrzeb – podczas gdy transpiling małych przykładów może być wykonywany w locie, ustawienie Babela na bardziej złożonych plikach może łatwo doprowadzić do opóźnień sięgających dziesiątek sekund.

Dowiedz się więcej o poszczególnych wtyczkach

Jeśli kiedykolwiek będziesz się zastanawiać, co dzieje się w tle, po prostu odwiedź tę stronę. Dostarcza ona listę wszystkich wtyczek zawartych obecnie w dystrybucji Babel, a także zawiera kilka wskazówek dla wszystkich tych, którzy chcą stworzyć własną wtyczkę.

Wyeliminuj specyfikę TypeScript

Babel nie jest ograniczony do transpilowania elementów new-age JavaScript. Produkt zawiera ograniczony w funkcjach silnik TypeScript. Usuwa on informacje o typowaniu i zastępuje zaawansowane elementy. Niestety, Babel nie wykonuje sprawdzania typów – eliminuje to jedną z najważniejszych zalet języka TypeScript.

{"presets": }

Uruchom Babel online

Pomimo że operacje transpilacji zazwyczaj przebiegają bezproblemowo, czasami pojawiają się problemy. W takim przypadku pomocny jest Babel REPL. Uruchamia on Babel w przeglądarce twojej stacji roboczej i pokazuje dane wejściowe i wyjściowe tuż obok siebie.

Dowiedz się o punktach bólu

Nasze wprowadzenie wyjaśniło, że Babel jest szeroko używany w różnych projektach. Zespół opiekunów Babel upraszcza aktualizacje wersji dzięki szczegółowemu dziennikowi zmian. Jeśli używasz Babel programowo, nie zapomnij zapoznać się z przewodnikiem aktualizacji API.

Ten artykuł został pierwotnie opublikowany w numerze 283 magazynu Web Designer. Kup numer 283 tutaj lub zaprenumeruj Web Designer tutaj.

  • Jak kodować szybszy, lżejszy JavaScript
  • 5 niesamowitych API Javascript
  • 27 najwyższej klasy szablonów stron internetowych

Leave a Reply