Podívejte se na náš videokurz Babel 7 a Webpack 4:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD
Pozvedněte své znalosti JavaScriptu na další úroveň:
https://www.udemy.com/course/javascript-boost/?referralCode=06AF8499F008CC241201
Babel je řetězec nástrojů, který se používá především k převodu kódu ECMAScript 2015+ na zpětně kompatibilní verzi jazyka JavaScript v současných i starších prohlížečích nebo prostředích. ECMAScript 2015+ se rovná ES6+.
Babel si můžete představit jako překladač. ES6+ JS nám nabízí mnoho nových funkcí a syntaxí. Mohou nesmírně zlepšit efektivitu našeho vývoje. V tuto chvíli je však většina těchto nových funkcí v prohlížečích nerozpoznatelná. Abychom našli rovnováhu mezi kompatibilitou a pohodlím a efektivitou vývoje, byl vyvinut Babel.
Naši programátoři píší kódy v ES6+ a pak požádají Babel, aby je přeložil do kódů srozumitelných prohlížečům.
Babel sám zvládne pouze překlad nových syntaxí. ES6+ také přidalo mnoho nových API jako Promise, Map, Object.assign() atd. Nové API znamená nové objekty, vlastnosti a metody. API je pouze módní název. Nenechte se jím zastrašit. Abychom se s nimi mohli vypořádat, musíme tato API přidat do ES5. Tuto práci vykonává asistent Babel. Později si ukážeme, kdo tento asistent je.
Takže si zapamatujte tento závěr: Babel překládá nové syntaxe a jeho asistent zpracovává nová API.
Nejprve přejděte na oficiální webové stránky Babelu a klikněte na tlačítko Docs.
Babel zvládá překlad syntaxe. Polyfill zpracovává chybějící funkce. Takže odpověď na otázku, kterou jsme nechali předtím: pomocníkem Babela je polyfill.
Kromě překladu ES6+ si Babel poradí také s JSX a TypeScriptem. Přichází tedy další pojem: předvolba. Preset je překlad, který Babel používá. Řídí způsob, jakým Babel provádí překlad.
Takže nyní jste se naučili dva důležité pojmy jazyka Babel: preset a polyfill.
Napříště si nainstalujeme Babel.
Instalace a konfigurace Babelu:
Toto je instalační příkaz navržený v oficiální příručce Babelu. Pokud se pozorně podíváte, zjistíte, že se ve skutečnosti instalují čtyři balíčky, tři jako vývojové závislosti a jeden jako produkční závislost.
- npm install – save-dev @babel/core
- npm install @babel/cli
- npm install @babel/preset-env
- npm install – save @babel/polyfill
Babel/core, přesně jak napovídá jeho název, je jádrem celého programu Babel.
Babel/cli je rozhraní příkazového řádku. Používáme ho ke komunikaci se softwarem Babel.
Babel sám neumí překládat kódy ES6. Vyžaduje zásuvné moduly, které mu řeknou jak. Zásuvných modulů je celá řada. Jejich instalace a nastavení jednoho po druhém je pracné. Proto je nejlepším řešením použít předvolbu Babel. Preset je kolekce zásuvných modulů. Předvolba, kterou používáme, je preset-env.
Babel/preset-env je standard, který Babel 7 používá k překladu ES6+ do ES5. V Babelu 7 preset-env nahradil preset-2015/6/7 atd.
Babel/polyfill slouží k přidávání funkcí ES6+ do ES5. Proč to tedy musíme dělat?“
Nová syntaxe není jediným rozdílem mezi ES6 a ES5. ES6 již získalo mnoho nových API. API je jen módní název pro vestavěné objekty. Tyto nové vestavěné objekty jsou velmi užitečné, ale problém je, že v prostředí ES5 neexistují.
Jediným řešením je přidat tyto vestavěné objekty do prostředí ES5. K tomu slouží polyfill.
Zapneme si vlastní terminál a založíme projekt.
Nejprve zapneme terminál a vytvoříme kořenový adresář projektu. Pak do něj vložíme CD a npm init.
Následuje zkopírování čtyř instalačních příkazů z oficiálního manuálu Babel a jejich vložení do terminálu.
Po dokončení instalace byste měli vidět tyto čtyři instalované balíčky:
Otevřeme náš projekt ve VSC a zkontrolujeme balíček.json.
Cli, core a preset-env jsou vývojové závislosti. polyfill je produkční závislost.
Polyfill si můžete představit jako zdrojový kód. Jsou v něm uloženy zdrojové kódy všech nových funkcí es6.
ES5 + polyfill = ES6.
Předtím, než budeme moci používat Babel, jej musíme nakonfigurovat. Nejlepším způsobem, jak to udělat, je vytvořit soubor pro uložení konfiguračních informací systému Babel.
V systému Babel 6 ukládáme konfigurační informace do souboru .babelrc nebo package.json.
Babel 7 nám nabízí nové řešení: babel.config.js.
Příručka Babel nám nabízí šablonu pro vytvoření souboru babel.config.js. Stačí ji zkopírovat do kořenové složky našeho projektu.
Nejprve nám modul exportuje objekt.
Poté v něm definujeme vlastnost presets. Hodnota presets je pole.
Vnitř pole vložíme další pole.
Prvním prvkem podřízeného pole je předvolba, kterou chceme použít. Zde jej nastavíme na @babel/env nebo @babel/preset-env.
Druhým prvkem je objekt config. Uvnitř něj jsou dvě vlastnosti: targets a useBuiltIns. Targets slouží ke konfiguraci prohlížečů a useBuiltIns k polyfillům.
Nyní jsme nainstalovali a nakonfigurovali Babel.
Následuje testování.
V kořenovém adresáři projektu vytvoříme nový soubor: es6.js.
Poté zapneme terminál a zadáme příkaz babel: npx babel es6.js. Takto dostaneme:
ES6 let byl převeden na ES5 var.
NPX babel je stejný jako node_modules/.bin/babel
Nyní jsme úspěšně „babelovali“ náš první soubor ES6.
Přeložený soubor můžete vyvést jako samostatný soubor. V takovém případě potřebujete -o nebo – output-dir.
-o a – output-file mohou překládat vždy jen jeden soubor. Při reálném vývoji můžete chtít ukládat soubory ES6 do jednoho adresáře a překládat každý soubor v tomto adresáři.
Například v kořenovém adresáři projektu vytvoříme dva podřízené adresáře: ES6 a ES5. Naše soubory ES6 zapisujeme do adresáře ES6. Poté je „babelujeme“ do dir ES5. Soubory HTML propojí soubory JS z dir es5.
V tomto případě potřebujeme příkaz npx babel ES6 -d ES5 nebo npx babel ES6 – out-dir ES5.
Nyní budou všechny soubory v dir ES6 „babeled“ do dir ES5.
Dále si ukážeme, co pro nás může udělat polyfill.
Toto je soubor, který chceme babelovat:
Používá spoustu API ES6, které v ES5 neexistují. Jediný způsob, jak umožnit jejich fungování v prostředí ES5, je přidat zdrojové kódy těchto nových rozhraní API do prostředí ES5. K tomu slouží polyfill a také proto je polyfill nainstalován jako produkční závislost. V produkci jej skutečně potřebujeme.
Tady je méně přesná analogie, která vám pomůže pochopit, proč potřebujeme polyfill.
Máme program jQuery. Náš program jQuery nemůžeme spustit přímo. Musíme nejprve propojit zdrojový kód jQuery. Polyfill je zdrojový kód jQuery, který propojíme.
Toto je „babylónský“ soubor ES5, který jsme dostali:
Vidíte všechny ty potřebné soubory? Jsou načítány pomocí polyfill. Ale soubor „babeled“ nelze použít přímo soubory HTML. Musíme je svázat pomocí balíčku Webpack. Ale všechny potřebné „zdrojové kódy API“ byly načteny.
Toto nastavení se řídí pomocí proeprty useBuiltIns v souboru babel.config.js. Tato vlastnost má tři hodnoty: usage, false a entry.
Usage je nejlepší a nejčastěji používaná hodnota. Je to také to, co doporučujeme.
Kromě použití má useBuiltIns dvě další hodnoty: false a entry.
False vypne polyfill. To znamená, že potřebná rozhraní API musíte propojit ručně. To rozhodně nechcete dělat.
Pokud použijete entry, musíte „vyžadovat“. @babel/polyfillEntry na začátku souboru. Pak babel nejprve zkontroluje vlastnost targets, aby zjistil, jaké jsou cílové prohlížeče. Načte všechna rozhraní API, která nejsou cílovým prohlížečem podporována. Je zřejmé, že tímto způsobem získáme spoustu nepotřebných API.
Takže shrnuto, nastavte useBuiltIns na usage a Babel se postará o zbytek za vás.
Podívejte se na náš CELÝ kurz Babel 7 a Webpack 4 na Udemy:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=MDM_BABEL_P
Podívejte se na náš CELÝ kurz vývoje webových stránek na Udemy:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD
.