Začínáme s Babelem 7

Feb 2, 2026

jak

JavaScript je jedinečný kvůli šíři ekosystému. Zatímco nové normy přidávají syntaktický cukr, dostat je podporované na prohlížečích, trvá čas. Babel dělá tento problém prostřednictvím automatického transpilation.

Myšlenka produktu je jednoduchá: Babel bere v ES6 nebo ES7 kód a nahrazuje nové syntaktické prvky s emulačním kódem. Jeho výstup potvrzuje klasický JavaScript Syntaxe a běží na starších prohlížečích, jako je aplikace Internet Explorer.

Počáteční vydání Babela vzala svět bouří. Brzy poté, co se poprvé objevil, různé rámce jako reagovat, VUE a EMBER to objali. Vývojáři často používají výrobek, aniž by věděli, že to funguje v pozadí - více než jeden populární projekt NPM má závislost na Babelu.

Jak udělat aplikaci

Tyto závislosti transformovaly proces vydání předchůdce do konfliktního záležitosti. Verze 7, stále spravuje malým týmem správce, tak se snažil být tak slučitelná, jak je to jen možné. Změny porušení jsou málo a daleko, zatímco kvalita generování kódu zůstává vysoká (pokud pracujete s týmem, uložení dokumentů cloudové úložiště vám pomůže zůstat soudržné).

Pokud jste předtím nepracovali s Babelem, nechte to být váš průvodce. Schopnost používat pokročilé funkce JavaScriptu bez obavy kompatibility činí mnohem snazší.

Chcete nějaké nástroje pro zefektivnění procesu? Náš průvodce podle nejlepšího Webové stránky Builder. pomůže. Chcete dlouhodobou podporu? Získejte právo web hosting servis.

01. Kontrola verze

Babel obvykle žije v prostředí runtime uzlu. Začněme zaškrtnutím použitými verzemi. Výstup poskytuje stav verzi nalezený na pracovní stanici Ubuntu 14.04 používané k vytvoření následujícího článku. To není pedantry - postava doprovázející tento krok ukazuje, že babel tým upustil podporu pro poměrně málo node.js verzi.

 Tamhan @ Tamhan-ThinkPad: ~ $ uzel --Version
v8.14.0.
Tamhan @ Tamhan-ThinkPad: ~ $ npm --version
6.4.1

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

Jedna změna rozbití ve verzi 7 zapojila přesun balíčků Babel do vlastního oboru názvů. Starší balíčky nebyly odstraněny z různých repozitářů. To je důležité, protože použití názvů starších balíčků vede k situaci uvedené na obrázku doprovázejícího tento krok.

 Tamhan @ Tamhan-ThinkPad: ~ / WorkspaceB7 $ NPM
Instalace --Save-dev @ babel / core @ babel / cli @
Babel / Preset-env @ babel / uzel
. . .
+ @ babel / jádro @ 7.2.0
+ @ babel / uzel @ 7.2.0
+ @ babel / cli @ 7.2.0
+ @ babel / preset-env @ 7.2.0

03. Přidat akci budování

Výše uvedený krok předpokládá, že pracujete uvnitř projektu NPM. V tomto případě je běžící babel přes akci sestavení snadné. Otevřeno Package.json. a upravit jej, jak bylo prokázáno v níže uvedeném kódu:

 {
. . .
"Hlavní": "index.js",
"skripty": {
"Test": "ECHO" Chyba: Žádný test
Zadáno "& amp; exit 1",
"Build": "Babel index.js -d lib"

},

04. Transpilový kód ručně

Uvedení babel do práce zahrnuje vypalování akcí budování. To je nejlépe dosaženo pomocí příkazu NPM Run. . \ T -d. hodnota informuje babel, že výsledky musí být umístěny v lib. Složka - Obrázek doprovázející tento krok ukazuje, že složka bude vytvořena na letu.

 Tamhan @ Tamhan-ThinkPad: ~ / WorkspaceB7 $ NPM
Běh Build.
& gt; [email protected] Sestava / Domů / Tamhan /
WorkSpaceB7.
& gt; babel index.js -d libs
Úspěšně zkompilovaný 1 soubor s babelem.

05. Otázka konfigurace

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

06. Konfigurace Babelrc

Babel se konfiguruje pomocí sady pluginů, z nichž každý platí transformace transformace na kódovou základnu. Používáme Preset-env Balení - Dodává se s předem nakonfigurovanou sadou transformací určených k pokrytí většiny základen.

 {
"Předvolby": ["@ babel / preset-env"]
}

07. Čas na zkušební jízdu

Přidat trochu nového věku JavaScript na index.js otestovat program proti nějakému živému kódu. Kodex doprovázený tento krok by nefungoval na starších prohlížečích - pokud je provedeno, implicitní funkce se nahrazuje a normální deklarace, jak je znázorněno na obrázku.

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

08. Nastavení cílení

Preset-env Ve výchozím nastavení se použije většinu transppilací: cílem produktu je vytvořit všeobecně kompatibilní JavaScript bez ohledu na náklady na šířku pásma a výkonnosti. Jeho konfigurace můžete změnit průchodem Cíle Objekt - příklad níže cílí specifické verze chromu a tj.

 {
"Předvolby": [
[
"@ babel / preset-env",
{
"Cíle": {
"Chrome": "58",
"Ie": "11"
}
}
]
]
}

09. Pokročilé cílení

Cílení prohlížeče Babel není omezen na Chrome a Internet Explorer. Díky spolupráci s prohlížeč Vývojáři mohou míchat a zápasit z více než tucet cílů, jak je uvedeno níže.

Jména jsou necitlivá písmena:

Android. pro Android Webview.
Baidu pro prohlížeč BAIDU.
Ostružina nebo bb. Pro BlackBerry Browser.
Chrom pro Google Chrome.
Chromeandroid nebo and_chr. Pro Chrome pro Android.
Okraj pro Microsoft Edge.
Elektron pro elektronový rámec. Bude převedena na chromovou verzi.
Badatel nebo tj pro aplikaci Internet Explorer.
ExplorerMobile nebo ii_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.
Uzel pro node.js.opera pro operu.
Opera Mini nebo op_minini. pro opery mini.
Opernamobile nebo op_mob. pro operní mobilní telefon.
QQandroid. nebo and_qq. Pro QQ Browser pro Android.
Safari pro stolní safari.
Samsung. pro Samsung Internet.
Ucandroid. nebo and_uc. pro UC Browser pro Android.

10. Pokročilé cílení, dvě části

Seznam prohlížeče může také absolvovat pokročilé dotazy. Jeho domovská stránka Seznam možností konfigurace, téměř všechny mohou být také použity uvnitř Babel modifikací babelrc. . Dotazy lze vyhodnotit lokálně, pokud vaše pracovní stanice má nainstalovaný NPX.

 {
"Cíle": "& gt; 0,25%, ne mrtvé"
}

11. Automatické transpilace

Musím se vyvolat babel ručně, rychle je únavný. Nástroj Utility monitoruje zdroje souborového systému a vypálí příkazy jako změny zjištěny. Teoreticky, přidání podpory Nodemon je zpracována malou změnou Package.json. .

 {
"Jméno": "WorksPaceB7",
. . .
"Hlavní": "index.js",
"Skripty":
{
"Start": "nodemon-exec babel-uzel
index.js ",

12. Zkontrolujte přítomnost

Některé pracovní stanice mají nudemon nainstalován globálně. Pokud tomu tak není, vyvolání programu bude mít chybovou zprávu podobnou níže uvedeném obrázku. Naštěstí nasazení nudemon snadno provede přes NPM Install. příkaz.

 Tamhan @ Tamhan-ThinkPad: ~ / WorkspaceB7 $ NPM
Instalace --Save-dev nodemon

13. Zkontrolujte funkčnost

Vypálit NPM START. V okně terminálu a pokračujte pro změnu obsahu index.js. s editorem jako gedit nebo Visual Studio Code. . Po ukládání, nudemon informace o stavu.

 [NODEMON] Restartování z důvodu změn ...
[nodemon] start `babel-uzel index.js`
[nodemon] čistý výstup - čekání na změny
Před restartem

14. Opravte transpilaci

Zatímco nudemon Detekce by měla v tomto okamžiku pracovat bezchybně, obsah index.js. soubor, který se nachází lib. Neaktualizujte. To je způsobeno očividou babel-uzel - Nezdá se přes transpiled soubory na disk. Místo toho vypustí upravenou verzi uzlu CLI, která pracuje s transpiled soubory.

15. Transpilový kód programově

Babel není omezen na práci na příkazovém řádku. Pokud jsou instalovány správné balíčky, může být kód také překlenován z jiného programu. Úryvek doprovázející tento krok aplikuje soubor základních transformací na vstupní řetězec. Mějte na paměti, že nastavení konfigurace, obvykle, jsou získány z babelrc. soubor.

 var babel = požadovat ("@ babel / jádro");
import {transform} z "@ babel / jádro";
import * jako babel z "@ babel / core";
babel.transform ("kód ();", možnosti,
funkce (Err, výsledek) {
výsledky.Code;
výsledek;
výsledek.
});

16. Transpiilní celé soubory

Zdrojový kód obvykle není uložen v řetězcích proměnných. Účty API BABEL API pro to prostřednictvím sady funkcí souvisejících s souboru, které vzdušnou vstupní řetězec pro proměnnou s názvem souboru. Výsledky se však vrátí jako normální proměnná JavaScript.

 babel.transFormFile ("filename.js", možnosti,
funkce (Err, výsledek) {
výsledek; // = & gt; {kód, mapa, AST}
}
);

17. Sync a async

Babel 7 představil synchronní a asynchronní verze většiny volání API. Ujistěte se, že si můžete vybrat správnou pro vaše potřeby - zatímco transpiling malé příklady lze provést na mouchu, nastavení Babel volné na složitějších souborech může snadno vést k zpožděním běží do desítek sekund.

18. Další informace o jednotlivých pluginech

Měli byste někdy ocitnout, že se o tom, co se stane v pozadí, jednoduše navštivte tato stránka . Poskytuje seznam všech pluginů, které jsou v současné době obsaženy v distribuci Babel, a také obsahuje několik tipů pro všechny, kteří se snaží vytvořit svůj vlastní plugin.

19. Odstraňte specifika strop

Babel není omezen na transpilentní prvky JavaScriptu New-Age. Výrobek obsahuje strojový strypscript. Urpuje informace o psaní a nahrazuje pokročilé prvky. Babel bohužel nevykonává kontrolu typu - to eliminuje jeden z nejvýznamnějších výhod jazyka strypscript.

 {
"Předvolby": ["@ babel / přednastavení"]
}

20. Spusťte Babel online

Zatímco transpilační operace obvykle fungují hladce, někdy se vyskytují problémy. V tomto případě Babel repl je užitečné. Spustí Babel v prohlížeči pracovní stanice a zobrazuje vstup a výstup přímo vedle sebe.

21. Další informace o bodech bolesti

Naše úvod vysvětlil, že Babel vidí rozsáhlé použití v různých projektech. Babelovo správce tým zjednodušuje verzi upgrade s a Podrobný log . Pokud používáte Babel programově, nezapomeňte konzultovat Průvodce upgradem API .

Tento článek byl původně publikován v čísle 283 časopisu Creative Web Design Web Designer. . Prodám vydání 283 zde nebo Přihlásit se zde web designer zde .

Související články:

Jak kódovat rychleji, lehčí JavaScript
5 Úžasné JavaScript API
27 Šablony webových stránek top-třídy

Začínáme s Babelem 7

01. Kontrola verze

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

03. Přidat akci budování

04. Transpilový kód ručně

05. Otázka konfigurace

06. Konfigurace Babelrc

07. Čas na zkušební jízdu

08. Nastavení cílení

09. Pokročilé cílení

10. Pokročilé cílení, dvě části

11. Automatické transpilace

12. Zkontrolujte přítomnost

13. Zkontrolujte funkčnost

14. Opravte transpilaci

15. Transpilový kód programově

16. Transpiilní celé soubory

17. Sync a async

18. Další informace o jednotlivých pluginech

19. Odstraňte specifika strop

20. Spusťte Babel online

21. Další informace o bodech bolesti

jak - Nejoblíbenější články

Služoky Google: Jak navrhnout dokument

Kurita Návody: Naučte se základy softwaru digitálního umění

6 Rychlé tipy pro zlepšení kresby štětcem

Jak vytvořit text glitch a obrazové efekty v CSS

Vytvořit reagující uspořádání s CSS Grid

Jak nakreslit velkou kočku s pastely

Jak vytvořit monstrum stylu labyrintu Pan

Jak zvládnout 3D ventilátor umění

Kategorie