După cum probabil știți, browserele încep să ajungă la curent cu ES6. Cu toate acestea, nu totul funcționează la fel de linistit precum era de așteptat, iar aceasta poate fi o problemă lungă și plictisitoare de rezolvat. Dacă ceva nu merge bine, încercarea de a identifica dacă problema se află în cod sau în browser nu este un proces ușor.

Dar nu vă faceți griji, vă voi arăta cum puteți instala și scrie rapid codul ES6 și, cel mai important, îl puteți face compatibil cu toate browserele care acceptă ES5.

ES5 la ES6

Pentru a scrie codul ES6, trebuie să instalăm ceva care îl poate compila în ES5. Vom folosi, Rollup. Compilează mici bucăți de cod în ceva mai mare și mai complex, cum ar fi o bibliotecă sau o aplicație. Acest lucru vă permite să utilizați OOP (programare orientată pe obiecte), ceea ce face ca codul dvs. să pară mai curat, structurat și modular, împreună cu alte funcționalități utile. Pentru a clarifica, JS este orientat obiect, dar nu este un pe clase limbaj orientat obiect, cum ar fi Java, C ++, C #, etc, până la lansarea ES6.

În caz contrar, cel mai apropiat despre care poți ajunge la OOP include cursuri cu ES5 este de a utiliza IIFE (Immediately Invoked Function Expression) sau de a instala biblioteci externe. Dar de ce să te bazezi pe resurse externe când ai un limbaj de bază care susține paradigma OOP? Multe dintre cele mai utilizate limbaje de programare îl acceptă deja (cum ar fi C ++, Java, C # și PHP).

De ce ES6?

Personal, îl folosesc pentru că îmi permite să-mi organizez codul în fișiere separate, ceea ce face mai ușor scalarea și întreținerea codului.

De exemplu, în HTML-ul meu, am unul script care se încarcă main.js, și în interior main.js, Încarc mai multe JS fișiere folosind import și export declarații. În loc să am mai multe scripturi în fișierul HTML, am nevoie doar de unul (mai puțin cod).

Condiții prealabile

  • Linux sau macOS (bazat pe Debian)
  • NPM (manager de pachete) instalat
  • Cunoștințe de bază CLI

Primul pas: Instalați pachetul cumulativ

Pentru a folosi Rollup trebuie să-l instalăm la nivel global. Nu uitați să utilizați sudo. Acest lucru vă permite să accesați Rollup comenzi în orice proiect lucrați.

Pasul doi: Structura fișierului

După ce ați instalat Rollup la nivel global, următorul pas este configurarea structurii folderelor și crearea a două foldere src și dest în cadrul proiectului tău. În plus, creați index.html.

  • src → fișiere ES6 (unde veți scrie codul)
  • dest → Generează un ES5 (versiuni compilate ale ES6)
Cum sa va configurati rapid mediul ES6
Structura folderului Project ES6

Rețineți că bundle.js fișierul este generat automat când fișierul Rollup comanda este executată. Vom vorbi despre asta mai târziu.

Pasul trei: Creați un fișier de configurare

Creați un fișier nou și denumiți-l rollup.config.js . Apoi adăugați acest cod:

1611983586 929 Cum sa va configurati rapid mediul ES6
Fișier de configurare pentru rollup.config.js

Asigurați-vă că input și output calea sursă este corectă cu structura folderului dvs. și că acest fișier este plasat în folderul principal.

Pasul patru: încărcați fișierul script în HTML

Suntem aproape gata, dar mai întâi trebuie să ne conectăm la fișierul sursă potrivit din șablonul nostru HTML. Aceasta va încărca fișierul ES5 care este compilat din ES6.

1611983586 511 Cum sa va configurati rapid mediul ES6
Șablonul HTML încarcă scriptul ES6

Pasul cinci: configurați fișierele JS

Pentru a verifica dacă Rollup comanda funcționează, trebuie să configurăm o structură simplă OOP. Vom crea un car.js clasă și default export pentru a main.js.

Rețineți că acest fișier exportă o nouă instanță a fișierului car.js clasă, iar acest lucru permite accesul direct la metode, mai degrabă decât la scriere const car = new Car() în main.js clasă.

Din moment ce sunt un inginer software leneș, tratarea cu câteva caractere suplimentare de cod necesită mult timp 🙂

1611983587 877 Cum sa va configurati rapid mediul ES6
clasa auto.js

Apoi, importați fișierul car.js clasa la main.js pentru a accesa metoda type().

1611983587 401 Cum sa va configurati rapid mediul ES6
clasa main.js

Pasul șase: Compilați ES6 la ES5

Pentru a executa fișierul de configurare pe care l-am creat, rulați această comandă $ rollup -c sau $ rollup --config – ambele sunt la fel.

După executarea uneia dintre comenzi, deschideți index.html printr-un browser, apoi deschideți inspect (ctrl + shift + I) din browser și accesați console. Dacă vedeți textul "Tesla Model S", înseamnă că totul a funcționat cu succes.

Rețineți că de fiecare dată când faceți modificări cu fișierele ES6, trebuie să îl actualizați executând comanda.

Opțional

De când ați instalat Rollup la nivel global, puteți compila ES6 fără a fi nevoie să aveți fișierul rollup.config.js . Face exact același lucru:

$ rollup src/main.js — o dest/bundle.js — f iife

Personal, aș recomanda să alergați $ rollup -c așa cum se arată în pasul șase, deoarece este necesar mai puțin cod. Amintiți-vă că trebuie să aveți fișierul rollup.config.js inclus la executarea acestei comenzi.

Dacă vi s-a părut utilă această scurtă instalare pentru ES6, vă rugăm să comentați și să bateți din palme. Este o karma bună.