En Nybegynnerguide Til Babel

Denne artikkelen introduserer Babel, En JavaScript-kompilator som lar utviklere bruke neste generasjons JavaScript i dag.

det kan være frustrerende å skrive JavaScript når du bygger webapplikasjoner. Vi må tenke på funksjonene som er tilgjengelige i nettleserne vi målretter mot, og hva som skjer når en funksjon ikke er implementert. Noen mennesker vil anbefale å ikke bruke det, noe som er en smertefull opplevelse mesteparten av tiden hvis vi bygger noe komplisert.

Heldigvis lar noen verktøy oss slutte å bekymre oss for hva som støttes og bare skrive den beste koden vi kan. De kalles transportører. En transpiler er et verktøy som tar kildekode som input og produserer ny kildekode som utgang, med en annen syntaks, men semantisk så nært som mulig-eller ideelt ekvivalent-til originalen.

Babel Er ganske mye standard transpiler for å oversette moderne JavaScript (ES2015+) til kompatible implementeringer som kjører i gamle nettlesere. Det er den perfekte løsningen hvis du bare vil konsentrere Deg om Å skrive JavaScript.

Og Selv Om Hovedmålet Med Babel er å oversette de nyeste standardene For ECMAScript (ES) for gamle — eller noen ganger nåværende — nettlesere, kan Det gjøre mer. Det er et økosystem av forhåndsinnstillinger og plugins som gjør det mulig å legge til ikke-standardfunksjoner også. Hver plugin gjør en ny funksjon / transformasjon tilgjengelig for koden din, og forhåndsinnstillinger er bare en samling av plugins.

Komme i Gang

Det er forskjellige måter Å konfigurere Babel på, avhengig av prosjektet og verktøyene du bruker. I denne artikkelen skal vi forklare Hvordan Du setter Opp Babel ved HJELP AV CLI, men hvis Du bruker et byggesystem eller rammeverk, kan du sjekke ut spesifikke instruksjoner på det offisielle nettstedet. Mesteparten AV TIDEN CLI er den raskeste og enkleste måten å komme i gang, så hvis du er en første gangs bruker, gjerne fortsette.

Det første trinnet for Å sette Opp Babel i et prosjekt er å installere pakken ved hjelp av npm og legge den til som en dev-avhengighet. Forutsatt at du har en Arbeidsnode.js miljø allerede på plass, er det bare et spørsmål om å kjøre følgende i terminalen:

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

dette vil skape en katalog (babel-test) endring i katalogen, initialisere et npm-prosjekt (dermed opprette en package.json fil) og deretter installere babel-cli som en dev-avhengighet.

hvis du trenger hjelp med det ovennevnte, vennligst se våre opplæringsprogrammer om å installere Node og jobbe med npm.

Deretter kan vi åpne package.json og legge til en build kommando til våre npm-skript:

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

Dette vil ta kildefilene fra katalogen src og sende resultatet i en katalog dist. Da kan vi utføre det som:

npm run build

men vent! Før du kjører Babel må vi installere og sette opp plugins som vil forvandle vår kode. Den enkleste og raskeste måten å gjøre dette på er å legge til Env-forhåndsinnstillingen, som velger de riktige pluginene avhengig av målleserne du angir. Den kan installeres ved hjelp av:

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

deretter oppretter du en .babelrc – fil i roten av prosjektet og legger til forhåndsinnstillingen:

{ "presets": }

filen .babelrc er stedet der Du setter Alle Innstillingene For Babel. Du bruker dette primært for å sette opp forhåndsinnstillinger og plugins, men mange flere alternativer er tilgjengelige. Du kan sjekke hele listen på Babels API-side.

Vær oppmerksom på at, avhengig av operativsystemet, vil filer som begynner med en prikk, bli skjult som standard. Hvis Dette er problematisk for deg (eller hvis du bare foretrekker færre filer), kan Du sette Babel-innstillingene i package.json – filen, under en babel – nøkkel, som så:

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

Til Slutt, la oss lage katalogene Og filene Babel forventer å finne:

mkdir src dist

og gi det noe å forvandle:

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

dette eksemplet bruker destruktureringsoppgave til å bytte verdiene til to variabler.

Kjører Babel

Nå som Du har En Bruksklar Babel-installasjon, kan du utføre kommandoen build for å kjøre kompileringsprosessen:

npm run build

dette vil ta koden fra src/main.js, forvandle DEN TIL ES5-kode og utfør den transformerte koden til dist/main.js.

Her er hva det produserte:

"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 blitt erstattet av var Og Babel har introdusert en midlertidig variabel (betegnet med understrek) for å lette bytte.

Og det er det. Koden du skriver i katalogen src, blir oversatt til tidligere versjoner av språket. Hvis du ikke legger til noen alternativer i forhåndsinnstillingen, lastes alle transformasjonene som standard. Du kan også angi målet nettlesere som følger:

{ "presets": } }] ]}

dette vil laste de nødvendige transformasjonene for å støtte de nyeste to versjonene av hver nettleser og Safari større eller lik versjon 7. Du kan finne de tilgjengelige alternativene for målet nettlesere I Browserlist depotet.

Babels Økosystem: En Rask Oversikt

Som du la merke til i forrige avsnitt, Vil Babel ikke gjøre noe av seg selv når Du installerer Det. Vi må installere et sett med plugins for å oppnå ønsket oppførsel, eller vi kan bruke forhåndsinnstillinger, som er forhåndsdefinerte sett med plugins.

vanligvis vil hver funksjon du vil inkludere, være i form av et plugin. Noen eksempler FOR ES2015 inkluderer:

• konstanter
• pilfunksjoner
• blokkomfattende funksjoner
• klasser
• for-av
• spredning
• mallitteraler

Se plugins side i babel docs for en komplett liste.

men noen ganger vil du ikke inkludere alle pluginene en etter en. Så det er forhåndsbygde forhåndsinnstillinger som vil lette prosessen med å installere hvert plugin.

de tre offisielle forhåndsinnstillingene som er tilgjengelige er:

• Env
• React
• Flow

Env er den mest brukte Og den vi har brukt her. Den laster automatisk alle nødvendige transformasjoner for å gjøre koden kompatibel avhengig av målrettede nettlesere.

React-forhåndsinnstillingen forvandler koden som vanligvis finnes i React-prosjekter, og legger hovedsakelig til kompatibilitet med Flytmerknader og JSX.

Og Til slutt Brukes Flow-forhåndsinnstillingen til å rydde opp koden fra Flytype-merknader (selv om den ikke kontrollerer om typene er gyldige eller ikke.)

Babel Polyfill

Det Er JavaScript-funksjoner som ikke kan transformeres syntaktisk, vanligvis fordi det ikke er noen tilsvarende funksjonalitet implementert — For Eksempel Løfter og generatorfunksjoner.

slike funksjoner må implementeres i nettleseren av et bibliotek som skal brukes i koden din, og det er arbeidet med en polyfill.

Babel polyfill består av core-js og Regenerator runtime. Sammen dekker de alle funksjonene I ES2015+.

Avansert Bruk

Som nevnt Kan Babel også brukes til å transformere funksjoner som ennå ikke er implementert på språket. Et godt eksempel på dette er class fields-forslaget(for TIDEN PÅ TC39 stage 3: candidate). Dette er spesielt populært Blant React devs, da det fjerner nødvendigheten av å eksplisitt binde metoder til en bestemt komponent, og betyr også at en komponents state kan deklareres som et klassefelt (potensielt eliminere behovet for en konstruktør).

for de av dere som ønsker å bruke klassefelt i dag, må du legge til babel-plugin-transform-class-properties som en dev-avhengighet:

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

du vil også oppdatere filen .babelrc som følger:

{ "presets": , "plugins": }

nå 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å bruke Babel til å legge til nye funksjoner av dine egne til språket, som vår tutorial Forståelse ASTs ved Å Bygge Din Egen Babel Plugin demonstrerer.

Alternativer

Å Skrive moderne webapplikasjoner krever noen ganger mer enn funksjonene som er tilgjengelige I JavaScript. Andre språk kan også oversettes til kompatibel JavaScript, men også implementere andre nyttige funksjoner.

Det mest populære alternativet Er TypeScript, som er vanlig JavaScript som implementerer moderne ES-funksjoner, men legger også til andre, spesielt når det gjelder typesikkerhet.

På den andre ekstremen er det helt forskjellige språk på tvers av forskjellige kategorier, fra de funksjonelle som PureScript til objektorientert Som Dart.

for en dypere oversikt over alternative språk, ta en titt på 10 Språk Som Kompilerer Til JavaScript.

Konklusjon

Babel Er et flott alternativ for å skrive moderne applikasjoner mens Du fortsatt serverer JavaScript som kan forstås av alle utviklere og det brede spekteret av nettlesere koden må kjøre inn.

Babel er ikke bare nyttig for å transformere ES2015+ til tidligere versjoner av språket-både i nettleseren og på plattformer som Node.js – men også for å legge til nye funksjoner som ikke er en del av standarden. For å se hva jeg mener, bare ta en titt på npm katalogen for å finne alle Tilgjengelige Babel plugins eller forhåndsinnstillinger.

Som JavaScript utvikler seg i et så raskt tempo, er Det åpenbart at nettleserprodusenter vil trenge en stund for å implementere de nyeste funksjonene. Å gi Babel en plass i verktøykassen din betyr at Du kan skrive banebrytende JavaScript i dag, trygg på at Du ikke forlater noen av brukerne dine. Hva er ikke å elske?