en Begyndervejledning til Babel

denne artikel introducerer Babel, en JavaScript-kompilator, der giver udviklere mulighed for at bruge næste generations JavaScript i dag.

det kan være frustrerende at skrive JavaScript, når man bygger internetapplikationer. Vi er nødt til at tænke over de funktioner, der er tilgængelige i de bro.sere, vi målretter mod, og hvad der sker, når en funktion ikke implementeres. Nogle mennesker vil anbefale simpelthen ikke at bruge det, hvilket er en smertefuld oplevelse det meste af tiden, hvis vi bygger noget kompliceret.

heldigvis giver nogle værktøjer os mulighed for at stoppe med at bekymre os om, hvad der understøttes, og bare skrive den bedste kode, vi kan. De kaldes transpilere. En transpiler er et værktøj, der tager kildekode som input og producerer ny kildekode som output, med en anden syntaks, men semantisk så tæt som muligt — eller ideelt ækvivalent — til originalen.

Babel er stort set standard transpiler til at oversætte moderne JavaScript (ES2015+) til kompatible implementeringer, der kører i gamle bro.sere. Det er den perfekte løsning, hvis du bare vil koncentrere dig om at skrive JavaScript.

og selvom Babels hovedmål er at oversætte de nyeste standarder for ECMAScript (ES) til gamle — eller undertiden aktuelle — bro.Serere, kan det gøre mere. Der er et økosystem af forudindstillinger og plugins, der også muliggør tilføjelse af ikke-standardfunktioner. Hvert plugin gør en ny funktion/transformation tilgængelig for din kode, og forudindstillinger er kun en samling af plugins.

Kom godt i gang

der er forskellige måder at konfigurere Babel på afhængigt af dit projekt og de værktøjer, du bruger. I denne artikel vil vi forklare, hvordan du konfigurerer Babel ved hjælp af CLI, selvom hvis du bruger et build-system eller en ramme, kan du tjekke specifikke instruktioner på den officielle side. Det meste af tiden er CLI den hurtigste og nemmeste måde at komme i gang på, så hvis du er førstegangsbruger, er du velkommen til at fortsætte.

det første trin til opsætning af Babel i et projekt er at installere pakken ved hjælp af npm og tilføje den som en dev-afhængighed. Forudsat at du har en arbejdsknude.JS miljø allerede på plads, det er bare et spørgsmål om at køre følgende i din terminal:

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

dette vil oprette en mappe (babel-test) skift til mappen, initialisere et npm-projekt (således oprette en package.json fil) og derefter installere babel-cli som en dev-afhængighed.

hvis du har brug for hjælp til ovenstående, bedes du kontakte vores tutorials om installation af Node og arbejde med npm.

dernæst kan vi åbne package.json og tilføje en build kommando til vores npm scripts:

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

dette vil tage kildefilerne fra src mappen og output resultatet i en dist mappe. Så kan vi udføre det som:

npm run build

men vent! Før vi kører Babel, skal vi installere og konfigurere de plugins, der vil transformere vores kode. Den nemmeste og hurtigste måde at gøre dette på er at tilføje env-forudindstillingen, som vælger de relevante plugins afhængigt af de målsøgere, du angiver. Det kan installeres ved hjælp af:

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

opret derefter en .babelrc fil i roden af dit projekt og tilføj forudindstillingen:

{ "presets": }

.babelrc filen er det sted, hvor du placerer alle dine indstillinger for Babel. Du bruger dette primært til opsætning af forudindstillinger og plugins, men der er mange flere muligheder. Du kan tjekke den komplette liste på Babel API-siden.

bemærk, at afhængigt af dit operativsystem skjules filer, der begynder med en prik, som standard. Hvis dette er problematisk for dig (eller hvis du bare foretrækker færre filer), kan du placere dine Babel-indstillinger i package.json – filen under en babel – nøgle, som sådan:

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

endelig, lad os oprette mapper og filer Babel forventer at finde:

mkdir src dist

og giv det noget at transformere:

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

dette eksempel bruger destruktureringsopgave til at bytte værdierne for to variabler.

kører Babel

nu hvor du har en klar til brug Babel-installation, kan du udføre kommandoen build for at køre kompileringsprocessen:

npm run build

dette tager koden fra src/main.js, omdanner den til ES5-kode og udsender den transformerede kode til dist/main.js.

her er hvad det producerede:

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

som du kan se, er let blevet erstattet af var, og Babel har introduceret en midlertidig variabel (betegnet med understregningen) for at lette udvekslingen.

og det er det. Koden, du skriver i mappen src, oversættes til tidligere versioner af sproget. Hvis du ikke tilføjer nogen indstillinger til forudindstillingen, indlæser den som standard alle transformationer. Du kan også angive målsøgere som følger:

{ "presets": } }] ]}

dette indlæser de nødvendige transformationer for at understøtte de seneste to versioner af hver bro.ser og Safari større eller lig med version 7. Du kan finde de tilgængelige indstillinger for målsøgere i arkivet.

Babel Økosystem: Et hurtigt overblik

som du bemærkede i det foregående afsnit, vil Babel ikke gøre noget af sig selv, når du installerer det. Vi er nødt til at installere et sæt plugins for at opnå den ønskede opførsel, eller vi kan bruge forudindstillinger, som er foruddefinerede sæt plugins.

normalt vil hver funktion, du vil medtage, være i form af et plugin. Nogle eksempler på ES2015 inkluderer:

• konstanter
• pilfunktioner
• block-scoped funktioner
• klasser
• for-af
• spredning
• skabelonlitteraler

se plugins side i Babel docs for en komplet liste.

men nogle gange vil du ikke medtage alle plugins en efter en. Så der er forudbyggede forudindstillinger, der letter processen med at installere hvert plugin.

de tre officielle forudindstillinger, der i øjeblikket er tilgængelige, er:

• Env
• React
• strøm

Env er den hyppigst anvendte og den, vi har brugt her. Det indlæser automatisk alle de nødvendige transformationer for at gøre din kode kompatibel afhængigt af de målrettede bro.sere.

React-forudindstillingen transformerer kode, der typisk findes i React-projekter, og tilføjer hovedsageligt kompatibilitet med Strømningsanmærkninger.

og endelig bruges Strømforindstillingen til at rydde op i koden fra Strømningstypeanmærkninger (selvom den ikke kontrollerer, om typerne er gyldige eller ej.)

Babel Polyfill

der er JavaScript — funktioner, der ikke kan transformeres syntaktisk, normalt fordi der ikke er nogen tilsvarende funktionalitet implementeret-for eksempel løfter og generatorfunktioner.

disse funktioner skal implementeres i biblioteket, der skal bruges i din kode, og det er arbejdet med en polyfill.

Babel polyfill er sammensat af core-js og Regenerator runtime. Sammen dækker de alle funktionerne i ES2015+.

avanceret brug

som nævnt kan Babel også bruges til at transformere funktioner, der endnu ikke er implementeret på sproget. Et godt eksempel på dette er forslaget om klassefelter (i øjeblikket på TC39 trin 3: kandidat). Dette er især populært blandt React devs, da det fjerner nødvendigheden af eksplicit at binde metoder til en bestemt komponent og betyder også, at en komponents state kan erklæres som et klassefelt (potentielt eliminere behovet for en konstruktør).

for dem af jer, der ønsker at bruge klassefelter i dag, skal du tilføje babel-plugin-transform-class-egenskaber som en dev-afhængighed:

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

du vil også opdatere din .babelrc fil som følger:

{ "presets": , "plugins": }

nu Kan du skrive:

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> ); }}

og det stopper ikke der. Du kan også bruge Babel til at tilføje nye funktioner til dit eget sprog, som vores tutorial forståelse AST ‘ er ved at opbygge dit eget Babel-Plugin demonstrerer.

alternativer

skrivning af moderne internetapplikationer kræver undertiden mere end de funktioner, der er tilgængelige i JavaScript. Andre sprog kan også oversættes til kompatibelt JavaScript, men også implementere andre nyttige funktioner.

den mest populære mulighed er TypeScript, som er almindelig JavaScript, der implementerer moderne ES-funktioner, men også tilføjer andre, især med hensyn til typesikkerhed.

på den anden side er der helt forskellige sprog på tværs af forskellige kategorier, fra de funktionelle som PureScript til den objektorienterede som Dart.

For en dybere oversigt over alternative sprog, tag et kig på 10 sprog, der kompilerer til JavaScript.

konklusion

Babel er en fantastisk mulighed for at skrive moderne applikationer, mens du stadig serverer JavaScript, der kan forstås af alle udviklere og den brede vifte af bro.sere, som koden skal køre ind.

Babel er ikke kun nyttigt til at omdanne ES2015+ til tidligere versioner af sproget — både i bro.ser og på platforme som Node.js – men også for at tilføje nye funktioner, der ikke er en del af standarden. For at se, hvad jeg mener, skal du bare kigge på npm-biblioteket for at finde alle de tilgængelige Babel-plugins eller forudindstillinger.

da JavaScript udvikler sig i et så hurtigt tempo, er det indlysende, at bro.serproducenter har brug for et stykke tid for at implementere de nyeste funktioner. At give Babel en plads i dit værktøjssæt betyder, at du kan skrive avanceret JavaScript i dag, sikker i den viden, at du ikke opgiver nogen af dine brugere. Hvad er der ikke at elske?