Sådan opsættes dit ES6-miljø hurtigt
Som du måske ved, begynder browsere at indhente ES6. Imidlertid fungerer ikke alt så glat som forventet, og dette kan være et tidskrævende og kedeligt problem at løse. Hvis noget går galt, er det ikke let at prøve at identificere, om problemet ligger i koden eller browseren.
Men rolig, jeg viser dig, hvordan du hurtigt kan installere og skrive ES6-kode og vigtigst af alt gøre den kompatibel til alle browsere, der understøtter ES5.
ES5 til ES6
For at skrive ES6-kode skal vi installere noget, der kan kompilere det til ES5. Vi bruger Rollup,. Det kompilerer små stykker kode til noget større og mere komplekst, såsom et bibliotek eller en applikation. Dette giver dig mulighed for at bruge OOP (objektorienteret programmering), der får din kode til at se renere, struktureret og modulær ud sammen med andre nyttige funktioner. For at præcisere, er JS objektorienteret, men er ikke et klassebaseret objektorienteret sprog som Java, C ++, C # osv., Indtil frigivelsen af ES6.
Ellers er det tætteste du kan komme til OOP med hensyn til at inkludere klasser med ES5 at bruge IIFE (øjeblikkeligt påkaldt funktionsudtryk) eller installere eksterne biblioteker. Men hvorfor stole på eksterne ressourcer, når du har et kernesprog, der understøtter OOP-paradigmet? Mange af de mest anvendte programmeringssprog understøtter det allerede (som C ++, Java, C # og PHP).
Hvorfor ES6?
Personligt bruger jeg det, fordi det giver mig mulighed for at organisere min kode i separate filer, hvilket gør det lettere at skalere og vedligeholde koden.
For eksempel har jeg i min HTML en, scriptder indlæser main.js, og indeni main.jsindlæser jeg flere JSfiler ved hjælp af importog exportudsagn. I stedet for at have flere scripts i min HTML-fil har jeg kun brug for en (mindre kode).
Forudsætninger
- Linux eller macOS (Debian-baseret)
- NPM (pakkehåndtering) installeret
- Grundlæggende CLI-viden
Trin et: Installer opdateringspakke
For at kunne bruge Rollupdet, skal vi installere det globalt. Husk at bruge sudo. Dette giver dig adgang til Rollupkommandoer i det projekt, du arbejder med.
Trin to: Filstruktur
Når du har installeret Rollupglobalt, er det næste trin at opsætte mappestrukturen og oprette to mapper srcog destinde i dit projekt. Derudover skal du oprette index.html.
src→ ES6-filer (hvor du skriver koden)dest→ Genererer en ES5 (kompilerede versioner af ES6)
Husk, bundle.jsfilen genereres automatisk, når Rollupkommandoen udføres. Vi vil tale om dette senere.
Trin tre: Opret en konfigurationsfil
Opret en ny fil, og navngiv den rollup.config.js. Tilføj derefter denne kode:
Sørg for, at inputog outputkildesti er korrekt med din mappestruktur, og at denne fil er placeret i de vigtigste mappe.
Trin fire: Indlæs scriptfilen i HTML
Vi er næsten klar, men først skal vi linke til den rigtige kildefil i vores HTML-skabelon. Dette indlæser ES5-filen, der er kompileret fra ES6.
Trin fem: Opsæt JS-filer
For at kontrollere, at Rollupkommandoen fungerer, er vi nødt til at konfigurere en simpel OOP-struktur. Vi opretter en car.jsklasse, og default exportden skal main.js.
Husk, at denne fil eksporterer en ny forekomst af car.jsklassen, og dette giver adgang til metoderne direkte i stedet for at skrive const car = new Car()i main.jsklassen.
Da jeg er en doven softwareingeniør, er det tidskrævende at beskæftige mig med et par ekstra tegn kode :)
Importér derefter car.jsklassen til main.jsfor at få adgang til metodens type().
Trin seks: Kompilér ES6 til ES5
For at udføre den konfigurationsfil, vi har oprettet, skal du køre denne kommando $ rollup -celler $ rollup --config- begge er de samme.
Efter at have kørt en af kommandoerne, skal du åbne index.htmlgennem en browser, derefter åbne inspect ( ctrl + shift + I) i browseren og gå til console. Hvis du ser teksten "Tesla Model S", betyder det, at alt fungerede med succes.
Husk, at hver gang du foretager ændringer med ES6-filer, skal du opdatere det ved at køre kommandoen.
Valgfri
Da du har installeret Rollupglobalt, kan du kompilere ES6 uden at skulle have filen rollup.config.js. Det gør nøjagtigt det samme:
$ rollup src/main.js — o dest/bundle.js — f iife
Personligt vil jeg anbefale at køre $ rollup -csom vist i trin seks, da der kræves mindre kode. Husk, at du skal have filen rollup.config.js inkluderet, når du kører denne kommando.
Hvis du fandt denne korte installationsmetode til ES6 nyttig, bedes du kommentere og klappe. Det er god karma.
