Hva Er Babel ?

Babel Er En JavaScript-kompilator

Babel er en verktøykjede som hovedsakelig brukes til å konvertere ECMAScript 2015 + – kode til en bakoverkompatibel versjon Av JavaScript i nåværende og eldre nettlesere eller miljøer. Her er de viktigste Tingene Babel kan gjøre for deg:

• Transform syntaks
• Polyfill funksjoner som mangler i målmiljøet (gjennom @ babel/polyfill)
• Kildekode transformasjoner (codemods)
• Og mer! (sjekk ut disse videoene for inspirasjon)

// Babel Input: ES2015 arrow function.map((n) => n + 1);// Babel Output: ES5 equivalent.map(function(n) { return n + 1;});

for en fantastisk tutorial på kompilatorer, sjekk ut-super-tiny-kompilatoren, som også forklarer hvordan Babel selv fungerer på et høyt nivå.

ES2015 og utover

Babel har støtte for den nyeste versjonen Av JavaScript gjennom syntakstransformatorer.

disse pluginene lar deg bruke ny syntaks, akkurat nå uten å vente på nettleserstøtte. Sjekk ut vår bruk guide for å komme i gang.

Jsx Og React

Babel kan konvertere jsx syntaks! Sjekk Ut Vår React forhåndsinnstilling for å komme i gang. Bruk den sammen med babel-sublime pakke for å bringe syntax highlighting til et helt nytt nivå.

du kan installere denne forhåndsinnstillingen med

npm install --save-dev @babel/preset-react

og legge Til @babel/preset-react I Babel-konfigurasjonen.

export default React.createClass({ getInitialState() { return { num: this.getRandomNumber() }; }, getRandomNumber() { return Math.ceil(Math.random() * 6); }, render() { return <div> Your dice roll: {this.state.num} </div>; }});

Lær mer OM JSX

Skriv Inn merknader (Flyt og Typeskript)

Babel kan fjerne typemerknader! Sjekk Ut Enten Vår Flow preset eller TypeScript preset for å komme i gang. Husk At Babel ikke gjør typekontroll; du må fortsatt installere Og bruke Flow eller TypeScript for å sjekke typer.

du kan installere flow-forhåndsinnstillingen med

npm install --save-dev @babel/preset-flow

// @flowfunction square(n: number): number { return n * n;}

eller typescript-forhåndsinnstillingen med

npm install --save-dev @babel/preset-typescript

function Greeter(greeting: string) { this.greeting = greeting;}

lær mer om flyt og typescript

pluggable

babel er bygget ut av plugins. Lag din egen transformasjonsrørledning ved hjelp av eksisterende plugins eller skriv din egen. Bruk enkelt et sett med plugins ved å bruke eller opprette en forhåndsinnstilling. Lær mer →

Opprett en plugin på fluen med astexplorer.net eller bruk generator-babel-plugin for å generere en plugin-mal.

// A plugin is just a functionexport default function ({types: t}) { return { visitor: { Identifier(path) { let name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ path.node.name = name.split('').reverse().join(''); } } };}

Debuggable

Kilde kart støtte slik at du kan feilsøke kompilert kode med letthet.

Spec-Kompatibel

Babel prøver å være tro Mot ECMAScript-standarden, så mye som rimelig mulig. Det kan også ha spesifikke alternativer for å være mer spec-kompatibel som en bytte til ytelse.

Compact

Babel prøver å bruke minst mulig kode uten avhengighet av en stor kjøretid.

Dette kan være vanskelig å gjøre i tilfeller, og det er «løse» alternativer for spesifikke transformasjoner som kan avvike spec compliancy for lesbarhet, filstørrelse og hastighet.