un ghid pentru începători la Babel

acest articol introduce Babel, un compilator JavaScript care permite dezvoltatorilor să utilizeze JavaScript de generație următoare astăzi.

poate fi frustrant să scrieți JavaScript atunci când construiți aplicații web. Trebuie să ne gândim la caracteristicile disponibile în browserele pe care le vizăm și la ce se întâmplă atunci când o caracteristică nu este implementată. Unii oameni ar recomanda pur și simplu să nu-l folosească, ceea ce este o experiență dureroasă de cele mai multe ori dacă construim ceva complicat.

din fericire, unele instrumente ne permit să nu ne mai îngrijorăm de ceea ce este acceptat și să scriem cel mai bun cod pe care îl putem. Se numesc transpilere. Un transpiler este un instrument care ia codul sursă ca intrare și produce un nou cod sursă ca ieșire, cu o sintaxă diferită, dar semantic cât mai aproape posibil — sau iDEAL echivalent — cu originalul.

Babel este destul de mult transpilerul standard pentru a traduce JavaScript modern (ES2015+) în implementări compatibile care rulează în browsere vechi. Este soluția perfectă dacă doriți doar să vă concentrați pe scrierea JavaScript.

și, deși scopul principal al Babel este de a traduce cele mai recente standarde ale ECMAScript (ES) pentru browserele vechi — sau uneori actuale—, poate face mai mult. Există un ecosistem de presetări și plugin-uri care fac posibilă adăugarea de caracteristici non-standard, de asemenea. Fiecare plugin face o nouă caracteristică/transformare disponibilă pentru codul dvs., iar presetările sunt doar o colecție de pluginuri.

Noțiuni de bază

există diferite moduri de a configura Babel în funcție de proiectul dvs. și de instrumentele pe care le utilizați. În acest articol, vom explica cum să configurați Babel folosind CLI, deși dacă utilizați un sistem de construire sau un cadru, puteți consulta instrucțiuni specifice pe site-ul oficial. De cele mai multe ori CLI este cel mai rapid și mai simplu mod de a începe, așa că, dacă sunteți un utilizator pentru prima dată, nu ezitați să continuați.

primul pas pentru a configura Babel într-un proiect este de a instala pachetul folosind npm și adăugați-l ca o dependență dev. Presupunând că aveți un nod de lucru.JS mediu deja în vigoare, este doar o chestiune de a rula următoarele în terminalul:

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

aceasta va crea un director (babel-test) schimba în directorul, inițializa un proiect npm (creând astfel un package.json fișier) și apoi instalați babel-cli ca o dependență dev.

dacă aveți nevoie de ajutor cu cele de mai sus, consultați tutorialele noastre despre instalarea nodului și lucrul cu npm.

apoi, putem deschide package.json și adăuga o comandă build la scripturile noastre npm:

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

aceasta va prelua fișierele sursă din Directorul src și va afișa rezultatul într-un director dist. Apoi îl putem executa ca:

npm run build

dar stai! Înainte de a rula Babel, trebuie să instalăm și să configurăm pluginurile care ne vor transforma codul. Cel mai simplu și mai rapid mod de a face acest lucru este să adăugați presetarea Env, care selectează pluginurile corespunzătoare în funcție de browserele țintă pe care le indicați. Poate fi instalat folosind:

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

apoi creați un fișier .babelrc în rădăcina proiectului dvs. și adăugați presetarea:

{ "presets": }

fișierul .babelrc este locul în care ați pus toate setările pentru Babel. Veți folosi acest lucru în principal pentru configurarea presetărilor și pluginurilor, dar sunt disponibile mult mai multe opțiuni. Puteți verifica lista completă în pagina Babel API.

vă rugăm să rețineți că, în funcție de sistemul dvs. de operare, fișierele care încep cu un punct vor fi ascunse în mod implicit. Dacă acest lucru este problematic pentru dvs. (sau dacă preferați doar mai puține fișiere), puteți pune setările Babel în fișierul package.json , sub o cheie babel, așa:

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

în cele din urmă, să creăm directoarele și fișierele pe care Babel se așteaptă să le găsească:

mkdir src dist

și dă – i ceva de transformat:

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

acest exemplu utilizează destructuring assignment pentru a schimba valorile a două variabile.

rularea Babel

acum, că aveți o instalare Babel gata de utilizare, puteți executa comanda build pentru a rula procesul de compilare:

npm run build

aceasta va lua codul de la src/main.js, îl va transforma în cod ES5 și va scoate codul transformat în dist/main.js.

Iată ce a produs:

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

după cum puteți vedea, let a fost înlocuit cu var și Babel a introdus o variabilă temporară (notată cu sublinierea) pentru a facilita schimbul.

și asta este. Codul pe care îl scrieți în directorul src va fi tradus în versiunile anterioare ale limbii. În mod implicit, dacă nu adăugați nicio opțiune la presetare, aceasta va încărca toate transformările. De asemenea, puteți indica browserele țintă după cum urmează:

{ "presets": } }] ]}

aceasta va încărca transformările necesare pentru a suporta cele mai recente două versiuni ale fiecărui browser și Safari mai mari sau egale cu versiunea 7. Puteți găsi opțiunile disponibile pentru browserele țintă în magazia Browserlist.

Ecosistemul Babel: O privire de ansamblu rapidă

după cum ați observat în secțiunea anterioară, Babel nu va face nimic de la sine atunci când îl instalați. Trebuie să instalăm un set de pluginuri pentru a obține comportamentul dorit sau putem folosi presetări, care sunt seturi predefinite de pluginuri.

de obicei, fiecare caracteristică pe care doriți să o includeți va fi sub forma unui plugin. Câteva exemple pentru ES2015 includ:

• constante
• funcții săgeată
• funcții cu scop bloc
• clase
• pentru-de
• spread
• literali șablon

a se vedea plugins pagina în Babel Docs pentru o listă completă.

dar uneori nu doriți să includeți toate pluginurile unul câte unul. Deci, există presetări pre-construite care vor facilita procesul de instalare a fiecărui plugin.

cele trei presetări oficiale disponibile în prezent sunt:

• Env
• React
• Flow

Env este cel mai frecvent utilizat și cel pe care l-am folosit aici. Se încarcă automat toate transformările necesare pentru a face codul compatibil în funcție de browserele vizate.

presetarea React transformă codul găsit de obicei în proiectele React, adăugând în principal compatibilitate cu adnotările Flow și JSX.

și în cele din urmă, presetarea fluxului este utilizată pentru a curăța codul din adnotările de tip flux (deși nu verifică dacă tipurile sunt valide sau nu.)

Babel Polyfill

există funcții JavaScript care nu pot fi transformate sintactic, de obicei pentru că nu există o funcționalitate echivalentă implementată — de exemplu, promisiuni și funcții generatoare.

aceste tipuri de caracteristici trebuie să fie implementate în browser de către o bibliotecă pentru a fi utilizate în codul dvs. și aceasta este lucrarea unui polyfill.

Polyfill Babel este compus din core-js și Regenerator runtime. Împreună, acestea acoperă toate caracteristicile din ES2015+.

utilizare avansată

după cum am menționat, Babel poate fi folosit și pentru a transforma caracteristici care nu au fost încă implementate în limbă. Un bun exemplu în acest sens este propunerea de câmpuri de clasă (în prezent la TC39 Etapa 3: candidat). Acest lucru este deosebit de popular printre React devs, deoarece elimină necesitatea de a lega în mod explicit metodele de o anumită componentă și, de asemenea, înseamnă că state a unei componente poate fi declarată ca un câmp de clasă (eliminând potențial necesitatea unui constructor).

pentru cei dintre voi care doresc să utilizeze câmpuri de clasă astăzi, va trebui să adăugați babel-plugin-transform-class-properties ca dependență dev:

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

de asemenea, vă actualizați fișierul .babelrc după cum urmează:

{ "presets": , "plugins": }

acum Puteți scrie:

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

și nu se oprește aici. De asemenea, puteți utiliza Babel pentru a adăuga noi caracteristici proprii în limbă, așa cum demonstrează tutorialul nostru de înțelegere prin construirea propriului Plugin Babel.

Alternative

scrierea aplicațiilor web moderne necesită uneori mai mult decât caracteristicile disponibile în JavaScript. Alte limbi pot fi, de asemenea, traduse în Javascript compatibil, dar pot implementa și alte caracteristici utile.

cea mai populară opțiune este TypeScript, care este JavaScript obișnuit care implementează caracteristici ES moderne, dar adaugă și altele, în special în ceea ce privește siguranța tipului.

la cealaltă extremă, există limbi complet diferite în diferite categorii, de la cele funcționale, cum ar fi PureScript, până la cele orientate pe obiecte, cum ar fi Dart.

pentru o prezentare mai profundă a limbilor alternative, aruncați o privire la 10 limbi care compilează JavaScript.

concluzie

Babel este o opțiune excelentă pentru scrierea aplicațiilor moderne, în timp ce încă servește JavaScript care poate fi înțeles de toți dezvoltatorii și de gama largă de browsere în care trebuie să ruleze codul.

Babel nu este util doar pentru transformarea ES2015+ în versiunile anterioare ale limbii — atât în browser, cât și pe platforme precum Node.js – dar și pentru adăugarea de noi caracteristici care nu fac parte din standard. Pentru a vedea ce vreau să spun, aruncați o privire la directorul NPM pentru a găsi toate pluginurile sau presetările Babel disponibile.

deoarece JavaScript evoluează într-un ritm atât de rapid, este evident că producătorii de browsere vor avea nevoie de ceva timp pentru a implementa cele mai recente funcții. Oferindu-i lui Babel un loc în setul dvs. de instrumente înseamnă că puteți scrie JavaScript de ultimă oră astăzi, în siguranță, știind că nu abandonați niciunul dintre utilizatorii dvs. Ce nu e de iubit?