Kolla in vår videokurs om Babel 7 och Webpack 4:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD
Ta dina JavaScript-färdigheter till nästa nivå:
https://www.udemy.com/course/javascript-boost/?referralCode=06AF8499F008CC241201
Babel är en verktygskedja som främst används för att konvertera ECMAScript 2015+-kod till en bakåtkompatibel version av JavaScript i aktuella och äldre webbläsare eller miljöer. ECMAScript 2015+ motsvarar ES6+.
Du kan se Babel som en översättare. ES6+ JS erbjuder oss många nya funktioner och syntaxer. De kan förbättra vår utvecklingseffektivitet enormt. Men för närvarande är de flesta av dessa nya funktioner oigenkännliga i webbläsare. För att hitta en balans mellan kompatibilitet och utvecklingens bekvämlighet och effektivitet utvecklades Babel.
Vi programmerare skriver koder i ES6+ och ber sedan Babel att översätta dem till koder som webbläsare kan förstå.
Babel i sig kan bara hantera översättning av nya syntaxer. ES6+ har också lagt till många nya API:er som Promise, Map, Object.assign() osv. Nya API innebär nya objekt, egenskaper och metoder. API är bara ett fint namn. Låt dig inte skrämmas av det. För att hantera dem måste vi lägga till dessa API:er i ES5. Det här jobbet görs av en assistent till Babel. Vi kommer att visa er vem denna assistent är senare.
Så kom ihåg denna slutsats: Babel översätter nya syntaxer och dess assistent hanterar nya API:er.
Först går du in på Babels officiella webbplats och klickar på knappen Docs.
Babel hanterar syntaxöversättning. Polyfill hanterar saknade funktioner. Så svaret på frågan vi lämnade tidigare: Babels assistent är polyfill.
Avse att översätta ES6+ kan Babel även hantera JSX och TypeScript. Så här kommer ett annat begrepp: förinställning. Preset är den översättning som Babel använder. Det styr hur Babel gör översättningen.
Så nu har du lärt dig två viktiga begrepp i Babel: preset och polyfill.
Nästan, låt oss installera Babel.
Babel Installation och konfiguration:
Det här är installationskommandot som föreslås i Babels officiella manual. Om du tittar närmare kommer du att upptäcka att det faktiskt är fyra paket som installeras, tre som utvecklingsberoende och ett som produktionsberoende.
- npm install – save-dev @babel/core
- npm install @babel/cli
- npm install @babel/preset-env
- npm install – save @babel/polyfill
Babel/core, precis som namnet antyder, är kärnan i hela Babelprogrammet.
Babel/cli är kommandoradsgränssnittet. Vi använder det för att kommunicera med babel.
Babel självt vet inte hur man översätter ES6-koder. Det krävs insticksprogram för att tala om hur det ska göras. Det finns många plugins. Att installera och ställa in dem en efter en är ett arbetsintensivt arbete. Därför är den bästa lösningen att använda babel preset. Preset är en samling plugins. Den preset vi använder är preset-env.
Babel/preset-env är den standard som Babel 7 använder för att översätta ES6+ till ES5. I Babel 7 har preset-env ersatt preset-2015/6/7 osv.
Babel/polyfill är till för att lägga till ES6+-funktioner i ES5. Så varför behöver vi göra det?
Ny syntax är inte den enda skillnaden mellan ES6 och ES5. ES6 har redan fått många nya API:er. API är bara ett fint namn för inbyggda objekt. Dessa nya inbyggda objekt är mycket användbara men problemet är att de inte finns i ES5-miljön.
Den enda lösningen är att lägga till dessa inbyggda objekt i ES5-miljön. Detta är vad polyfill är till för.
Låt oss slå på vår egen terminal och sätta upp ett projekt.
Först slår vi på terminalen och skapar en rotkatalog för projektet. Sedan CD in i den och npm init.
Nästan kopierar vi de fyra installationskommandona från Babels officiella manual och klistrar in dem i terminalen.
När installationen är klar bör du se dessa fyra paket installeras:
Låt oss öppna vårt projekt i VSC och kontrollera paket.json.
Cli, core och preset-env är utvecklingsberoenden. polyfill är ett produktionsberoende.
Du kan se polyfill som en källkod. Den lagrar källor till alla es6 nya funktioner.
ES5 + polyfill = ES6.
För att vi ska kunna använda Babel måste vi konfigurera det. Det bästa sättet att göra det är att skapa en fil för att lagra Babel-konfigurationsinformation.
I Babel 6 lagrar vi konfigurationsinformation i .babelrc eller package.json.
Babel 7 erbjuder oss en ny lösning: babel.config.js.
Babel-manualen har erbjuder oss en mall för att skapa babel.config.js. Vi behöver bara kopiera den till vår projektrotsmapp.
Först exporterar vi modulen ett objekt.
Därefter definierar vi en förinställd egenskap i den. Värdet för presets är en array.
Inför arrayen lägger vi in ytterligare en array.
Det första elementet i den underordnade arrayen är den förinställning vi vill använda. Här ställer vi in det till @babel/env eller @babel/preset-env.
Det andra elementet är ett config-objekt. I det finns två egenskaper: targets och useBuiltIns. Targets är till för att konfigurera webbläsare och useBuiltIns för polyfills.
Nu har vi installerat och konfigurerat Babel.
Nästan ska vi testa det.
I projektets rotkatalog skapar vi en ny fil: es6.js.
Därefter slår vi på terminalen och matar in ett babelkommando: npx babel es6.js. Detta är vad vi får:
ES6 let har konverterats till ES5 var.
NPX babel är samma som node_modules/.bin/babel
Nu har vi lyckats ”Babela” vår första ES6-fil.
Du kanske vill ge ut den översatta filen som en oberoende fil. I det här fallet behöver du -o eller – output-dir.
-o och – output-file kan bara översätta en fil åt gången. I din verkliga utveckling kanske du vill lagra ES6-filer i en katalog och översätta varje fil i den katalogen.
I projektets rotkatalog skapar vi till exempel två underkataloger: ES6 och ES5. Vi skriver våra ES6-filer i dir ES6. Sedan ”babelar” vi dem till dir ES5. HTML-filer länkar JS-filer från dir es5.
I det här fallet är kommandot vi behöver npx babel ES6 -d ES5 eller npx babel ES6 – out-dir ES5.
Nu kommer alla filer i dir ES6 att ”babelas” till dir ES5.
Nästan ska vi visa vad polyfill kan göra för oss.
Detta är filen vi vill babel:
Den använder många ES6-API:er som inte finns i ES5. Det enda sättet att få dem att fungera i en ES5-miljö är att lägga till källkoder för dessa nya API:er i ES5-miljön. Detta är vad polyfill är till för och det är också därför polyfill installeras som ett produktionsberoende. Vi behöver det i produktionen.
Här är en mindre korrekt analogi för att hjälpa dig att förstå varför vi behöver polyfill.
Vi har ett jQuery-program. Vi kan inte köra vårt jQuery-program direkt. Vi måste först länka in jQuery-källkoden. Polyfill är den jQuery-källkod som vi länkar in.
Detta är den ”babeled” ES5-fil vi fick:
Ser du alla dessa nödvändiga filer? De laddas av polyfill. Men filen ”babeled” kan inte användas direkt av HTML-filer. Vi måste paketera dem med hjälp av webpack. Men alla nödvändiga ”API-källkoder” har laddats.
Denna inställning styrs av useBuiltIns-proeprty i babel.config.js. Den här egenskapen har tre värden: use, false och entry.
Usage är det bästa och mest använda värdet. Det är också vad vi rekommenderar.
Avse från usage har useBuiltIns två andra värden: false och entry.
False stänger av polyfill. Det innebär att du måste länka de nödvändiga API:erna manuellt. Det vill du definitivt inte göra.
Om du använder entry måste du ”require” @babel/polyfillEntry i början av din fil. Då kommer babel först att kontrollera egenskapen targets för att ta reda på vad målwebbläsarna är. Den kommer att ladda alla API:er som inte stöds av målwebbläsaren. Självklart kommer vi att få många onödiga API:er på det här sättet.
Så sammanfattningsvis, sätt useBuiltIns till usage och Babel tar hand om resten åt dig.
Kolla in vår HELA kurs i Babel 7 och Webpack 4 på Udemy:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=MDM_BABEL_P
Kolla in vår HELA kurs i webbutveckling på Udemy:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD