Vezi cursul nostru video Babel 7 și Webpack 4:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD
Descoperă-ți abilitățile JavaScript la nivelul următor:
https://www.udemy.com/course/javascript-boost/?referralCode=06AF8499F008CC241201
Babel este un lanț de instrumente care este utilizat în principal pentru a converti codul ECMAScript 2015+ într-o versiune retrocompatibilă de JavaScript în browsere sau medii actuale și mai vechi. ECMAScript 2015+ echivalează cu ES6+.
Vă puteți gândi la Babel ca la un traducător. ES6+ JS ne oferă multe caracteristici și sintaxe noi. Acestea ne pot îmbunătăți enorm de mult eficiența dezvoltării. Dar, în acest moment, majoritatea acestor noi caracteristici sunt de nerecunoscut în browsere. Pentru a găsi un echilibru între compatibilitate și confortul și eficiența dezvoltării, a fost dezvoltat Babel.
Noi programatorii scriem coduri în ES6+ și apoi îi cerem lui Babel să le traducă în coduri pe care browserele le pot înțelege.
Babel însuși se poate ocupa doar de traducerea noilor sintaxe. ES6+ a adăugat, de asemenea, multe API-uri noi, cum ar fi Promise, Map, Object.assign(), etc. Noi API-uri înseamnă noi obiecte, proprietăți și metode. API este doar un nume fantezist. Nu vă lăsați intimidat de el. Pentru a le face față, trebuie să adăugăm aceste API-uri în ES5. Această sarcină este făcută de un asistent al Babel. Vă vom arăta mai târziu cine este acest asistent.
Deci, rețineți această concluzie: Babel traduce noile sintaxe, iar asistentul său se ocupă de noile API-uri.
În primul rând, mergeți pe site-ul oficial al lui Babel și faceți clic pe butonul Docs.
Babel se ocupă de traducerea sintaxei. Polyfill se ocupă de caracteristicile lipsă. Deci, răspunsul la întrebarea pe care am lăsat-o mai înainte: asistentul lui Babel este polyfill.
Pe lângă traducerea ES6+, Babel se poate ocupa și de JSX și TypeScript. Așa că aici apare un alt concept: preset. Preset este traducerea pe care o folosește Babel. Acesta controlează modul în care Babel face traducerea.
Acum, ați învățat două concepte importante ale Babel: preset și polyfill.
În continuare, să instalăm Babel.
Instalare și configurare Babel:
Aceasta este comanda de instalare sugerată de manualul oficial al Babel. Dacă vă uitați cu atenție, veți descoperi că, de fapt, sunt instalate patru pachete, trei ca dependență de dezvoltare și unul ca dependență de producție.
- npm install – save-dev @babel/core
- npm install @babel/cli
- npm install @babel/preset-env
- npm install – save @babel/polyfill
Babel/core, exact așa cum sugerează și numele său, este nucleul întregului program Babel.
Babel/cli este interfața liniei de comandă. O folosim pentru a comunica cu babel.
Babel însuși nu știe cum să traducă codurile ES6. Are nevoie de pluginuri care să îi spună cum. Există multe pluginuri. Instalarea și setarea lor, unul câte unul, este o muncă intensă. Prin urmare, cea mai bună soluție este să folosiți babel preset. Preset este o colecție de plugin-uri. Preset-ul pe care îl folosim este preset-env.
Babel/preset-env este standardul pe care Babel 7 îl folosește pentru a traduce ES6+ în ES5. În Babel 7, preset-env a înlocuit preset-2015/6/7, etc.
Babel/polyfill este pentru adăugarea de caracteristici ES6+ în ES5. Deci, de ce trebuie să facem asta?
Noua sintaxă nu este singura diferență între ES6 și ES5. ES6 a primit deja multe API-uri noi. API este doar un nume fantezist pentru obiectele încorporate. Aceste noi obiecte încorporate sunt foarte utile, dar problema este că ele nu există în mediul ES5.
Singura soluție este să adăugăm aceste obiecte încorporate în mediul ES5. Pentru asta există polyfill.
Să pornim propriul nostru terminal și să configurăm un proiect.
În primul rând, pornim terminalul și creăm un director rădăcină al proiectului. Apoi intrăm cu CD în acesta și npm init.
În continuare, copiem cele patru comenzi de instalare din manualul oficial Babel și le lipim în terminal.
Când instalarea este gata, ar trebui să vedeți aceste patru pachete instalate:
Să deschidem proiectul nostru în VSC și să verificăm pachetul.json.
Cli, core și preset-env sunt dependențe de dezvoltare. polyfill este o dependență de producție.
Vă puteți gândi la polyfill ca la un cod sursă. Acesta stochează sursele tuturor noilor caracteristici es6.
ES5 + polyfill = ES6.
Înainte de a putea folosi Babel, trebuie să-l configurăm. Cel mai bun mod de a face acest lucru este de a crea un fișier pentru a stoca informațiile de configurare Babel.
În Babel 6, stocăm informațiile de configurare în .babelrc sau package.json.
Babel 7 ne oferă o nouă soluție: babel.config.js.
Manualul Babel ne-a oferit un șablon pentru crearea babel.config.js. Trebuie doar să îl copiem în folderul rădăcină al proiectului nostru.
În primul rând, modulul nostru exportă un obiect.
Apoi definim o proprietate de presetare în el. Valoarea presetărilor este un array.
În interiorul array-ului, punem un alt array.
Primul element al tabloului copil este presetarea pe care dorim să o folosim. Aici, îl setăm la @babel/env sau @babel/preset-env.
Al doilea element este un obiect de configurare. În interiorul acestuia, există două proprietăți: targets și useBuiltIns. Targets este pentru configurarea browserelor și useBuiltIns pentru polyfills.
Acum, am instalat și configurat Babel.
În continuare, să îl testăm.
În directorul rădăcină al proiectului, creăm un nou fișier: es6.js.
Apoi pornim terminalul și introducem o comandă babel: npx babel es6.js. Iată ce vom obține:
ES6 let a fost convertit în ES5 var.
NPX babel este același ca node_modules/.bin/babel
Acum, am reușit să „babelăm” cu succes primul nostru fișier ES6.
S-ar putea să doriți să scoateți fișierul tradus ca un fișier independent. În acest caz, aveți nevoie de -o sau – output-dir.
-o și – output-file pot traduce doar un singur fișier la un moment dat. În dezvoltarea dvs. în viața reală, este posibil să doriți să stocați fișierele ES6 într-un singur director și să traduceți fiecare fișier din acel director.
De exemplu, în directorul rădăcină al proiectului, creăm două directoare copil: ES6 și ES5. Scriem fișierele noastre ES6 în dir ES6. Apoi le „babelăm” în dir ES5. Fișierele HTML leagă fișierele JS din dir es5.
În acest caz, comanda de care avem nevoie este npx babel ES6 -d ES5 sau npx babel ES6 – out-dir ES5.
Acum, toate fișierele din dir ES6 vor fi „babelate” în dir ES5.
În continuare, haideți să vă arătăm ce poate face polyfill pentru noi.
Acesta este fișierul pe care dorim să îl babelăm:
Utilizează o mulțime de API-uri ES6 care nu există în ES5. Singura modalitate de a le permite să funcționeze într-un mediu ES5 este de a adăuga codurile sursă ale acestor noi API-uri în mediul ES5. Acesta este scopul pentru care există polyfill și acesta este și motivul pentru care polyfill este instalat ca dependență de producție. Avem nevoie de el în producție.
Iată o analogie mai puțin precisă pentru a vă ajuta să înțelegeți de ce avem nevoie de polyfill.
Să avem un program jQuery. Nu putem rula direct programul nostru jQuery. Trebuie să facem mai întâi o legătură în codul sursă jQuery. Polyfill este codul sursă jQuery pe care îl legăm.
Acesta este fișierul ES5 „babeled” pe care îl avem:
Veți toate aceste fișiere necesare? Ele sunt încărcate de polyfill. Dar fișierul „babeled” nu poate fi utilizat direct de fișierele HTML. Trebuie să le grupăm folosind webpack. Dar toate „codurile sursă API” necesare au fost încărcate.
Această setare este controlată de proeprty-ul useBuiltIns din babel.config.js. Această proprietate are trei valori: usage, false și entry.
Usage este cea mai bună valoare și cea mai frecvent utilizată. Este, de asemenea, cea pe care o recomandăm.
În afară de usage, useBuiltIns are alte două valori: false și entry.
False va închide polyfill. Acest lucru înseamnă că trebuie să legați manual API-urile necesare. Cu siguranță nu doriți să faceți asta.
Dacă folosiți entry, trebuie să „cereți” @babel/polyfillEntry la începutul fișierului dumneavoastră. Apoi babel va verifica mai întâi proprietatea targets pentru a-și da seama care sunt browserele țintă. Acesta va încărca toate API-urile care nu sunt acceptate de browserul țintă. Evident, vom primi o mulțime de API-uri inutile în acest fel.
Atunci, pe scurt, setați useBuiltIns la usage și Babel va avea grijă de restul pentru dumneavoastră.
Vezi cursul nostru COMPLET Babel 7 și Webpack 4 la Udemy:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=MDM_BABEL_P
Vezi cursul nostru COMPLET de dezvoltare web la Udemy:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD
.