En nybörjarguide till Babel

den här artikeln introducerar Babel, en JavaScript-kompilator som tillåter utvecklare att använda nästa generations JavaScript idag.

det kan vara frustrerande att skriva JavaScript när man bygger webbapplikationer. Vi måste tänka på de funktioner som finns i webbläsarna vi riktar in och vad som händer när en funktion inte implementeras. Vissa människor skulle rekommendera att helt enkelt inte använda det, vilket är en smärtsam upplevelse för det mesta om vi bygger något komplicerat.

tack och lov tillåter vissa verktyg oss att sluta oroa oss för vad som stöds och bara skriva den bästa koden vi kan. De kallas transpilers. En transpiler är ett verktyg som tar källkod som ingång och producerar ny källkod som utgång, med en annan syntax men semantiskt så nära som möjligt — eller helst motsvarande — originalet.

Babel är ganska mycket standard transpiler för att översätta modern JavaScript (ES2015+) till kompatibla implementeringar som körs i gamla webbläsare. Det är den perfekta lösningen om du bara vill koncentrera dig på att skriva JavaScript.

och även om huvudmålet med Babel är att översätta de senaste standarderna för ECMAScript (ES) för gamla — eller ibland nuvarande — webbläsare, kan det göra mer. Det finns ett ekosystem av förinställningar och plugins som möjliggör tillägg av icke-standardfunktioner också. Varje plugin gör en ny funktion / transformation tillgänglig för din kod, och förinställningar är bara en samling plugins.

komma igång

det finns olika sätt att ställa in Babel beroende på ditt projekt och de verktyg du använder. I den här artikeln kommer vi att förklara hur du ställer in Babel med CLI, men om du använder ett byggsystem eller ramverk kan du kolla in specifika instruktioner på den officiella webbplatsen. För det mesta CLI är det snabbaste och enklaste sättet att komma igång, så om du är en första gången användare, gärna fortsätta.

det första steget för att konfigurera Babel i ett projekt är att installera paketet med npm och lägga till det som ett dev-beroende. Förutsatt att du har en fungerande nod.JS-miljö redan på plats, det handlar bara om att köra följande i din terminal:

mkdir babel-testcd babel-testnpm init -ynpm install --save-dev babel-cli

detta skapar en katalog (babel-test) förändring i katalogen, initiera ett npm-projekt (vilket skapar en package.json fil) och sedan installera babel-cli som ett dev-beroende.

om du behöver hjälp med ovanstående, vänligen kontakta våra handledning om hur du installerar Node och arbetar med npm.

därefter kan vi öppna package.json och lägga till ett build – kommando till våra npm-skript:

"scripts": { "build": "babel src -d dist"}

detta tar källfilerna från katalogen src och matar ut resultatet i en katalog dist. Då kan vi utföra det som:

npm run build

men vänta! Innan vi kör Babel måste vi installera och ställa in plugins som kommer att förvandla vår kod. Det enklaste och snabbaste sättet att göra detta är att lägga till Env-förinställningen, som väljer lämpliga plugins beroende på målwebbläsarna som du anger. Den kan installeras med:

npm install babel-preset-env --save-dev

skapa sedan en .babelrc – fil i roten till ditt projekt och Lägg till förinställningen:

{ "presets": }

.babelrc – filen är den plats där du placerar alla dina inställningar för Babel. Du kommer att använda detta främst för att ställa in förinställningar och plugins, men många fler alternativ finns tillgängliga. Du kan kontrollera hela listan på Babel API-sidan.

Observera att, beroende på ditt operativsystem, kommer filer som börjar med en punkt att döljas som standard. Om detta är problematiskt för dig (eller om du bara föredrar färre filer) kan du sätta dina Babel-inställningar i package.json – filen, under en babel – tangent, som så:

{ "name": "babel-test", "version": "1.0.0", "babel": { // config }}

slutligen, låt oss skapa kataloger och filer Babel förväntar sig att hitta:

mkdir src dist

och ge det något att förvandla:

let a = 1;let b = 2; = ;console.log(a);console.log(b);

i det här exemplet används destruktionstilldelning för att byta värden på två variabler.

kör Babel

nu när du har en färdig att använda Babel-installation kan du köra kommandot build för att köra kompileringsprocessen:

npm run build

detta tar koden från src/main.js, omvandlar den till ES5-kod och matar ut den transformerade koden till dist/main.js.

här är vad det producerade:

"use strict";var a = 1;var b = 2;var _ref = ;a = _ref;b = _ref;console.log(a);console.log(b);

som du kan se har let ersatts av var och Babel har infört en tillfällig variabel (betecknad med understrecket) för att underlätta bytet.

och det är det. Koden som du skriver i katalogen src kommer att översättas till tidigare versioner av språket. Som standard, om du inte lägger till några alternativ i förinställningen, laddas alla transformationer. Du kan också ange målwebbläsarna enligt följande:

{ "presets": } }] ]}

detta laddar de nödvändiga transformationerna för att stödja de senaste två versionerna av varje webbläsare och Safari större eller lika med version 7. Du hittar de tillgängliga alternativen för målwebbläsarna i Browserlist-arkivet.

Babel Ekosystem: En snabb översikt

som du märkte i föregående avsnitt kommer Babel inte att göra någonting själv när du installerar det. Vi måste installera en uppsättning plugins för att få önskat beteende, eller så kan vi använda förinställningar, som är fördefinierade uppsättningar plugins.

vanligtvis kommer varje funktion som du vill inkludera att vara i form av ett plugin. Några exempel för ES2015 inkluderar:

• konstanter
• pilfunktioner
• block-scoped funktioner
• klasser
• för-av
• spridning
• Mall bokstäver

se plugins sida i Babel docs för en fullständig lista.

men ibland vill du inte inkludera alla plugins en efter en. Så det finns förbyggda förinställningar som underlättar processen att installera varje plugin.

de tre officiella förinställningar som för närvarande är tillgängliga är:

• Env
• reagera
• flöde

Env är den mest använda och den vi har använt här. Den laddar automatiskt alla nödvändiga omvandlingar för att göra din kod kompatibel beroende på de riktade webbläsarna.

React preset omvandlar kod som vanligtvis finns i React-projekt, och lägger huvudsakligen till kompatibilitet med Flödesannoteringar och JSX.

och slutligen används Flödesinställningen för att rensa koden från flödestypkommentarer (även om den inte kontrollerar om typerna är giltiga eller inte.)

Babel Polyfill

det finns JavaScript — funktioner som inte kan omvandlas syntaktiskt, vanligtvis för att det inte finns någon motsvarande funktionalitet implementerad-till exempel löften och generatorfunktioner.

dessa typer av funktioner måste implementeras i webbläsaren av ett bibliotek som ska användas i din kod, och det är arbetet med en polyfill.

Babel polyfill består av core-js och Regenerator runtime. Tillsammans täcker de alla funktioner i ES2015+.

avancerad användning

som nämnts kan Babel också användas för att omvandla funktioner som ännu inte har implementerats på språket. Ett bra exempel på detta är klassfältförslaget (för närvarande på tc39 steg 3: kandidat). Detta är särskilt populärt bland React devs, eftersom det tar bort nödvändigheten att uttryckligen binda metoder till en viss komponent, och innebär också att en komponents state kan deklareras som ett klassfält (potentiellt eliminerar behovet av en konstruktör).

för dig som vill använda klassfält idag måste du lägga till babel-plugin-transform-class-properties som ett dev-beroende:

npm install --save-dev babel-plugin-transform-class-properties

du skulle också uppdatera din .babelrc fil enligt följande:

{ "presets": , "plugins": }

nu kan du skriva:

class App extends Component { state = { count: 0 }; incCount = () => { this.setState(ps => ({ count: ps.count + 1 })); }; render() { return ( <div> <p>{ this.state.count }</p> <button onClick={this.incCount}>add one</button> </div> ); }}

och det slutar inte där. Du kan också använda Babel för att lägga till nya funktioner i ditt eget språk, som vår handledning förstå ASTs genom att bygga din egen Babel Plugin visar.

alternativ

skriva moderna webbapplikationer kräver ibland mer än de funktioner som finns i JavaScript. Andra språk kan också översättas till kompatibelt JavaScript men även implementera andra användbara funktioner.

det mest populära alternativet är TypeScript, vilket är vanligt JavaScript som implementerar Moderna ES-funktioner men också lägger till andra, särskilt när det gäller typsäkerhet.

å andra sidan finns det helt olika språk i olika kategorier, från de funktionella som PureScript till den objektorienterade som Dart.

för en djupare översikt över alternativa språk, ta en titt på 10 språk som kompilerar till JavaScript.

slutsats

Babel är ett utmärkt alternativ för att skriva moderna applikationer medan du fortfarande serverar JavaScript som kan förstås av alla utvecklare och det stora utbudet av webbläsare som koden behöver köras i.

Babel är inte bara användbart för att omvandla ES2015+ till tidigare versioner av språket — både i webbläsaren och på plattformar som Node.js – men också för att lägga till nya funktioner som inte ingår i standarden. För att se vad jag menar, titta bara på npm-katalogen för att hitta alla tillgängliga Babel-plugins eller förinställningar.

eftersom JavaScript utvecklas i en så snabb takt är det uppenbart att webbläsartillverkare kommer att behöva ett tag för att implementera de senaste funktionerna. Att ge Babel en plats i din verktygslåda innebär att du kan skriva banbrytande JavaScript idag, säkert i vetskapen om att du inte överger någon av dina användare. Vad är inte att älska?