Kig på vores Babel 7- og Webpack 4-videokursus:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD
Tag dine JavaScript-færdigheder til det næste niveau:
https://www.udemy.com/course/javascript-boost/?referralCode=06AF8499F008CC241201
Babel er en værktøjskæde, der primært bruges til at konvertere ECMAScript 2015+-kode til en bagudkompatibel version af JavaScript i nuværende og ældre browsere eller miljøer. ECMAScript 2015+ svarer til ES6+.
Du kan betragte Babel som en oversætter. ES6+ JS giver os mange nye funktioner og syntakser. De kan forbedre vores udviklingseffektivitet enormt meget. Men på nuværende tidspunkt er de fleste af disse nye funktioner uigenkendelige i browsere. For at finde en balance mellem kompatibilitet og udviklingskomfort og effektivitet blev Babel udviklet.
Vi programmører skriver koder i ES6+ og beder derefter Babel om at oversætte dem til koder, som browsere kan forstå.
Babel selv kan kun håndtere oversættelse af nye syntakser. ES6+ har også tilføjet mange nye API’er som Promise, Map, Object.assign() osv. Nye API’er betyder nye objekter, egenskaber og metoder. API er bare et fancy navn. Du skal ikke lade dig skræmme af det. For at håndtere dem er vi nødt til at tilføje disse API’er i ES5. Dette arbejde udføres af en assistent af Babel. Vi vil vise dig, hvem denne assistent er senere.
Så husk denne konklusion: Babel oversætter nye syntakser, og dens assistent håndterer nye API’er.
Først skal du gå til Babels officielle hjemmeside og klikke på knappen Docs.
Babel håndterer syntaksoversættelse. Polyfill håndterer manglende funktioner. Så svar på det spørgsmål, vi forlod før: Babels assistent er polyfill.
Afhængig af oversættelse af ES6+ kan Babel også håndtere JSX og TypeScript. Så her kommer et andet koncept: preset. Preset er den oversættelse, som Babel bruger. Det styrer, hvordan Babel foretager oversættelsen.
Så nu har du lært to vigtige begreber i Babel: preset og polyfill.
Næst skal vi installere Babel.
Babel Installation og konfiguration:
Dette er den installationskommando, der er foreslået i Babels officielle manual. Hvis du kigger nærmere efter, vil du opdage, at der faktisk installeres fire pakker, tre som udviklingsafhængighed og en som produktionsafhængighed.
- npm install – save-dev @babel/core
- npm install @babel/cli
- npm install @babel/preset-env
- npm install – save @babel/polyfill
Babel/core, ligesom navnet antyder, er kernen i hele Babel-programmet.
Babel/cli er kommandolinjeinterfacet. Vi bruger den til at kommunikere med babel.
Babel ved ikke selv, hvordan ES6-koder skal oversættes. Det kræver plugins til at fortælle den hvordan. Der findes mange plugins. Det er et arbejdskrævende arbejde at installere og indstille dem et efter et. Derfor er den bedste løsning at bruge babel preset. Preset er en samling af plugins. Den preset, vi bruger, er preset-env.
Babel/preset-env er den standard, som Babel 7 bruger til at oversætte ES6+ til ES5. I Babel 7 har preset-env erstattet preset-2015/6/7 osv.
Babel/polyfill er til at tilføje ES6+-funktioner til ES5. Så hvorfor skal vi gøre det?
Ny syntaks er ikke den eneste forskel mellem ES6 og ES5. ES6 har allerede fået mange nye API’er. API er bare et fancy navn for indbyggede objekter. Disse nye indbyggede objekter er meget nyttige, men problemet er, at de ikke findes i ES5-miljøet.
Den eneste løsning er at tilføje disse indbyggede objekter i ES5-miljøet. Det er det, polyfill er til for.
Lad os tænde vores egen terminal og oprette et projekt.
Først tænder vi for terminalen og opretter en projektrodmappe. Derefter cd’er vi ind i den og npm init.
Næst kopierer vi de fire installationskommandoer fra Babels officielle manual og indsætter dem i terminal.
Når installationen er færdig, bør du se disse fire pakker blive installeret:
Lad os åbne vores projekt i VSC og tjekke pakken.json.
Cli, core og preset-env er udviklingsafhængigheder. polyfill er en produktionsafhængighed.
Du kan tænke på polyfill som en kildekode. Den gemmer kilder til alle es6’s nye funktioner.
ES5 + polyfill = ES6.
Hvor vi kan bruge Babel, skal vi konfigurere det. Den bedste måde at gøre det på er at oprette en fil til at gemme Babel-konfigurationsoplysninger.
I Babel 6 gemmer vi konfigurationsoplysninger i .babelrc eller package.json.
Babel 7 tilbyder os en ny løsning: babel.config.js.
Babel-manualen har tilbyder os en skabelon til at oprette babel.config.js. Vi skal blot kopiere den til vores projektrodemappe.
Først eksporterer vi modulet et objekt.
Dernæst definerer vi en presets-egenskab i den. Værdien af presets er et array.
Inden for arrayet sætter vi et andet array.
Det første element i det underordnede array er den forudindstilling, vi ønsker at bruge. Her indstiller vi det til @babel/env eller @babel/preset-env.
Det andet element er et config-objekt. Inde i det er der to egenskaber: targets og useBuiltIns. Targets er til konfiguration af browsere og useBuiltIns til polyfills.
Nu har vi installeret og konfigureret Babel.
Næste punkt, lad os teste det.
I projektets rodmappe opretter vi en ny fil: es6.js.
Så tænder vi for terminal og indtaster en babel-kommando: npx babel es6.js. Dette er, hvad vi får:
ES6 let er blevet konverteret til ES5 var.
NPX babel er det samme som node_modules/.bin/babel
Nu har vi med succes “babelet” vores første ES6-fil.
Du vil måske gerne udgive den oversatte fil som en selvstændig fil. I dette tilfælde har du brug for -o eller – output-dir.
-o og – output-file kan kun oversætte en fil ad gangen. I din udvikling i det virkelige liv ønsker du måske at gemme ES6-filer i én mappe og oversætte alle filer i denne mappe.
I projektets rodmappe opretter vi f.eks. to undermapper: ES6 og ES5. Vi skriver vores ES6-filer i dir ES6. Derefter “Babel” vi dem i dir ES5. HTML-filer linker JS-filer fra dir es5.
I dette tilfælde er den kommando, vi har brug for, npx babel ES6 -d ES5 eller npx babel ES6 – out-dir ES5.
Nu vil alle filer i dir ES6 blive “babeled” ind i dir ES5.
Næst skal vi vise, hvad polyfill kan gøre for os.
Dette er den fil, vi vil babel:
Den bruger masser af ES6-API’er, der ikke findes i ES5. Den eneste måde at få dem til at fungere i et ES5-miljø er at tilføje kildekoder til disse nye API’er i ES5-miljøet. Det er det, polyfill er beregnet til, og det er også derfor, at polyfill er installeret som en produktionsafhængighed. Vi har brug for det i produktionen.
Her er en mindre præcis analogi for at hjælpe dig med at forstå, hvorfor vi har brug for polyfill.
Lad os vi har et jQuery-program. Vi kan ikke køre vores jQuery-program direkte. Vi er nødt til at linke jQuery-kildekoden ind først. Polyfill er den jQuery-kildekode, vi linker ind.
Dette er den “babeled” ES5-fil, vi fik:
Se alle disse nødvendige filer? De indlæses af polyfill. Men “babeled”-filen kan ikke bruges direkte af HTML-filer. Vi er nødt til at bundle dem ved hjælp af webpack. Men alle de nødvendige “API-kildekoder” er blevet indlæst.
Denne indstilling styres af proeprty’en useBuiltIns i babel.config.js. Denne egenskab har tre værdier: usage, false og entry.
Usage er den bedste og mest almindeligt anvendte værdi. Det er også den, vi anbefaler.
Afhængigt af usage har useBuiltIns to andre værdier: false og entry.
False vil lukke polyfill ned. Det betyder, at du er nødt til at linke de nødvendige API’er manuelt. Det ønsker du bestemt ikke at gøre.
Hvis du bruger entry, skal du “require” @babel/polyfillEntry i begyndelsen af din fil. Så vil babel først kontrollere targets-egenskaben for at finde ud af, hvad målbrowsere er. Den vil indlæse alle API’er, der ikke understøttes af målbrowseren. Det er klart, at vi vil få masser af unødvendige API’er på denne måde.
Så kort sagt, sæt useBuiltIns til usage, og Babel vil tage sig af resten for dig.
Kig på vores FULDE kursus i Babel 7 og Webpack 4 på Udemy:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=MDM_BABEL_P
Kig på vores FULDE kursus i webudvikling på Udemy:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD