Articles /

Începeți cu Babel 7

JavaScript este unic datorită amplorii ecosistemului. În timp ce noile standarde adaugă zahăr sintactic, obținerea suportului acestora pe browsere necesită timp. Babel rezolvă această problemă prin transpilare automată.

Ideea din spatele produsului este simplă: Babel preia codul ES6 sau ES7 și înlocuiește elementele sintactice noi cu cod de emulație. Rezultatul său confirmă sintaxa JavaScript clasică și rulează pe browsere mai vechi, cum ar fi Internet Explorer.

Lansarea inițială a lui Babel a luat lumea cu asalt. La scurt timp după ce a apărut, diverse framework-uri precum React, Vue și Ember l-au îmbrățișat. Dezvoltatorii folosesc adesea produsul fără să știe că acesta funcționează în fundal – mai mult de un proiect npm popular are o dependență de Babel.

  • Cum se face o aplicație

Aceste dependențe au transformat procesul de lansare a predecesorului într-o afacere plină de conflicte. Versiunea 7, gestionată în continuare de o mică echipă de mentenanță, a încercat astfel să fie cât mai compatibilă posibil. Modificările de întrerupere sunt puține și rare, în timp ce calitatea generării codului rămâne ridicată (dacă lucrați cu o echipă, salvarea documentelor în cloud storage vă va ajuta să rămâneți coezivi).

Dacă nu ați mai lucrat cu Babel până acum, lăsați ca acesta să vă fie ghidul. Faptul de a putea utiliza caracteristici JavaScript avansate fără griji legate de compatibilitate vă face viața mult mai ușoară.

Vă doriți câteva instrumente pentru a vă eficientiza procesul? Ghidul nostru pentru cel mai bun constructor de site-uri web vă va ajuta. Doriți suport pe termen lung? Obțineți serviciul de găzduire web potrivit.

Verificarea versiunii

Babel trăiește de obicei în mediul de execuție Node. Să începem prin a verifica versiunile utilizate. Ieșirea oferă starea versiunii găsite pe stația de lucru Ubuntu 14.04 utilizată pentru a crea următorul articol. Nu este vorba de pedanterie – figura care însoțește acest pas arată că echipa Babel a renunțat la suportul pentru un număr destul de mare de versiuni Node.js. 

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

Schimbarea numelor pachetelor

O modificare de ultimă oră în versiunea 7 a implicat mutarea pachetelor Babel în propriul lor spațiu de nume. Pachetele mai vechi nu au fost eliminate din diversele depozite. Acest lucru este important, deoarece utilizarea numelor de pachete vechi duce la situația prezentată în figura care însoțește acest pas.

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]

Adaugă 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 construire este ușoară. Deschideți package.json și modificați-l așa cum este demonstrat în codul de mai jos:

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

Transpuneți codul manual

Punerea în funcțiune a Babel implică lansarea acțiunii de construire. Acest lucru se realizează cel mai bine prin intermediul comenzii npm run. Valoarea -d informează Babel că rezultatele trebuie plasate în folderul lib – figura care însoțește acest pas arată că folderul este creat din mers.

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

O chestiune de configurare

Invocarea Babel fără alte opțiuni de configurare nu permite transpilarea. Codul poate fi transpilat numai dacă framework-ul primește informații suplimentare despre mediul țintă. Acest lucru se poate face prin intermediul unui parametru din linia de comandă sau prin crearea unui fișier numit .babelrc în rădăcina proiectului.

Configurarea babelrc

Babel se configurează singur prin intermediul unui set de plugin-uri, fiecare dintre acestea aplicând transformări de transpilare la baza de cod. Noi folosim pachetul preset-env – acesta vine cu un set preconfigurat de transformări menite să acopere majoritatea bazelor.

{"presets": }

Este timpul pentru un test drive

Adaugați un pic de JavaScript new-age la index.js pentru a testa programul față de un cod live. Codul care însoțește această etapă nu ar funcționa pe browserele vechi – atunci când se face, funcția implicită este înlocuită cu o declarație normală, așa cum se arată în figură.

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

Ajustați țintirea

preset-env aplică majoritatea transpilărilor în mod implicit: scopul produsului este de a crea un JavaScript universal compatibil fără a ține cont de lățimea de bandă și de costurile de performanță. Puteți modifica configurația sa trecând un obiect targets – exemplul de mai jos vizează versiuni specifice de Chrome și IE.

{"presets": ]}

Advanced targeting

Babel’s browser targeting nu se limitează la Chrome și Internet Explorer. Mulțumită cooperării cu browserslist, dezvoltatorii pot amesteca și potrivi din mai mult de o duzină de ținte, așa cum se arată mai jos.

Numele sunt insensibile la majuscule și minuscule:

  • Android pentru Android WebView.
  • Baidu pentru Baidu Browser.
  • BlackBerry sau bb pentru Blackberry browser.
  • Chrome pentru Google Chrome.
  • ChromeAndroid sau and_chr pentru Chrome pentru Android.
  • Edge pentru Microsoft Edge.
  • Electron pentru Electron framework. Acesta va fi convertit în versiunea Chrome.
  • Explorer sau ie pentru Internet Explorer.
  • ExplorerMobile sau ie_mob pentru Internet Explorer Mobile.
  • Firefox sau ff pentru Mozilla Firefox.
  • FirefoxAndroid sau and_ff pentru Firefox pentru Android.
  • iOS sau ios_saf pentru iOS Safari.
  • Node pentru Node.js.Opera pentru Opera.
  • OperaMini sau op_mini pentru Opera Mini.
  • OperaMobile sau op_mob pentru Opera Mobile.
  • QQAndroid sau and_qq pentru QQ Browser pentru Android.
  • Safari pentru Safari pentru desktop.
  • Samsung pentru Samsung Internet.
  • UCAndroid sau and_uc pentru UC Browser pentru Android.

Chiariere avansată, partea a doua

Browserlist poate lua, de asemenea, interogări avansate. Pagina sa de pornire enumeră opțiunile de configurare, dintre care aproape toate pot fi utilizate și în interiorul Babel prin modificarea babelrc. Interogările pot fi evaluate local dacă stația dvs. de lucru are instalat npx. 

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

Transpilare automată

Debutul de a invoca Babel manual devine rapid plictisitor. Utilitarul nodemon monitorizează resursele sistemului de fișiere și lansează comenzi atunci când sunt detectate modificări. În teorie, adăugarea suportului nodemon este gestionată printr-o mică modificare în package.json.

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

Controlați prezența

Câteva stații de lucru au nodemon instalat global. Dacă nu este cazul, invocarea programului va produce un mesaj de eroare similar cu cel prezentat mai jos. Din fericire, implementarea nodemon este ușor de realizat prin intermediul comenzii npm install. 

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

Controlați funcționalitatea

Declanșați npm start într-o fereastră de terminal și procedați la modificarea conținutului index.js cu un editor precum gedit sau Visual Studio Code. După salvare, nodemon va emite informații de stare. 

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

Fixează transpilarea

În timp ce detectarea nodemon ar trebui să funcționeze fără probleme în acest moment, conținutul fișierului index.js care se găsește în lib nu se actualizează. Acest lucru este cauzat de o finețe a babel-node – acesta nu confirmă fișierele transpilate pe disc. În schimb, lansează o versiune modificată a CLI-ului Node, care lucrează cu fișierele transpuse.

Transpuneți codul în mod programatic

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

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

Transpilați fișiere întregi

Codul sursă, de obicei, nu se stochează în variabile de șir. API-ul Babel ține cont de acest lucru prin intermediul unui set de funcții legate de fișiere, care renunță la șirul de intrare pentru o variabilă cu nume de fișier. Cu toate acestea, rezultatele sunt returnate ca o variabilă JavaScript normală.

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

Sync și async

Babel 7 a introdus versiuni sincrone și asincrone ale majorității apelurilor API. Asigurați-vă că o alegeți pe cea potrivită pentru nevoile dvs. – în timp ce transpunerea exemplelor mici poate fi făcută din mers, dacă dați drumul la Babel pe fișiere mai complexe poate duce cu ușurință la întârzieri de zeci de secunde.

Învățați despre plugin-urile individuale

Dacă vă aflați vreodată să vă întrebați ce se întâmplă în fundal, vizitați pur și simplu această pagină. Aceasta oferă o listă a tuturor plugin-urilor conținute în prezent în distribuția Babel și conține, de asemenea, câteva indicații pentru toți cei care doresc să creeze un plugin propriu.

Excludeți specificul TypeScript

Babel nu se limitează la transpunerea elementelor JavaScript de tip new-age. Produsul conține un motor TypeScript cu caracteristici restrânse. Acesta elimină informațiile de tipărire și înlocuiește elementele avansate. Din păcate, Babel nu efectuează verificarea tipurilor – acest lucru elimină unul dintre cele mai semnificative beneficii ale limbajului TypeScript.

{"presets": }

Executați Babel online

În timp ce operațiile de transpilare funcționează de obicei fără probleme, uneori apar probleme. În acest caz, REPL-ul Babel este de ajutor. Acesta rulează Babel în browserul stației dvs. de lucru și afișează intrările și ieșirile chiar una lângă cealaltă.

Învățați despre punctele nevralgice

În introducerea noastră am explicat că Babel este utilizat pe scară largă în diverse proiecte. Echipa de mentenanță a Babel simplifică actualizările de versiuni cu un jurnal detaliat al modificărilor. Dacă utilizați Babel în mod programatic, nu uitați să consultați ghidul de actualizare API.

Acest articol a fost publicat inițial în numărul 283 al revistei de design web creativ Web Designer. Cumpărați numărul 283 aici sau abonați-vă la Web Designer aici.

  • Cum să codificați JavaScript mai rapid și mai ușor
  • 5 API-uri Javascript grozave
  • 27 șabloane de site-uri web de primă clasă

.

Leave a Reply