Začněte s jazykem Babel 7

JavaScript je jedinečný díky širokému ekosystému. Nové standardy sice přidávají syntaktické cukry, ale jejich podpora v prohlížečích vyžaduje čas. Babel tento problém obchází pomocí automatické transpozice.

Základní myšlenka produktu je jednoduchá: Babel převezme kód ES6 nebo ES7 a nahradí nové syntaktické prvky emulačním kódem. Jeho výstup potvrzuje klasickou syntaxi JavaScriptu a funguje i ve starších prohlížečích, jako je Internet Explorer.

První verze Babelu vzala svět útokem. Brzy po jeho prvním objevení jej přijaly různé frameworky jako React, Vue a Ember. Vývojáři jej často používají, aniž by věděli, že funguje na pozadí – nejeden populární projekt npm má závislost na Babelu.

• Jak vytvořit aplikaci

Tyto závislosti proměnily proces vydání předchůdce v konfliktní záležitost. Verze 7, stále spravovaná malým týmem správců, se proto snažila být co nejvíce kompatibilní. Rozbíjejících změn je jen málo a kvalita generování kódu zůstává vysoká (pokud pracujete v týmu, ukládání dokumentů do cloudového úložiště vám pomůže zůstat soudržní).

Pokud jste s Babelem ještě nepracovali, nechť je vám tento návod průvodcem. Možnost používat pokročilé funkce JavaScriptu bez obav o kompatibilitu vám výrazně usnadní život.

Chcete nějaké nástroje pro zefektivnění vašeho procesu? Pomůže vám náš průvodce nejlepším nástrojem pro tvorbu webových stránek. Chcete dlouhodobou podporu? Pořiďte si správnou webhostingovou službu.

Kontrola verze

Babel obvykle žije v prostředí runtime Node. Začněme kontrolou použitých verzí. Výstup poskytuje stav verzí zjištěný na pracovní stanici Ubuntu 14.04 použité k vytvoření následujícího článku. Nejde o pedantství – obrázek doprovázející tento krok ukazuje, že tým Babel upustil od podpory poměrně velkého počtu verzí Node.js.

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

Změna názvů balíčků

Jedna z přelomových změn ve verzi 7 se týkala přesunu balíčků Babel do vlastního jmenného prostoru. Starší balíčky nebyly z různých repozitářů odstraněny. To je důležité, protože používání starších názvů balíčků vede k situaci zobrazené na obrázku doprovázejícím tento krok.

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]

Přidání akce sestavení

Výše uvedený krok předpokládá, že pracujete uvnitř projektu npm. V takovém případě je spuštění nástroje Babel prostřednictvím akce sestavení snadné. Otevřete soubor package.json a upravte jej podle následujícího kódu:

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

Přepište kód ručně

Zprovoznění aplikace Babel zahrnuje spuštění akce build. Toho nejlépe dosáhnete pomocí příkazu npm run. Hodnota -d informuje Babel, že výsledky musí být umístěny do složky lib – obrázek doprovázející tento krok ukazuje, že složka se vytvoří za běhu.

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

Otázka konfigurace

Vyvolání Babelu bez dalších konfiguračních možností neumožňuje transpilaci. Kód lze transpilovat pouze v případě, že framework obdrží další informace o cílovém prostředí. To lze provést pomocí parametru příkazového řádku nebo vytvořením souboru s názvem .babelrc v kořenovém adresáři projektu.

Konfigurace babelrc

Babel se konfiguruje pomocí sady zásuvných modulů, z nichž každý aplikuje transpilační transformace na základnu kódu. Používáme balíček preset-env – je dodáván s předkonfigurovanou sadou transformací, která má pokrýt většinu základů.

{"presets": }

Čas na testovací jízdu

Přidejte do index.js trochu novodobého JavaScriptu a otestujte program na živém kódu. Kód doprovázející tento krok by ve starších prohlížečích nefungoval – po dokončení se implicitní funkce nahradí normální deklarací, jak ukazuje obrázek.

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

Nastavení cílení

preset-env aplikuje většinu transpirací ve výchozím nastavení: cílem produktu je vytvořit univerzálně kompatibilní JavaScript bez ohledu na náklady na šířku pásma a výkon. Jeho konfiguraci můžete změnit předáním objektu target – níže uvedený příklad se zaměřuje na konkrétní verze prohlížečů Chrome a IE.

{"presets": ]}

Pokročilé cílení

Cílení na prohlížeče se v nástroji Babel neomezuje pouze na Chrome a Internet Explorer. Díky spolupráci s browserslistem mohou vývojáři kombinovat z více než desítky cílů, jak je uvedeno níže.

Jména nerozlišují velká a malá písmena:

• Android pro Android WebView.
• Baidu pro Baidu Browser.
• BlackBerry nebo bb pro prohlížeč Blackberry.
• Chrome pro Google Chrome.
• ChromeAndroid nebo and_chr pro Chrome pro Android.
• Edge pro Microsoft Edge.
• Electron pro framework Electron. Bude převeden na verzi Chrome.
• Explorer nebo ie pro Internet Explorer.
• ExplorerMobile nebo ie_mob pro Internet Explorer Mobile.
• Firefox nebo ff pro Mozilla Firefox.
• FirefoxAndroid nebo and_ff pro Firefox pro Android.
• iOS nebo ios_saf pro iOS Safari.
• Node pro Node.js.Opera pro Opera.
• OperaMini nebo op_mini pro Opera Mini.
• OperaMobile nebo op_mob pro Opera Mobile.
• QQAndroid nebo and_qq pro QQ Browser pro Android.
• Safari pro desktop Safari.
• Samsung pro Samsung Internet.
• UCAndroid nebo and_uc pro UC Browser pro Android.

Pokročilé cílení, část druhá

Prohlížeč může přijímat i pokročilé dotazy. Na jeho domovské stránce jsou uvedeny konfigurační možnosti, z nichž téměř všechny lze použít i uvnitř Babelu úpravou babelrc. Dotazy lze vyhodnocovat lokálně, pokud je na pracovní stanici nainstalován npx.

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

Automatická transpozice

Muset vyvolávat Babel ručně se rychle omrzí. Nástroj nodemon sleduje prostředky souborového systému a při zjištění změn spouští příkazy. Teoreticky se přidání podpory nodemonu řeší malou změnou v souboru package.json.

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

Kontrola přítomnosti

Některé pracovní stanice mají nodemon nainstalovaný globálně. Pokud tomu tak není, vyvolání programu přinese chybové hlášení podobné tomu, které je uvedeno níže. Naštěstí lze nasazení programu nodemon snadno provést pomocí příkazu npm install.

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

Zkontrolujte funkčnost

V okně terminálu spusťte příkaz npm start a pokračujte ve změně obsahu souboru index.js pomocí editoru, jako je gedit nebo Visual Studio Code. Po uložení nodemon vypíše stavovou informaci.

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

Oprava transpirace

Ačkoli by detekce nodemonu měla v tomto okamžiku fungovat bezchybně, obsah souboru index.js, který se nachází v lib, se neaktualizuje. To je způsobeno nicotností babel-node – neodevzdává transpilované soubory na disk. Místo toho spustí upravenou verzi rozhraní Node CLI, která s transpilovanými soubory pracuje.

Transpilovat kód programově

Babel není omezen na práci v příkazovém řádku. Pokud jsou nainstalovány správné balíčky, lze kód transpilovat i z jiného programu. Úryvek doprovázející tento krok aplikuje na vstupní řetězec sadu základních transformací. Mějte na paměti, že konfigurační nastavení se obvykle získávají ze souboru 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;});

Transpilovat celé soubory

Zdrojový kód se obvykle neukládá do řetězcových proměnných. Babel API s tím počítá prostřednictvím sady funkcí souvisejících se soubory, které se vzdávají vstupního řetězce pro proměnnou s názvem souboru. Výsledky se však vracejí jako normální proměnná JavaScriptu.

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

Synchronní a asynchronní

Babel 7 zavedl synchronní a asynchronní verze většiny volání API. Ujistěte se, že jste si vybrali tu správnou pro své potřeby – zatímco transpilování malých příkladů lze provést za běhu, pustit Babel do složitějších souborů může snadno vést ke zpoždění v řádu desítek sekund.

Poznejte jednotlivé zásuvné moduly

Pokud vás někdy bude zajímat, co se děje na pozadí, stačí navštívit tuto stránku. Najdete na ní seznam všech zásuvných modulů, které jsou v současné době obsaženy v distribuci Babel, a také několik rad pro všechny, kteří si chtějí vytvořit vlastní zásuvný modul.

Vynechejte specifika TypeScriptu

Babel se neomezuje jen na transpilování novodobých prvků JavaScriptu. Produkt obsahuje engine TypeScript s omezenými funkcemi. Odstraňuje typové informace a nahrazuje pokročilé prvky. Bohužel Babel neprovádí kontrolu typů – tím se eliminuje jedna z nejvýznamnějších výhod jazyka TypeScript.

{"presets": }

Spustit Babel online

Přestože transpilační operace obvykle fungují bez problémů, občas se vyskytnou problémy. V takovém případě je užitečný REPL jazyka Babel. Spustí Babel v prohlížeči vaší pracovní stanice a zobrazí vstup a výstup hned vedle sebe.

Poznejte bolestivá místa

V úvodu jsme si vysvětlili, že Babel vidí široké využití v různých projektech. Tým správců systému Babel zjednodušuje aktualizace verzí pomocí podrobného protokolu změn. Pokud používáte Babel programově, nezapomeňte se seznámit s průvodcem aktualizací API.

Tento článek původně vyšel v 283. čísle časopisu o kreativním webdesignu Web Designer. Číslo 283 si můžete koupit zde nebo si Web Designer předplatit zde.

• Jak kódovat rychlejší a lehčí JavaScript
• 5 úžasných Javascriptových API
• 27 prvotřídních šablon webových stránek

.