Kezdje el a Babel 7

A JavaScript az ökoszisztéma széleskörűsége miatt egyedülálló. Míg az új szabványok szintaktikai cukrot adnak hozzá, a böngészőkben való támogatásukhoz időre van szükség. A Babel ezt a problémát automatikus transzpilációval kerüli meg.

A termék mögött álló ötlet egyszerű: A Babel átveszi az ES6 vagy ES7 kódot, és az új szintaktikai elemeket emulációs kóddal helyettesíti. A kimenete megerősíti a klasszikus JavaScript szintaxist, és a régebbi böngészőkben, például az Internet Explorerben is fut.

A Babel első kiadása viharszerűen bevette a világot. Nem sokkal a megjelenése után különböző keretrendszerek, mint a React, a Vue és az Ember felkarolták. A fejlesztők gyakran úgy használják a terméket, hogy nem is tudják, hogy a háttérben működik – több népszerű npm projektnek is van függősége a Babel-től.

• Hogyan készítsünk alkalmazást

Ezek a függőségek konfliktusokkal teli üggyé változtatták az előd kiadási folyamatát. A 7-es verzió, amelyet továbbra is egy kis karbantartó csapat kezel, így igyekezett a lehető legjobban kompatibilis lenni. A törő változtatások ritkán fordulnak elő, miközben a kódgenerálás minősége továbbra is magas (ha csapatban dolgozol, a dokumentumok felhőalapú tárhelyre mentése segít az összetartásban).

Ha még nem dolgoztál a Babel-lel, ez legyen az útmutató. Ha kompatibilitási aggályok nélkül használhatja a fejlett JavaScript funkciókat, sokkal könnyebbé válik az élete.

Szeretne néhány eszközt a folyamatok racionalizálására? A legjobb honlapkészítőhöz szóló útmutatónk segíteni fog. Hosszú távú támogatást szeretne? Válassza a megfelelő webtárhelyszolgáltatást.

Verszióellenőrzés

A bábel általában a Node futásidejű környezetben él. Kezdjük a használt verziók ellenőrzésével. A kimenet megadja a következő cikk létrehozásához használt Ubuntu 14.04 munkaállomáson talált verzióállapotot. Ez nem pedantéria – a lépést kísérő ábra mutatja, hogy a Babel-csapat jó néhány Node.js verzió támogatását elhagyta.

tamhan@tamhan-thinkpad:~$ node --versionv8.14.0tamhan@tamhan-thinkpad:~$ npm --version6.4.1

A csomagnevek változása

A 7-es verzió egyik áttörő változása a Babel-csomagok saját névtérbe költöztetése volt. A régebbi csomagokat nem távolították el a különböző tárolókból. Ez azért fontos, mert a régebbi csomagnevek használata a lépést kísérő ábrán látható helyzethez vezet.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node. . .+ @babel/[email protected]+ @babel/[email protected]+ @babel/[email protected]+ @babel/[email protected]

Build action hozzáadása

A fenti lépés feltételezi, hogy egy npm projektben dolgozik. Ebben az esetben a Babel futtatása a build action segítségével egyszerű. Nyissa meg a package.json állományt, és módosítsa azt az alábbi kódban bemutatott módon:

{. . ."main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "babel index.js -d lib"},

Kézzel átfordítja a kódot

A Babel munkába állítása magában foglalja a build action elindítását. Ezt a legkönnyebben az npm run paranccsal lehet elvégezni. A -d érték tájékoztatja a Babelt, hogy az eredményeket a lib mappába kell helyezni – a lépést kísérő ábrán látható, hogy a mappa menet közben jön létre.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm run build> [email protected] build /home/tamhan/workspaceB7> babel index.js -d libSuccessfully compiled 1 file with Babel.

Konfiguráció kérdése

A Babel további konfigurációs beállítások nélküli meghívása nem teszi lehetővé az átfordítást. A kódot csak akkor lehet átfordítani, ha a keretrendszer további információkat kap a célkörnyezetről. Ez történhet egy parancssori paraméteren keresztül, vagy a projekt gyökerében egy .babelrc nevű fájl létrehozásával.

A babelrc konfigurálása

A Babel egy sor bővítményen keresztül konfigurálja magát, amelyek mindegyike transzpilációs transzformációkat alkalmaz a kódbázisra. Mi a preset-env csomagot használjuk – ez egy előre konfigurált transzformációs készletet tartalmaz, amely a legtöbb alapot hivatott lefedni.

{"presets": }

Idő a tesztelésre

Adjunk egy kis újkori JavaScriptet az index.js állományhoz, hogy teszteljük a programot néhány élő kóddal szemben. Az ehhez a lépéshez tartozó kód nem működne a régebbi böngészőkön – ha kész, az implicit függvényt egy normál deklarációval helyettesítjük, ahogy az ábrán látható.

function tamstest(){.map((n) => n + 1);}

Célzás beállítása

A preset-env alapértelmezés szerint alkalmazza a legtöbb átfordítást: a termék célja, hogy a sávszélesség és a teljesítmény költségeire való tekintet nélkül univerzálisan kompatibilis JavaScriptet hozzon létre. A konfigurációját egy targets objektum átadásával módosíthatja – az alábbi példa a Chrome és az IE bizonyos verzióit célozza meg.

{"presets": ]}

Advanced targeting

A Babel böngészőcélzása nem korlátozódik a Chrome-ra és az Internet Explorerre. A browserslisttel való együttműködésnek köszönhetően a fejlesztők több mint egy tucat célpont közül választhatnak, ahogy az alábbiakban látható.

A nevek nem érzékenyek a nagy- és kisbetűkre:

• Android az Android WebView-hoz.
• Baidu a Baidu Browser-hez.
• BlackBerry vagy bb a Blackberry böngészőhöz.
• Chrome a Google Chrome-hoz.
• ChromeAndroid vagy and_chr a Chrome for Android-hoz.
• Edge a Microsoft Edge-hez.
• Electron az Electron keretrendszerhez. Át lesz konvertálva Chrome verzióra.
• Explorer vagy ie az Internet Explorer számára.
• ExplorerMobile vagy ie_mob az Internet Explorer Mobile számára.
• Firefox vagy ff a Mozilla Firefox számára.
• FirefoxAndroid vagy and_ff a Firefox for Android számára.
• iOS vagy ios_saf az iOS Safari számára.
• Node a Node.js számára.Opera az Opera számára.
• OperaMini vagy op_mini az Opera Mini számára.
• OperaMobile vagy op_mob az Opera Mobile számára.
• QQAndroid vagy and_qq a QQ Browser for Android számára.
• Safari az asztali Safari számára.
• Samsung a Samsung Internethez.
• UCAndroid vagy and_uc az UC Browser for Androidhoz.

Előrelátó célzás, második rész

A böngészőlista fejlett lekérdezéseket is fogadhat. A honlapja felsorolja a konfigurációs lehetőségeket, amelyek közül szinte mindegyik használható a Babelen belül is a babelrc módosításával. A lekérdezések lokálisan is kiértékelhetők, ha a munkaállomáson telepítve van az npx.

{"targets": "> 0.25%, not dead"}

Automatikus átfordítás

A Babel kézzel történő meghívása hamar unalmassá válik. A nodemon segédprogram figyeli a fájlrendszer erőforrásait, és a változások észlelésekor parancsokat lő ki. Elméletileg a nodemon támogatás hozzáadása a package.json egy kis módosításával megoldható.

{"name": "workspaceb7",. . ."main": "index.js","scripts": {"start": "nodemon --exec babel-node index.js",

A jelenlét ellenőrzése

Egyes munkaállomásokon a nodemon globálisan telepítve van. Ha ez nem így van, a program meghívása az alább láthatóhoz hasonló hibaüzenetet fog eredményezni. Szerencsére a nodemon telepítése könnyen elvégezhető az npm install paranccsal.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm install --save-dev nodemon

Funkcionalitás ellenőrzése

Elindíthatjuk az npm startot egy terminálablakban, és folytathatjuk az index.js tartalmának módosítását egy szerkesztővel, például gedit vagy Visual Studio Code segítségével. A mentés után a nodemon állapotinformációt fog kiadni.

 restarting due to changes... starting `babel-node index.js` clean exit - waiting for changes before restart

Transzpiláció javítása

Míg a nodemon érzékelésének ezen a ponton hibátlanul kell működnie, a lib-ben található index.js fájl tartalma nem frissül. Ezt a babel-node egyik finomsága okozza – nem commitolja az átfordított fájlokat a lemezre. Ehelyett a Node CLI módosított változatát indítja el, amely az átfordított fájlokkal dolgozik.

A kód programozott átfordítása

A babel nem korlátozódik a parancssoron való munkára. Ha a megfelelő csomagok telepítve vannak, a kód egy másik programból is átfordítható. Az ezt a lépést kísérő snippet egy sor alapvető transzformációt alkalmaz egy bemeneti karakterláncra. Tartsuk szem előtt, hogy a konfigurációs beállításokat általában egy babelrc fájlból kapjuk.

var babel = require("@babel/core");import { transform } from "@babel/core";import * as babel from "@babel/core";babel.transform("code();", options, function(err, result) {result.code;result.map;result.ast;});

Transpile teljes fájlok

A forráskódot általában nem tároljuk stringváltozókban. A Babel API ezt egy sor fájlokkal kapcsolatos függvényen keresztül veszi figyelembe, amelyek lemondanak a bemeneti karakterláncról egy fájlnevet tartalmazó változó esetében. Az eredményeket azonban normál JavaScript-változóként kapjuk vissza.

babel.transformFile("filename.js", options, function (err, result) {result; // => { code, map, ast }});

Szinkron és aszinkron

A Babel 7 bevezette a legtöbb API-hívás szinkron és aszinkron változatát. Győződjön meg róla, hogy az igényeinek megfelelőt választja – míg a kisebb példák átfordítása menet közben is elvégezhető, a Babel bonyolultabb fájlokra való ráeresztése könnyen több tucat másodperces késedelmekhez vezethet.

Tudjon meg többet az egyes bővítményekről

Ha valaha is kíváncsi lenne arra, mi történik a háttérben, egyszerűen látogasson el erre az oldalra. Ez egy listát ad a Babel disztribúcióban jelenleg található összes bővítményről, és tartalmaz néhány tippet is mindazok számára, akik saját bővítményt szeretnének létrehozni.

A TypeScript sajátosságainak kiszűrése

A Babel nem korlátozódik az újkori JavaScript elemek átfordítására. A termék tartalmaz egy funkciókat korlátozó TypeScript-motort. Kicsomagolja a tipizálási információkat és helyettesíti a fejlett elemeket. Sajnos a Babel nem végez típusellenőrzést – ezzel megszűnik a TypeScript nyelv egyik legjelentősebb előnye.

{"presets": }

A Babel online futtatása

Míg az átfordítási műveletek általában zökkenőmentesen működnek, néha előfordulnak problémák. Ilyenkor a Babel REPL hasznos segítség. Ez a munkaállomás böngészőjében futtatja a Babelt, és közvetlenül egymás mellett mutatja a bemenetet és a kimenetet.

Tudjon meg a fájdalmas pontokról

A bevezetőnkben elmagyaráztuk, hogy a Babel széles körben elterjedt használatban van a különböző projektekben. A Babel karbantartó csapata részletes változásnaplóval egyszerűsíti a verziófrissítést. Ha programozottan használja a Babelt, ne felejtse el áttanulmányozni az API frissítési útmutatót.

Ez a cikk eredetileg a Web Designer kreatív webdesign magazin 283. számában jelent meg. Vásárolja meg a 283. számot itt, vagy fizessen elő a Web Designerre itt.

• Hogyan kódoljon gyorsabb, könnyebb JavaScriptet
• 5 fantasztikus Javascript API
• 27 elsőrangú weboldal sablon

.