průvodce pro začátečníky Babel

tento článek představuje Babel, Překladač JavaScriptu, který vývojářům umožňuje používat JavaScript nové generace dnes.

při vytváření webových aplikací může být frustrující psát JavaScript. Musíme přemýšlet o funkcích dostupných v prohlížečích, na které cílíme, a o tom, co se stane, když funkce není implementována. Někteří lidé by doporučili jednoduše ji nepoužívat, což je bolestivá zkušenost většinu času, pokud stavíme něco komplikovaného.

naštěstí nám některé nástroje umožňují přestat se starat o to, co je podporováno, a jen napsat nejlepší kód, jaký můžeme. Říká se jim transpilátory. Transpiler je nástroj, který bere zdrojový kód jako vstup a vytváří nový zdrojový kód jako výstup, s jinou syntaxí, ale sémanticky co nejblíže — nebo ideálně ekvivalentní-originálu.

Babel je do značné míry standardní transpiler pro překlad moderního JavaScriptu (ES2015+) do kompatibilních implementací, které běží ve starých prohlížečích. Je to perfektní řešení, pokud se chcete soustředit pouze na psaní JavaScriptu.

a ačkoli hlavním cílem Babel je přeložit nejnovější standardy ECMAScript (ES) pro staré — nebo někdy aktuální-prohlížeče, může to udělat více. Existuje ekosystém předvoleb a pluginů, které umožňují přidání nestandardních funkcí. Každý plugin je nová funkce / transformace k dispozici pro váš kód, a předvolby jsou jen sbírka pluginů.

Začínáme

existují různé způsoby, jak nastavit Babel v závislosti na vašem projektu a nástrojích, které používáte. V tomto článku vám vysvětlíme, jak nastavit Babel pomocí CLI, i když používáte systém sestavení nebo rámec, Můžete si prohlédnout konkrétní pokyny na oficiálních stránkách. Většinu času je CLI nejrychlejší a nejjednodušší způsob, jak začít, takže pokud jste prvním uživatelem, neváhejte pokračovat.

prvním krokem k nastavení Babel v projektu je instalace balíčku pomocí npm a jeho přidání jako závislosti dev. Za předpokladu, že máte pracovní uzel.prostředí js již existuje, je to jen otázka spuštění následujícího terminálu:

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

tím se vytvoří adresář (babel-test) změnit do adresáře, inicializovat npm projektu (čímž se vytváří package.json soubor) a pak nainstalovat babel-cli jako dev závislost.

pokud potřebujete pomoc s výše uvedeným, obraťte se na naše návody k instalaci uzlu a práci s npm.

Další, můžeme otevřít package.json přidat build příkaz pro naše npm skripty:

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

To bude trvat zdrojové soubory z src adresáře a výstup výsledek v dist adresář. Pak to můžeme provést jako:

npm run build

ale počkej! Před spuštěním Babel musíme nainstalovat a nastavit pluginy, které transformují náš kód. Nejjednodušší a nejrychlejší způsob, jak toho dosáhnout, je přidat předvolbu Env, která vybere příslušné Pluginy v závislosti na cílových prohlížečích, které uvedete. Lze jej nainstalovat pomocí:

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

poté vytvořte soubor .babelrc v kořenovém adresáři projektu a přidejte předvolbu:

{ "presets": }

soubor .babelrc je místo, kam jste vložili všechna nastavení pro Babel. Budete to používat především pro nastavení předvoleb a pluginů, ale je k dispozici mnohem více možností. Kompletní seznam můžete zkontrolovat na stránce Babel API.

Vezměte prosím na vědomí, že v závislosti na vašem operačním systému budou soubory začínající tečkou ve výchozím nastavení skryty. Pokud to je problematické pro vás (nebo pokud si prostě raději méně souborů), můžete si dát své Babel nastavení v package.json souboru, pod babel klíč, jako tak:

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

a Konečně, pojďme vytvořit adresáře a soubory Babel je očekával, že najít:

mkdir src dist

A dát mu něco k transformaci:

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

Tento příklad používá destructuring úkol vyměnit hodnoty dvou proměnných.

Běžecké Babel

Teď, že máte připravený-k-používat Babel instalace, můžete spustit build příkaz pro spuštění kompilace:

npm run build

To bude mít kód z src/main.js, transformovat to do ES5 kód a výstup transformované kód dist/main.js.

Tady je to, co to vyrábí:

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

Jak můžete vidět, let byl nahrazen var a Babel zavedla dočasné proměnné (označen podtržítko) usnadňovat výměnu.

a to je vše. Kód, který napíšete do adresáře src, bude přeložen do předchozích verzí jazyka. Ve výchozím nastavení, pokud do předvolby nepřidáte žádné možnosti, načte všechny transformace. Cílové prohlížeče můžete také označit následovně:

{ "presets": } }] ]}

tím se načte požadované transformace pro podporu nejnovějších dvou verzí každého prohlížeče a Safari větší nebo rovna verzi 7. Dostupné možnosti pro cílové prohlížeče najdete v úložišti Browserlist.

Babel Ecosystem: Rychlý přehled

jak jste si všimli v předchozí části, Babel při instalaci sám nic neudělá. Abychom dosáhli požadovaného chování, musíme nainstalovat sadu pluginů, nebo můžeme použít předvolby, což jsou předdefinované sady pluginů.

každá funkce, kterou chcete zahrnout, bude obvykle ve formě pluginu. Některé příklady pro ES2015 zahrnují:

• konstanty
• šipka funkce
• blok-rozsahem funkcí
• třídy
• –
• šíření
• šablony literály

Viz stránky s Pluginy v Babel Docs pro kompletní seznam.

ale někdy nechcete zahrnout všechny pluginy jeden po druhém. Existují tedy přednastavené předvolby, které usnadní proces instalace každého pluginu.

tři oficiální předvolby, které jsou v současné době k dispozici, jsou:

• Env
• React
• Flow

Env je nejčastěji používaný a ten, který jsme zde použili. Automaticky načte všechny potřebné transformace, aby byl váš kód kompatibilní v závislosti na cílených prohlížečích.

react preset transformuje kód typicky nalezený v projektech React, hlavně přidává kompatibilitu s anotacemi Flow a JSX.

a konečně, předvolba toku se používá k vyčištění kódu z anotací typu toku (i když nekontroluje, zda jsou typy platné nebo ne.)

Babel Polyfill

Tam jsou JavaScript funkce, která nemůže být transformována syntakticky, obvykle proto, že neexistuje žádná obdoba funkce — například, Sliby a generátor funkcí.

tyto funkce musí být implementovány v prohlížeči knihovnou, která má být použita ve vašem kódu, a to je práce polyfill.

Babel polyfill je tvořen core-js a Runtime regenerátoru. Společně pokrývají všechny funkce v ES2015+.

Pokročilé použití

jak již bylo zmíněno, Babel lze také použít k transformaci funkcí, které dosud nebyly implementovány v jazyce. Dobrým příkladem je návrh třídy fields (v současné době ve fázi TC39 3: kandidát). To je obzvláště populární mezi Reagovat devs, protože to odstraňuje nutnost výslovně vázat metody na konkrétní součást, a také znamená, že složka je state může být deklarován jako pole třída (potenciálně eliminuje potřebu konstruktoru).

Pro ty z vás, kteří chtějí využít třídy polí dnes, budete muset přidat babel-plugin-transformovat-třídy-vlastnosti jako dev závislost:

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

Byste také aktualizovat .babelrc soubor takto:

{ "presets": , "plugins": }

Nyní můžete psát:

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> ); }}

A tím to nekončí. Babel můžete také použít k přidání nových vlastních funkcí do jazyka, jak ukazuje naše výukové porozumění ASTs vytvořením vlastního pluginu Babel.

alternativy

psaní moderních webových aplikací někdy vyžaduje více než funkce dostupné v JavaScriptu. Jiné jazyky lze také přeložit do kompatibilního JavaScriptu, ale také implementovat další užitečné funkce.

nejoblíbenější možností je TypeScript, což je běžný JavaScript, který implementuje moderní funkce ES, ale také přidává další, zejména pokud jde o bezpečnost typu.

na druhé straně existují zcela odlišné jazyky v různých kategoriích, od funkčních jazyků, jako je PureScript, po objektově orientované jako Dart.

pro hlubší přehled alternativních jazyků se podívejte na 10 jazyků, které kompilují do JavaScriptu.

Závěr

Babel je skvělá volba pro psaní moderních aplikací, zatímco ještě slouží JavaScript, který lze chápat všechny vývojáře a široké škály prohlížečů kód potřebuje ke spuštění.

Babel není užitečný pouze pro transformaci ES2015 + na předchozí verze jazyka – jak v prohlížeči, tak na platformách, jako je Node.js-ale také pro přidávání nových funkcí, které nejsou součástí standardu. Chcete-li zjistit, co mám na mysli, stačí se podívat na adresář npm a najít všechny dostupné pluginy nebo Předvolby Babel.

Jako JavaScript se vyvíjí tak rychlým tempem, je zřejmé, že výrobci prohlížečů bude potřebovat chvíli implementovat nejnovější funkce. Dát Babelu místo ve vaší sadě nástrojů znamená, že dnes můžete psát špičkový JavaScript, s vědomím, že neopouštíte žádného ze svých uživatelů. Co nemilovat?