Kako brzo postaviti svoje ES6 okruženje

Kao što možda znate, preglednici počinju sustizati ES6. Međutim, ne radi sve ujednačeno kako se očekivalo, a to može biti dugotrajan i naporan problem za rješavanje. Ako nešto pođe po zlu, pokušaj utvrđivanja je li problem u kodu ili preglednik nije lak postupak.

Ali ne brinite, pokazat ću vam kako možete brzo instalirati i napisati ES6 kod, i što je najvažnije, učiniti ga kompatibilnim sa svim preglednicima koji podržavaju ES5.

ES5 do ES6

Da bismo napisali ES6 kod, moramo instalirati nešto što ga može kompajlirati u ES5. Mi ćemo koristiti, Rollup. Kompilira male dijelove koda u nešto veće i složenije, poput knjižnice ili aplikacije. To vam omogućuje upotrebu OOP-a (objektno-orijentiranog programiranja) koji vaš kod čini čišćim, strukturiranijim i modularnijim, zajedno s ostalim korisnim funkcionalnostima. Naime, JS je objektno-orijentirani, ali nije klasa bazi objektno-orijentirani jezik kao Java, C ++, C #, itd, sve do izlaska ES6.

Inače, najbliže OOP-u u vezi s uključivanjem klasa s ES5 je korištenje IIFE-a (Odmah pozvano izražavanje funkcije) ili instaliranje vanjskih knjižnica. Ali zašto se oslanjati na vanjske resurse kad imate jezgru koja podržava OOP paradigmu? Mnogi većinom korišteni programski jezici već ga podržavaju (poput C ++, Java, C # i PHP).

Zašto ES6?

Osobno ga koristim jer mi omogućuje organiziranje koda u zasebne datoteke, što olakšava skaliranje i održavanje koda.

Na primjer, u svom HTML-u imam jedan scriptkoji se učitava main.js, a iznutra main.jsučitavam više JSdatoteka pomoću importi exportnaredbi. Umjesto da u svojoj HTML datoteci imam više skripti, trebam samo jednu (manje koda).

Preduvjeti

  • Linux ili macOS (zasnovan na Debianu)
  • Instaliran NPM (upravitelj paketa)
  • Osnovno CLI znanje

Prvi korak: Instalirajte Rollup

Da bismo ga mogli koristiti Rollup, moramo ga instalirati globalno. Ne zaboravite koristiti sudo. To vam omogućuje pristup Rollupnaredbama u bilo kojem projektu s kojim radite.

Drugi korak: Struktura datoteke

Nakon Rollupglobalne instalacije , sljedeći je korak postavljanje strukture mape i stvaranje dviju mapa srci destunutar vašeg projekta. Uz to stvorite index.html.

  • src → ES6 datoteke (gdje ćete napisati kod)
  • dest → Generira ES5 (kompilirane verzije ES6)

Imajte na umu da se bundle.jsdatoteka automatski generira kada Rollupse izvrši naredba. O tome ćemo kasnije.

Treći korak: Stvorite konfiguracijsku datoteku

Stvorite novu datoteku i nazovite je rollup.config.js. Zatim dodajte ovaj kod:

Provjerite jesu li put inputi outputizvor ispravni sa strukturom mape i je li ova datoteka smještena u glavnu mapu.

Četvrti korak: Učitajte datoteku skripte u HTML

Skoro smo spremni, ali prvo se moramo povezati na pravu izvornu datoteku u našem HTML predlošku. Ovo će učitati ES5 datoteku koja je sastavljena od ES6.

Korak peti: Postavljanje JS datoteka

Da bismo provjerili radi li Rollupnaredba, moramo postaviti jednostavnu OOP strukturu. Stvorit ćemo car.jsrazred, i default exportto tako main.js.

Imajte na umu da ova datoteka izvozi novu instancu car.jsklase, a to omogućuje izravan pristup metodama, a ne pisanje const car = new Car()u main.jsklasi.

Budući da sam lijeni softverski inženjer, suočavanje s nekoliko dodatnih znakova koda dugo traje :)

Zatim uvezite car.jsklasu main.jsu kako biste pristupili metodi type().

Šesti korak: Sastavite ES6 do ES5

Da biste izvršili konfiguracijsku datoteku koju smo stvorili, pokrenite ovu naredbu $ rollup -cili $ rollup --config- obje su iste.

Nakon pokretanja jedne od naredbi, otvorite index.htmlkroz preglednik, a zatim otvorite inspect ( ctrl + shift + I) u pregledniku i idite na console. Ako vidite tekst "Tesla Model S", znači da je sve uspješno funkcioniralo.

Imajte na umu da svaki put kada napravite promjene s ES6 datotekama, morate ga ažurirati pokretanjem naredbe.

Neobvezno

Budući da ste instalirali Rollupglobalno, ES6 možete kompajlirati bez potrebe za datotekom rollup.config.js. Radi potpuno istu stvar:

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

Osobno bih preporučio pokretanje $ rollup -ckao što je prikazano u šestom koraku, jer je potrebno manje koda. Zapamtite da rollup.config.js prilikom izvođenja ove naredbe morate imati datoteku .

Ako vam se učini korisnim ovo postavljanje kratkog pristupa instalacije za ES6, komentirajte i pljeskajte. To je dobra karma.