Începeți cu Babel 7

JavaScript este unic datorită lățimii ecosistemului. În timp ce standardele noi adaugă zahăr sintactic, obținerea acestora acceptate pe browsere necesită timp. Babel lucrează în jurul acestei probleme prin transpilarea automată.

Ideea din spatele produsului este simplă: Babel ia în cod ES6 sau ES7 și înlocuiește noi elemente sintactice cu cod de emulare. Ieșirea sa confirmă sintaxa clasică JavaScript și rulează pe browsere mai vechi precum Internet Explorer.

Eliberarea inițială a lui Babel a luat lumea prin furtună. Curând după ce a apărut pentru prima dată, diferite cadre ca reacționează, Vue și Ember au îmbrățișat-o. Dezvoltatorii folosesc adesea produsul fără să știe că funcționează în fundal - mai mult de un nou proiect NPM popular are o dependență de Babel.

• Cum se face o aplicație

Aceste dependențe au transformat procesul de eliberare a predecesorului într-o aventură plină de conflict. Versiunea 7, gestionată încă de o echipă mică de întreținere, a încercat astfel cât mai compatibilă posibil. Schimbările de rupere sunt puține și foarte mari, în timp ce calitatea generației de cod rămâne ridicată (dacă lucrați cu o echipă, salvând documente în Stocare in cloud vă va ajuta să rămâneți coeziv).

Dacă nu ați lucrat cu Babel înainte, permiteți-l să fie ghidul dvs. Fiind capabil să utilizeze funcții avansate JavaScript fără îngrijorări de compatibilitate, face viața mult mai ușoară.

Vrei niște instrumente pentru a-ți raționaliza procesul? Ghidul nostru pentru cei mai buni Builder de site-uri web va ajuta. Doriți sprijin pe termen lung? Obțineți dreptul web hosting serviciu.

01. Verificarea versiunii

Babel trăiește de obicei în mediul de rulare nod. Să începem prin verificarea versiunilor utilizate. Ieșirea furnizează starea versiunii găsită pe stația de lucru Ubuntu 14.04 utilizată pentru a crea următorul articol. Aceasta nu este pedantia - figura care însoțește acest pas arată că echipa Babel a renunțat la suport pentru câteva versiuni de nod.js.

 Tamhan @ Tamhan-ThinkPad: ~ $ nod --versiune
v8.14.0
Tamhan @ Tamhan-ThinkPad: ~ $ npm --versiune
6.4.1 

02. Schimbarea numelor pachetelor

O schimbare de rupere a versiunii 7 a implicat mutarea pachetelor Babel în propriul spațiu de nume. Pachetele mai vechi nu au fost îndepărtate din diverse depozite. Acest lucru este important, deoarece utilizarea de nume de pachete moștenite duce la situația prezentată în figura care însoțește acest pas.

 Tamhan @ Tamhan-ThinkPad: ~ / workspaceb7 $ npm
Instalați --Save-dev @ Babel / Core @ Babel / CLI @
Babel / Preset-Env @ Babel / Nod
. . .
+ @ Babel / Core @ 7.2.0
+ @ Babel / Nod @ 7.2.0
+ @ Babel / CLI @ 7.2.0
+ @ Babel / Preset-ENV @ 7.2.0 

03. Adăugați o acțiune de construire

Pasul de mai sus presupune că lucrați în interiorul unui proiect NPM. În acest caz, rularea Babel prin intermediul acțiunii de construcție este ușoară. Deschis pachet.json. și să o modifice așa cum a fost demonstrat în codul de mai jos:

 {{{{{
. . .
"Principal": "index.js",
"Scripturi": {
"Test": "ECHO \" Eroare: Nici un test
specificat \ "& amp; & amp; ieșire 1",
"Construiți": "Babel index.js -d lib"

}, 

04. Codul transpilet cu mâna

Punerea lui Babel la locul de muncă implică arderea acțiunii de construcție. Acest lucru este cel mai bine realizat prin comanda NPM Run. -D. Valoarea informează Babel că rezultatele trebuie plasate în lib Folder - Figura care însoțește acest pas arată că dosarul este creat în zbor.

 Tamhan @ Tamhan-ThinkPad: ~ / workspaceb7 $ npm
Rulați construi
& gt; [email protected] Construi / Home / Tamhan /
WorkspaceB7.
& gt; Babel index.js -d lib
A compilat cu succes 1 fișier cu Babel. 

05. O întrebare de configurare

Invocarea Babel fără opțiuni de configurare suplimentare nu permite transpiltarea. Codul poate fi transplasat numai dacă cadrul primește informații suplimentare despre mediul țintă. Acest lucru se poate face printr-un parametru linie de comandă sau prin crearea unui fișier numit .bobelrc. în rădăcina proiectului.

06. Configurați Babelrc

Babel se configurează printr-un set de pluginuri, fiecare dintre acestea aplică transpiltarea transformă la baza de cod. Noi folosim Preset-en. Pachet - vine cu un set preconfigurat de transformări destinate să acopere cele mai multe baze.

 {{{{{
"Presetări": ["@ Babel / Preset-en"]
} 

07. Timp pentru o unitate de testare

Adăugați un pic de JavaScript de nouă ani la index.js pentru a testa programul împotriva unor coduri live. Codul care însoțește acest pas nu va funcționa pe browserele moștenite - când este făcut, funcția implicită se înlocuiește cu a normal Declarație, după cum se arată în figură.

Funcția Tamstest () {
[1, 2, 3] .map ((n) = și gt; n + 1);
} 

08. Reglați direcționarea

Preset-en. Aplică cele mai multe transpitări în mod implicit: scopul produsului este de a crea JavaScript universal compatibil, fără a ține seama de costurile de lățime de bandă și de performanță. Puteți schimba configurația prin trecerea într-o Obiective Obiect - Exemplul de mai jos vizează versiuni specifice ale cromului și IE.

 {{{{{
"Presetări": [
[
"@ Babel / Preset-en",
{
"Obiective": {
"Chrome": "58",
"IE": "11"
}
}
]
]
} 

09. Direcționarea avansată

Directarea browserului Babel nu este limitată la Chrome și Internet Explorer. Datorită cooperării cu Browserslist. , Dezvoltatorii pot amesteca și se potrivesc de la mai mult de o duzină de obiective, după cum se arată mai jos.

Numele sunt insensibile la caz:

• Android Pentru Webview Android.
• Baidu. pentru browserul Baidu.
• Mure sau Bb. Pentru browserul BlackBerry.
• Crom Pentru Google Chrome.
• Chromandroid. sau și_chr. Pentru Chrome pentru Android.
• Margine pentru Microsoft Edge.
• Electron. pentru cadru de electroni. Acesta va fi convertit în versiunea cromată.
• Explorator sau adică Pentru Internet Explorer.
• Explorermobile. sau ie_mob. Pentru Internet Explorer Mobile.
• Firefox. sau Ff. Pentru Mozilla Firefox.
• Firefoxandroid. sau și_ff. Pentru Firefox pentru Android.
• ios. sau ios_saf. pentru ios safari.
• Nodul pentru node.js.operar pentru Opera.
• Opera mini sau OP_MINI. pentru Opera Mini.
• Operamobile sau op_mob. Pentru Opera Mobile.
• Qqandroid. sau și_qq. Pentru browserul QQ pentru Android.
• Safari. pentru Safari Desktop.
• Samsung Pentru Internet Samsung.
• UCANDROID. sau și_uc. Pentru browserul UC pentru Android.

10. Direcționarea avansată, partea a doua

Browserlist poate lua, de asemenea, interogări avansate. Pagina sa de pornire Afișează opțiunile de configurare, aproape toate, care pot fi utilizate și în interiorul Babel prin modificarea Babelrc. . Interogările pot fi evaluate la nivel local dacă stația dvs. de lucru a instalat NPX.

 {{{{{
"Obiective": "& gt; 0,25%, nu mort"
} 

11. Transpilation automată

Având invocarea lui Babel cu mâna devine plictisitoare repede. NODEMON Utility monitorizează resursele de sistem de fișiere și incendiarea comenzilor ca modificări sunt detectate. În teorie, adăugarea unui suport Notemon este tratată printr-o mică schimbare la pachet.json. .

 {{{{{
"Nume": "WorkspaceB7",
. . .
"Principal": "index.js",
"Scripturi":
{
"Începeți": "NODEMON --ECEC BACL-NODE
index.js ", 

12. Verificați prezența

Unele stații de lucru au noddemon instalat la nivel global. Dacă acest lucru nu este cazul, invocând programul va da un mesaj de eroare similar celui prezentat mai jos. Din fericire, implementarea noddemon este ușor de realizat prin intermediul instalarea npm. comanda.

 Tamhan @ Tamhan-ThinkPad: ~ / workspaceb7 $ npm
Instalați --Save-Dev Nodemon 

13. Verificați funcționalitatea

Focul NPM Start. într-o fereastră terminală și continuați să schimbați conținutul index.js. cu un editor ca Gedit sau Codul Visual Studio. . După salvare, noddemon va ieși informații despre stare.

 [Nodemon] Repornirea datorită schimbărilor ...
[Nodemon] începând "Babel-Nod index.js`
[NODEMON] EXIT CLEAN - Așteptarea modificărilor
înainte de a reporni 

14. Fixați transpiilarea

In timp ce noddemon Detectarea ar trebui să funcționeze fără probleme în acest moment, conținutul index.js. fișierul care se găsește în lib Nu actualizați. Acest lucru este cauzat de o delicată de Babel-nod. - Nu comite fișierele transplasate pe disc. În schimb, declanșează o versiune modificată a nodului CI, care funcționează cu fișierele transplasate.

15. Codul transpirat programatic

Babel nu se limitează la lucrul la linia de comandă. Dacă sunt instalate pachetele corecte, codul poate fi, de asemenea, transportat dintr-un alt program. Fragmentul care însoțește această etapă aplică un set de transformări de bază la un șir de intrare. Rețineți că setările de configurare, de obicei, sunt obținute de la A Babelrc. fişier.

 Var Babel = necesită ("@ Babel / Core");
Import {Transform} de la "@ Babel / Core";
Import * ca babel de la "@ Babel / Core";
babel.transform ("cod ();", opțiuni,
Funcție (eroare, rezultat) {
rezultatul.code;
rezultat.map;
rezultatul.
}); 

16. Fișiere întregi transpilete

Codul sursă nu este de obicei stocat în variabilele de șir. Babel API reprezintă acest lucru printr-un set de funcții legate de fișiere, care renunță la șirul de intrare pentru o variabilă cu un nume de fișier. Rezultatele, totuși, returnate ca o variabilă normală JavaScript.

 BABEL.TRANSFFILE ("FILENAME.JS", Opțiuni,
Funcție (eroare, rezultat) {
rezultat; // = & gt; {cod, hartă, AST}
}
); 

17. Sincronizare și asincie

Babel 7 a introdus versiuni sincrone și asincrone ale celor mai multe apeluri API. Asigurați-vă că ați ales unul potrivit pentru nevoile dvs. - în timp ce transpuneți exemple mici se poate face în zbor, setarea Babel Loose pe fișierele mai complexe poate duce cu ușurință la întârzieri care rulează în zeci de secunde.

18. Aflați despre pluginurile individuale

Dacă vă veți găsi vreodată întrebându-vă despre ceea ce se întâmplă în fundal, pur și simplu vizitați această pagină . Acesta oferă o listă a tuturor pluginurilor conținute în prezent în distribuția Babel și conține, de asemenea, câteva sugestii pentru toți cei care doresc să creeze un plugin propriu.

19. SPECIFICA SPECIFICĂRII DE TIMP

Babel nu se limitează la transpirarea elementelor JavaScript din New Age. Produsul conține un motor Tipscript cu caracteristici constrâns. Ea scapă de introducerea informațiilor și înlocuiește elementele avansate. Din păcate, Babel nu efectuează verificarea de tip - aceasta elimină unul dintre cele mai importante beneficii ale limbajului de tip.

 {{{{{
"Presetări": ["@ Babel / Preset-TipsCript"]
} 

20. Rulați Babel Online

În timp ce operațiunile de transpitare funcționează, de obicei, fără probleme, apar probleme uneori. În acest caz, Babel Repl. este de ajutor. Ea rulează Babel în browser-ul stației de lucru și prezintă intrarea și ieșirea chiar lângă unul altuia.

21. Aflați despre punctele de durere

Introducerea noastră a explicat că Babel vede utilizarea pe scară largă în diverse proiecte. Echipa de întreținere a lui Babel simplifică actualizările versiunii cu a Schimbarea detaliată a modificărilor. . Dacă utilizați Babel programmatic, nu uitați să consultați Ghid de upgrade API. .

Acest articol a fost publicat inițial în numărul 283 din revista Creative Web Design Web designer . Cumpărați problema 283 aici sau Aboneaza-te la designerul web aici .

Articole similare:

• Cum se cod mai repede, mai ușor JavaScript
• 5 API-uri JavaScript minunate
• 27 Șabloane de site-uri de top