Nézze meg a Babel 7 és Webpack 4 videótanfolyamunkat:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD
Vissza a következő szintre a JavaScript-ismereteidet:
https://www.udemy.com/course/javascript-boost/?referralCode=06AF8499F008CC241201
A Babel egy olyan eszköztár, amelyet elsősorban arra használnak, hogy az ECMAScript 2015+ kódot a JavaScript visszafelé kompatibilis verziójává alakítsák a jelenlegi és régebbi böngészőkben vagy környezetekben. Az ECMAScript 2015+ az ES6+-nak felel meg.
A Babelre úgy is gondolhatunk, mint egy fordítóra. Az ES6+ JS számos új funkciót és szintaxist kínál számunkra. Ezek óriási mértékben javíthatják a fejlesztésünk hatékonyságát. De jelenleg ezen új funkciók többsége felismerhetetlen a böngészőkben. A kompatibilitás és a fejlesztés kényelme és hatékonysága közötti egyensúly megtalálására fejlesztették ki a Babel-t.
A programozók ES6+ nyelven írnak kódokat, majd megkérik a Babelt, hogy fordítsa le azokat a böngészők számára érthető kódokra.
A Babel maga csak az új szintaxisok fordítását tudja kezelni. Az ES6+ számos új API-t is hozzáadott, mint például Promise, Map, Object.assign(), stb. Az új API új objektumokat, tulajdonságokat és metódusokat jelent. Az API csak egy divatos név. Ne ijedjen meg tőle. Ahhoz, hogy foglalkozni tudjunk velük, ezeket az API-kat hozzá kell adnunk az ES5-öshöz. Ezt a munkát a Babel egyik asszisztense végzi. Később megmutatjuk, hogy ki ez az asszisztens.
Ezt a következtetést tehát ne feledd: A Babel lefordítja az új szintaxisokat, és az asszisztense kezeli az új API-kat.
Menjünk először a Babel hivatalos weboldalára, és kattintsunk a Dokumentumok gombra.
A Babel kezeli a szintaxis fordítását. A Polyfill kezeli a hiányzó funkciókat. Tehát válasz az előbbi kérdésre: a Babel asszisztense a polyfill.
A Babel az ES6+ fordításán kívül a JSX és a TypeScript fordítását is tudja kezelni. Tehát itt jön egy másik fogalom: a preset. A preset a Babel által használt fordítás. Ez szabályozza, hogy a Babel hogyan végzi a fordítást.
Most tehát megtanultad a Babel két fontos fogalmát: preset és polyfill.
Most telepítsük a Babelt.
Babel telepítése és konfigurálása:
Ez a Babel hivatalos kézikönyvében javasolt telepítési parancs. Ha alaposan megnézzük, láthatjuk, hogy valójában négy csomagot telepítünk, hármat fejlesztési függőségként, egyet pedig termelési függőségként.
- npm install – save-dev @babel/core
- npm install @babel/cli
- npm install @babel/preset-env
- npm install – save @babel/polyfill
Babel/core, ahogy a neve is sugallja, az egész Babel program magja.
A babel/cli a parancssori felület. Ezt használjuk a babel-lel való kommunikációra.
A babel maga nem tudja, hogyan kell lefordítani az ES6 kódokat. Szüksége van a pluginokra, hogy megmondják neki, hogyan. Sok plugin létezik. Egyenként telepíteni és beállítani őket munkaigényes feladat. Ezért a legjobb megoldás a babel preset használata. A preset egy pluginek gyűjteménye. Az általunk használt preset a preset-env.
A babel/preset-env a Babel 7 által használt szabvány az ES6+ ES5-re fordításához. A Babel 7-ben a preset-env felváltotta a preset-2015/6/7 stb.
A Babel/polyfill az ES6+ funkciók ES5-be való átültetésére szolgál. Akkor miért van erre szükség?
Az új szintaxis nem az egyetlen különbség az ES6 és az ES5 között. Az ES6 már számos új API-t kapott. Az API csak egy fantázianév a beépített objektumokra. Ezek az új beépített objektumok nagyon hasznosak, de a probléma az, hogy nem léteznek az ES5 környezetben.
Az egyetlen megoldás az, hogy ezeket a beépített objektumokat hozzáadjuk az ES5 környezethez. Erre való a polyfill.
Kapcsoljuk be a saját terminálunkat és állítsunk be egy projektet.
Először is kapcsoljuk be a terminált és hozzunk létre egy projekt gyökérkönyvtárat. Ezután CD-vel bemegyünk bele és npm init.
Másoljuk be a négy telepítési parancsot a Babel hivatalos kézikönyvéből és illesszük be a terminálba.
Mikor a telepítés befejeződik, ezt a négy csomagot kell látnunk telepítve:
Nyissuk meg a projektünket a VSC-ben és ellenőrizzük a csomagot.json.
Cli, core és preset-env fejlesztési függőségek. polyfill egy termelési függőség.
A polyfillre úgy gondolhatunk, mint egy forráskódra. Az összes es6 új funkciójának forrásait tárolja.
ES5 + polyfill = ES6.
Mielőtt használhatnánk a Babel-t, konfigurálnunk kell. Ennek legjobb módja, ha létrehozunk egy fájlt a Babel konfigurációs információinak tárolására.
A Babel 6-ban a konfigurációs információkat a .babelrc vagy package.json fájlban tároljuk.
A Babel 7 egy új megoldást kínál nekünk: a babel.config.js.
A Babel kézikönyv egy sablont kínál a babel.config.js létrehozásához. Csak be kell másolnunk a projektünk gyökérmappájába.
Először is, a modulunk exportál egy objektumot.
Ezután definiálunk benne egy presets tulajdonságot. A presets értéke egy tömb.
A tömb belsejébe egy másik tömböt teszünk.
A gyermektömb első eleme az általunk használni kívánt előbeállítás. Itt a @babel/env vagy @babel/preset-env értékre állítjuk be.
A második elem egy config objektum. Ezen belül két tulajdonság van: targets és useBuiltIns. A Targets a böngészők konfigurálására szolgál, a useBuiltIns pedig a polyfill-ekhez.
Most, telepítettük és konfiguráltuk a Babelt.
Most, teszteljük.
A projekt gyökérkönyvtárában létrehozunk egy új fájlt: es6.js.
Ezután bekapcsoljuk a terminált és beírunk egy babel parancsot: npx babel es6.js. Ezt kapjuk:
Az ES6 let át lett alakítva ES5 var-ra.
NPX babel ugyanaz, mint a node_modules/.bin/babel
Most, sikeresen “babeleztük” az első ES6-os fájlunkat.
A lefordított fájlt érdemes önálló fájlként kiadni. Ebben az esetben szükség van a -o vagy – output-dir-re.
-o és – output-file egyszerre csak egy fájlt tud lefordítani. A valós életben történő fejlesztés során előfordulhat, hogy az ES6 fájlokat egy könyvtárban szeretnénk tárolni, és minden fájlt lefordítani ebben a könyvtárban.
A projekt gyökérkönyvtárában például két gyermekkönyvtárat hozunk létre: ES6 és ES5. Az ES6 fájljainkat a dir ES6 könyvtárba írjuk. Ezután “bábelezzük” őket dir ES5-be. A HTML fájlokat összekapcsoljuk a dir es5-ből származó JS fájlokkal.
Ez esetben az npx babel ES6 -d ES5 vagy npx babel ES6 – out-dir ES5 parancsra van szükségünk.
Most a dir ES6-ban lévő összes fájl “bábelezve” lesz dir ES5-be.
A következőkben megmutatjuk, mit tud nekünk a polyfill.
Ez az a fájl, amit babelelni szeretnénk:
Ez sok olyan ES6 API-t használ, ami az ES5-ben nem létezik. Az egyetlen módja annak, hogy ES5 környezetben működőképessé tegyük őket, az, hogy ezen új API-k forráskódjait hozzáadjuk az ES5 környezethez. Erre szolgál a polyfill, és ez az oka annak is, hogy a polyfillt termelési függőségként telepítjük. Valóban szükségünk van rá a termelésben.
Íme egy kevésbé pontos hasonlat, hogy megértsük, miért van szükségünk a polyfillre.
Legyen egy jQuery programunk. A jQuery programunkat nem tudjuk közvetlenül futtatni. Először be kell linkelnünk a jQuery forráskódját. A polyfill a jQuery forráskódja, amit belinkelünk.
Ez a “bábelezett” ES5 fájl, amit kaptunk:
Láttad ezeket a szükséges fájlokat? Ezeket a polyfill tölti be. De a “babeled” fájlt nem használhatják közvetlenül a HTML fájlok. A webpack segítségével kell csomagolnunk őket. De az összes szükséges “API forráskód” betöltésre került.
Ezt a beállítást a useBuiltIns proeprty vezérli a babel.config.js-ben. Ennek a tulajdonságnak három értéke van: usage, false és entry.
A használat a legjobb és leggyakrabban használt érték. Mi is ezt javasoljuk.
A useBuiltIns-nak a usage mellett két másik értéke is van: false és entry.
A false leállítja a polyfillt. Ez azt jelenti, hogy a szükséges API-kat kézzel kell összekapcsolni. Ezt semmiképpen sem szeretné megtenni.
Ha az entry-t használja, akkor “require” @babel/polyfillEntry a fájlod elején. Ezután a babel először a targets tulajdonságot fogja ellenőrizni, hogy kitalálja, mik a célböngészők. Betölti az összes olyan API-t, amelyet a célböngésző nem támogat. Nyilvánvaló, hogy így rengeteg nem szükséges API-t fogunk kapni.
Szóval összefoglalva, állítsd be a useBuiltIns-t használatra, és a Babel gondoskodik a többiről helyetted.
Nézd meg a TELJES Babel 7 és Webpack 4 tanfolyamunkat az Udemy-nél:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=MDM_BABEL_P
Nézd meg a TELJES webfejlesztés tanfolyamunkat az Udemynél:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD