Kezdje el a Babel 7-et

A Javascript egyedülálló az ökoszisztéma szélessége miatt. Míg az új szabványok szintaktikai cukrot adnak hozzá, a böngészőkön támogatott, időbe telik. A Babel ezt a problémát az automatikus átszállítás útján dolgozik.

A termék mögötti ötlet egyszerű: Babel vesz ES6 vagy ES7 kódot, és új szintaktikai elemeket cseréli emulációs kóddal. Ennek kimenete megerősíti a klasszikus JavaScript szintaktikai és fut a régebbi böngészők, mint az Internet Explorer.

A Babel kezdeti kiadása vihar vette a világot. Nem sokkal azután, hogy először megjelent, különböző keretek, mint a reagálás, a Vue és az Ember átölelte. A fejlesztők gyakran használják a terméket anélkül, hogy tudnák, hogy a háttérben működik - egynél több népszerű NPM-projektnek van függősége a Bábelről.

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

Ezek a függőségek átalakították az elődt felszabadítási folyamatát konfliktusos rántott ügyre. A 7. verzió, amelyet még mindig egy kis karbantartó csapat kezel, így a lehető legkompatibilisebbek voltak. A megszakítási változások kevés és messze vannak, míg a kódgenerációs minősége továbbra is magas (ha egy csapattal dolgozik, a dokumentumok mentése felhő tároló segít a kohéziós maradni).

Ha még nem dolgozott a Bábelben, hagyja, hogy ez legyen az útmutató. A fejlett JavaScript funkciók használata kompatibilitási aggodalmak nélkül sokkal könnyebbé teszi az életet.

Szeretne néhány eszközt egyszerűsíteni a folyamatot? Útmutatónk a legjobb weboldal építője segíteni fog. Szeretne hosszú távú támogatást? Joga van web hosting szolgáltatás.

01. verzióellenőrzés

A Babel általában a csomópont futási környezetben él. Kezdjük az alkalmazott verziók ellenőrzésével. A kimenet biztosítja az Ubuntu 14.04 munkaállomáson található verzióállapotot, amelyet a következő cikk létrehozására használnak. Ez nem pedantigyáma - a lépést kísérő ábra azt mutatja, hogy a Babel csapat meglehetősen néhány csomópontot támogatott.

 Tamhan @ Tamhan-ThinkPad: ~ $ csomópont - verzió
v8.14.0
Tamhan @ Tamhan-ThinkPad: ~ $ NPM - Version
6.4.1 

02. A csomagnevek módosítása

A 7. verzió egy törésváltozása részt vett a Babel csomagok áthelyezésével saját névtérbe. A régebbi csomagokat nem távolították el a különböző tárhelyekből. Ez fontos, mivel a régi csomagnevek használata a jelen lépést kísérő ábrán látható helyzethez vezet.

 Tamhan @ Tamhan-ThinkPad: ~ / WorkspaceB7 $ NPM
Telepítse a --Save-Dev @ Babel / Core @ Babel / CLI @
Babel / Preset-ENV @ Babel / Csomópont
. . .
+ @ Babel / Core @ 7.2.0
+ @ Babel / Node @ 7.2.0
+ @ Babel / CLI @ 7.2.0
+ @ Babel / Preset-ENV @ 7.2.0 

03. Hozzáad egy építési műveletet

A fenti lépés feltételezi, hogy az NPM projekt belsejében dolgozik. Ebben az esetben az építési akción keresztül futó babel könnyű. Nyisd ki csomag.json és módosítsa azt az alábbi kódban:

 {
. . .
"Main": "index.js",
"Scripts": {
"Teszt": "Echo \" hiba: nincs teszt
meghatározott \ "& amp; & amp; kijárat 1",
"Build": "Babel index.js -d lib"

}, 

04. Transpile kód kézzel

A Babel munkához való elhelyezése magában foglalja az építési műveletet. Ez a legjobban az NPM RUN parancs segítségével valósul meg. A -d Érték tájékoztatja a Bábel, hogy az eredményeket el kell helyezni a lib Mappa - A jelen lépést kísérő ábra azt mutatja, hogy a mappa a repülés során jön létre.

 Tamhan @ Tamhan-ThinkPad: ~ / WorkspaceB7 $ NPM
építés
& gt; [email protected] Build / Home / Tamhan /
WorkspaceB7
& gt; Babel index.js -d lib
Sikeresen összeállított 1 fájlt babelrel. 

05. A konfiguráció kérdése

A Babel további konfigurációs beállítások nélkül történő felhívása nem engedélyezi a transzpilációt. A kód csak akkor átszállítható, ha a keret további információkat kap a célkörnyezetről. Ez parancssori paraméteren keresztül történhet, vagy egy hívott fájl létrehozásával .babelrc A projektgyökérben.

06. A BabelRC konfigurálása

A Babel konfigurálja magát egy bővítmények segítségével, amelyek mindegyike a transzpilációt átalakítja a kódalapra. A előre beállított Csomag - A legtöbb bázis fedezésére szolgáló előre konfigurált átalakítások vannak.

 {
"Presets": ["@ Babel / Preset-env"]
} 

07. Idő a tesztvezetéshez

Adjon hozzá egy kis új korú JavaScriptet az index.js-hez, hogy tesztelje a programot néhány élő kód ellen. A jelen lépést kísérő kód nem működik az örökölt böngészőkön - amikor végzett, az implicit funkció cseréje a Normál nyilatkozat, amint az az ábrán látható.

Tamstest funkció () {
[1, 2, 3] .map ((n) = & gt; n + 1);
} 

08. A célzás módosítása

előre beállított Alapértelmezés szerint a legtöbb transzpilációt alkalmazza: a termék célja, hogy az általánosan kompatibilis JavaScript létrehozása a sávszélesség és a teljesítményköltségek tekintetében. Megváltoztathatja a konfigurációját a célok Objektum - Az alábbi példa a króm és azaz specifikus változatokat célozza meg.

 {
"Presets": [
[
"@ Babel / Preset-env",
{
"Célok": {
"Chrome": "58",
"IE": "11"
}
}
]
]
} 

09. Fejlett célzás

A Babel böngésző célzása nem korlátozódik a Chrome és az Internet Explorerre. Az együttműködésnek köszönhetően böngészőlistán A fejlesztők több mint egy tucat célból keverhetik és illeszkedhetnek, az alábbiak szerint.

A nevek elengedhetetlenek:

• Android Az Android webview számára.
• Baidu a Baidu böngésző számára.
• Földi szeder vagy bb a BlackBerry böngésző számára.
• Króm A Google Chrome számára.
• Krómész vagy and_chr Chrome az Android számára.
• Él A Microsoft Edge.
• Elektron Elektron keretrendszerre. Ez a Chrome verzióvá válik.
• Felfedező vagy azaz Az Internet Explorer számára.
• Explorermobile vagy ie_mob Az Internet Explorer Mobile számára.
• Firefox vagy FF Mozilla Firefox számára.
• Firefoxandroid vagy and_ff A Firefox az Android számára.
• iOS vagy ios_saf iOS Safari számára.
• Csomópont a node.js.opera számára az opera számára.
• Opamini vagy op_mini opera mini.
• Opamobile vagy op_mob Az Opera Mobile számára.
• Qqandroid vagy and_qq A QQ böngésző az Android számára.
• Szafari asztali szafari számára.
• Samsung A Samsung Internet számára.
• Ucandroid vagy and_uc Az UC böngészőhöz az Androidhoz.

10. Haladó célzás, második rész

A böngészőlista fejlett lekérdezéseket is igénybe vehet. A honlapja felsorolja a konfigurációs beállításokat, amelyek szinte mindegyike a Babel belsejében is módosulhat Babelrc . A lekérdezések helyileg értékelhetők, ha a munkaállomás NPX telepítve van.

 {
"Célok": "& gt; 0,25%, nem halott"
} 

11. Automatikus transzpiláció

A babel kézzel kell hívnia, gyorsan fárasztó lesz. A nodemon segédprogram figyeli fájlrendszer források és tüzek ki parancsokat változások kap kimutatható. Elméletileg a Nodemon támogatás hozzáadásával egy kis változással történik csomag.json .

 {
"Név": "Workspaceb7",
. . .
"Main": "index.js",
"Scripts":
{
"Start": "Nodemon --exec Babel-csomópont
index.js ", 

12. Ellenőrizze a jelenlétét

Néhány munkaállomásnak van nodemon világszerte telepítve van. Ha ez nem így van, a programot meghívó hibaüzenetet eredményez az alábbiakhoz hasonlóan. Szerencsére telepítés nodemon könnyen megvalósítható a NPM telepítés parancs.

 Tamhan @ Tamhan-ThinkPad: ~ / WorkspaceB7 $ NPM
Telepítse a --Save-Dev Nodemon 

13. Ellenőrizze a funkcionalitást

Kiűz NPM indítása egy terminál ablakban, és folytassa a tartalom megváltoztatásához index.js olyan szerkesztővel, mint Gedit vagy Vizuális stúdió kód . Mentés után, nodemon az állapotadatok megjelenítése.

 [Nodemon] újraindítás a változások miatt ...
[Nodemon] A "Babel-Node Index.js" indítása
[Nodemon] Tisztítsa meg a kilépést - Várakozás a változásokra
Indítás előtt 

14. Javítsa ki a transzpilációt

Míg nodemon Az észlelésének hibátlanul kell működnie ezen a ponton, a tartalma a index.js fájl, amely megtalálható lib Ne frissítse. Ezt egy szörnyűség okozza Babel-csomópont - Nem kötelezi el a transzpilizált fájlokat a lemezre. Ez helyettesíti a csomópont módosított verzióját, amely a transzpilizált fájlokkal működik.

15. TRANSPILE KÓD MEGHATÁROZOTT

A Babel nem korlátozódik arra, hogy a parancssoron dolgozik. Ha a megfelelő csomagok telepítve vannak, a kódot egy másik programból is átszerelheti. A fenti lépést kísérő töredék az alapvető transzformációkat egy bemeneti karakterláncra vonatkozik. Ne feledje, hogy a konfigurációs beállítások általában a Babelrc fájl.

 VAR Babel = szükséges ("@ Babel / Core");
Import {Transform} a "@ Babel / Core" -tól;
import * mint babel "@ Babel / Core";
Babel.transform ("kód ();", Opciók,
funkció (hibás, eredmény) {
result.code;
Eredmény.map;
Eredmény.
}); 

16. Tradpile Teljes fájlok

A forráskód általában nem kapja meg a karakterláncváltozókat. A Babel API ezt a fájlhoz kapcsolódó funkciók segítségével teszi ki, amely a fájlnévvel ellátott változó bemeneti karakterláncot adja meg. Az eredmények azonban visszatérnek normál JavaScript változónak.

 Babel.transFormFile ("filename.js", opciók,
funkció (hibás, eredmény) {
eredmény; // = & gt; {Code, Térkép, AST}
}
); 

17. SYNC ÉS ASYNC

A Babel 7 bemutatta a legtöbb API hívás szinkron és aszinkron verzióit. Győződjön meg róla, hogy válasszon az igazit az Ön igényeinek - miközben transpiling kis példát lehet tenni a repülni, amelyben Babel laza bonyolultabb fájlok könnyen késéseket fut be több tucat másodpercig.

18. Ismerje meg az egyes bővítményeket

Ha valaha is megtalálod magad, kíváncsi, hogy mi történik a háttérben, egyszerűen meglátogatja ez az oldal . Ez egy lista az összes beépülő modult jelenleg található Babel eloszlás, valamint tartalmaz néhány tippet mindazoknak akik létrehozni egy plugin a saját.

19. Hajtsa ki a megadott specifikációkat

A Babel nem kizárólag az új korú JavaScript elemek átvitelére. A termék tartalmaz egy funkciót korlátozott típusú motor. A gépelési információkat és a fejlett elemeket felváltja. Sajnos, a Babel nem hajtja végre a típusellenőrzést - Ez kiküszöböli a gépjelet nyelv egyik legjelentősebb előnyét.

 {
"Presets": ["@ Babel / Preset-TypeScript"]
} 

20. Run Babel Online

Míg a transzpilációs műveletek általában zökkenőmentesen működnek, néha problémák fordulnak elő. Ebben az esetben a Babelfelület hasznos. Babel a munkaállomás böngészőjében fut, és bemutatja a bemenetet és a kimenetet egymás mellett.

21. Ismerje meg a fájdalompontokról

Bevezetésünk elmagyarázta, hogy a Babel széles körben elterjedt a különböző projekteken keresztül. Babel karbantartó csapata leegyszerűsíti a verziófrissítéseket a Részletes módosítási napló . Ha a Babel programot használ, ne felejtse el, hogy konzultáljon a API frissítési útmutató .

Ezt a cikket eredetileg a Creative Web Design magazin 283. kiadásában tették közzé Web designer . Itt vásároljon 283 kérdést vagy Iratkozzon fel itt a webdesignerre .

Kapcsolódó cikkek:

• Hogyan kódolható gyorsabb, könnyebb JavaScript
• 5 félelmetes JavaScript API-k
• 27 Top osztályú weboldal sablonok