kezdő útmutató Babelhez

ez a cikk bemutatja a Babel-t, egy JavaScript-fordítót, amely lehetővé teszi a fejlesztők számára a következő generációs JavaScript használatát.

frusztráló lehet JavaScript írása webes alkalmazások készítésekor. Át kell gondolnunk a megcélzott böngészőkben elérhető funkciókat, és mi történik, ha egy funkciót nem valósítanak meg. Néhány ember azt javasolja, hogy egyszerűen ne használja, ami legtöbbször fájdalmas élmény, ha valami bonyolultat építünk.

szerencsére néhány eszköz lehetővé teszi számunkra, hogy ne aggódjunk a támogatott programok miatt, és csak a lehető legjobb kódot írjuk. Transzpilereknek hívják őket. A transzpiler olyan eszköz, amely a forráskódot bemenetként veszi fel, és új forráskódot állít elő kimenetként, más szintaxissal, de szemantikailag a lehető legközelebb — vagy ideális esetben egyenértékű — az eredetihez.

a Babel nagyjából a szabványos transzpiler, amely a modern JavaScript (ES2015+) fordítását kompatibilis megvalósításokra fordítja, amelyek a régi böngészőkben futnak. Ez a tökéletes megoldás, ha csak a JavaScript írására szeretne koncentrálni.

és bár a Babel fő célja az ECMAScript (ES) legújabb szabványainak lefordítása a régi — vagy néha a jelenlegi — böngészők számára, ennél többre is képes. Van egy ökoszisztéma előre beállított és plugin, amely lehetővé teszi a nem szabványos funkciók hozzáadását is. Minden plugin egy új funkciót / átalakítást tesz elérhetővé a kódod számára, és a presets csak a pluginek gyűjteménye.

első lépések

a Babel beállításának különböző módjai vannak a projekttől és a használt eszközöktől függően. Ebben a cikkben elmagyarázzuk, hogyan állíthatjuk be a Babelt a CLI használatával, bár ha build rendszert vagy keretrendszert használ, akkor a hivatalos webhelyen megtekintheti a konkrét utasításokat. Legtöbbször a CLI a leggyorsabb és legegyszerűbb módja az indulásnak, így ha először használ, nyugodtan folytassa.

a Babel projekten belüli beállításának első lépése a csomag telepítése az npm használatával, majd Hozzáadás dev függőségként. Feltéve, hogy van egy működő csomópontja.a js környezet már a helyén van, csak a következők futtatása a terminálon:

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

ez létrehoz egy könyvtárat (babel-test) a könyvtárba, inicializálja az npm projektet (így létrehoz egy package.json fájlt), majd telepíti a babel-cli-t dev függőségként.

ha segítségre van szüksége a fentiekkel kapcsolatban, kérjük, olvassa el a Node telepítésével és az npm használatával kapcsolatos oktatóanyagokat.

ezután megnyithatjuk a package.json parancsot, és hozzáadhatunk egy build parancsot az npm parancsfájljainkhoz:

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

ez a src könyvtárból veszi a forrásfájlokat, és az eredményt dist könyvtárban adja ki. Akkor tudjuk végrehajtani, mint:

npm run build

de várj! A Babel futtatása előtt telepítenünk kell és be kell állítanunk azokat a bővítményeket, amelyek átalakítják a kódunkat. Ennek legegyszerűbb és leggyorsabb módja az Env preset hozzáadása, amely kiválasztja a megfelelő bővítményeket a megadott célböngészőktől függően. Meg lehet telepíteni:

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

ezután hozzon létre egy .babelrc fájlt a projekt gyökerében, majd adja hozzá az előre beállított értéket:

{ "presets": }

a .babelrc fájl az a hely, ahol a Bábel összes beállítását megadod. Ezt elsősorban előre beállított beállítások és bővítmények beállítására fogja használni, de sokkal több lehetőség áll rendelkezésre. A teljes listát a Babel API oldalon ellenőrizheti.

Felhívjuk figyelmét, hogy az operációs rendszertől függően a ponttal kezdődő fájlok alapértelmezés szerint el lesznek rejtve. Ha ez problémás számodra (vagy csak kevesebb fájlt szeretnél), akkor a Babel beállításait a package.json fájlba helyezheted, egy babel kulcs alatt, így:

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

végül hozzuk létre azokat a könyvtárakat és fájlokat, amelyeket Babel vár:

mkdir src dist

adj neki valamit, hogy átalakuljon:

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

ez a példa destrukturáló hozzárendelést használ két változó értékeinek cseréjéhez.

a Babel futtatása

most, hogy már készen áll a Babel telepítésre, végrehajthatja a build parancsot a fordítási folyamat futtatásához:

npm run build

ez átveszi a kódot src/main.js – ből, átalakítja ES5 kóddá, majd az átalakított kódot dist/main.js – re adja ki.

itt van, amit termelt:

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

mint látható, a let helyére var került, és Bábel bevezetett egy ideiglenes változót (aláhúzással jelölve), hogy megkönnyítse a cserét.

és ennyi. A src könyvtárba írt kód le lesz fordítva a nyelv korábbi verzióira. Alapértelmezés szerint, ha nem ad hozzá semmilyen beállítást az előre beállított értékhez, akkor az összes átalakítást betölti. A célböngészőket az alábbiak szerint is megadhatja:

{ "presets": } }] ]}

ez betölti a szükséges átalakításokat, hogy támogassa az egyes böngészők és a Safari legújabb két verzióját, amely nagyobb vagy egyenlő a 7-es verzióval. A célböngészők számára elérhető lehetőségeket a Browserlist adattárban találja meg.

Bábeli Ökoszisztéma: Gyors áttekintés

amint azt az előző szakaszban észrevetted, a Babel önmagában semmit sem fog tenni, amikor telepíti. Telepítenünk kell egy plugin-készletet a kívánt viselkedés eléréséhez, vagy használhatunk előre beállított beállításokat, amelyek előre definiált plugin-készletek.

általában minden olyan funkció, amelyet fel szeretne venni, plugin formájában lesz. Néhány példa az ES2015-re:

• állandók
• nyíl függvények
• blokk-hatókörű függvények
• osztályok
• for-of
• spread
• sablon literálok

lásd a Plugins oldalon a Babel Docs egy teljes listát.

de néha nem akarja az összes plugint egyenként belefoglalni. Tehát vannak előre elkészített előre beállított beállítások, amelyek megkönnyítik az egyes bővítmények telepítésének folyamatát.

a jelenleg elérhető három hivatalos beállítás a következő:

• Env
• React
• Flow

az Env a leggyakrabban használt és az általunk használt itt. Automatikusan betölti az összes szükséges átalakítást, hogy a kód kompatibilis legyen a megcélzott böngészőktől függően.

a React preset átalakítja a kódot, amely általában a React projektekben található, főleg kompatibilitást adva a Flow annotációkkal és a JSX-szel.

és végül, a Flow preset arra szolgál, hogy megtisztítsa a kódot a Flow típusú kommentároktól (bár nem ellenőrzi, hogy a típusok érvényesek-e vagy sem.)

Babel Polyfill

vannak olyan JavaScript funkciók, amelyeket szintaktikailag nem lehet átalakítani, általában azért, mert nincs egyenértékű funkcionalitás — például ígéretek és generátor funkciók.

ezeket a funkciókat a böngészőben egy könyvtárnak kell megvalósítania a kódban, és ez egy polyfill munkája.

a Babel polyfill-t a core-js és a regenerátor runtime alkotja. Együtt lefedik az ES2015+összes funkcióját.

speciális használat

mint említettük, a Babel olyan funkciók átalakítására is használható, amelyek még nem valósultak meg a nyelven. Jó példa erre a class fields javaslat (jelenleg a TC39 3.szakaszában: jelölt). Ez különösen népszerű a React fejlesztői körében, mivel megszünteti a metódusok explicit kötésének szükségességét egy adott komponenshez, és azt is jelenti, hogy egy komponens state osztálymezőként deklarálható (potenciálisan kiküszöböli a konstruktor szükségességét).

azoknak, akik ma osztálymezőket akarnak használni, hozzá kell adniuk a babel-plugin-transform-class-properties dev-függőséget:

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

a .babelrc fájlt az alábbiak szerint is frissítené:

{ "presets": , "plugins": }

most már lehet írni:

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

és ez nem áll meg itt. A Babel segítségével saját új funkciókat is hozzáadhat a nyelvhez, amint azt a saját Babel Plugin felépítésével kapcsolatos oktatóanyagunk is bemutatja.

alternatívák

a modern webes alkalmazások írása néha többet igényel, mint a JavaScript. Más nyelvek is lefordíthatók kompatibilis JavaScript-re, de más hasznos funkciókat is megvalósíthatnak.

a legnépszerűbb opció a TypeScript, amely a szokásos JavaScript, amely modern ES funkciókat valósít meg, de másokat is hozzáad, különös tekintettel a típusbiztonságra.

a másik véglet, vannak teljesen különböző nyelvek különböző kategóriákban, a funkcionális is, mint PureScript az objektum-orientált, mint a Dart.

az alternatív nyelvek mélyebb áttekintéséhez vessen egy pillantást 10 nyelvre, amelyek JavaScript-re fordulnak.

következtetés

a Babel egy nagyszerű lehetőség a modern alkalmazások írására, miközben továbbra is olyan JavaScript-et szolgál fel, amelyet minden fejlesztő és a böngészők széles skálája megérthet, amelyben a kódnak futnia kell.

a Babel nem csak az ES2015+ átalakításához hasznos a nyelv korábbi verzióihoz — mind a böngészőben, mind az olyan platformokon, mint a Node.js — hanem olyan új funkciók hozzáadásához is, amelyek nem részei a szabványnak. Ha meg szeretné tudni, mire gondolok, csak nézze meg az npm könyvtárat, hogy megtalálja az összes rendelkezésre álló Babel bővítményt vagy előre beállított beállítást.

mivel a JavaScript ilyen gyors ütemben fejlődik, nyilvánvaló, hogy a böngészőgyártóknak szükségük lesz egy kis időre a legújabb funkciók megvalósításához. Ha Babelnek helyet adsz az eszköztáradban, az azt jelenti, hogy ma élvonalbeli Javascriptet írhatsz, biztonságban abban a tudatban, hogy nem hagyod el egyetlen felhasználódat sem. Mit nem lehet szeretni?