Vad är Babel ?

Babel är en JavaScript-kompilator

Babel är en verktygskedja som huvudsakligen används för att konvertera ECMAScript 2015+ – kod till en bakåtkompatibel version av JavaScript i nuvarande och äldre webbläsare eller miljöer. Här är de viktigaste sakerna Babel kan göra för dig:

• transformera syntax
• Polyfill-funktioner som saknas i din målmiljö (genom @babel/polyfill)
• Källkodstransformationer (codemods)
• och mer! (kolla in dessa videor för inspiration)

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

för en fantastisk handledning om kompilatorer, kolla in-super-tiny-kompilatorn, som också förklarar hur Babel själv Fungerar på en hög nivå.

ES2015 och bortom

Babel har stöd för den senaste versionen av JavaScript genom syntaxtransformatorer.

dessa plugins låter dig använda ny syntax, just nu utan att vänta på webbläsarstöd. Kolla in vår användarguide för att komma igång.

JSX och React

Babel kan konvertera JSX syntax! Kolla in vår React preset för att komma igång. Använd det tillsammans med Babel-sublime-paketet för att få syntaxmarkering till en helt ny nivå.

Du kan installera den här förinställningen med

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

och lägga till@babel/preset-react I din Babel-konfiguration.

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äs mer om JSX

Typanteckningar (flöde och TypeScript)

Babel kan ta bort typanteckningar! Kolla in antingen vår Flow preset eller TypeScript preset för att komma igång. Tänk på att Babel inte gör typkontroll; du måste fortfarande installera och använda Flow eller TypeScript för att kontrollera typer.

Du kan installera flödesinställningen med

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

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

eller TypeScript-förinställningen med

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

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

Läs mer om flöde och TypeScript

pluggable

Babel är byggd av plugins. Komponera din egen transformationsrörledning med befintliga plugins eller skriv din egen. Använd enkelt en uppsättning plugins genom att använda eller skapa en förinställning. Läs mer

skapa en plugin i farten med astexplorer.net eller använd generator-babel-plugin för att skapa en plugin-Mall.

// 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

Källkartstöd så att du enkelt kan felsöka din kompilerade kod.

Spec-kompatibel

Babel försöker hålla sig trogen ECMAScript-standarden, så mycket som rimligen möjligt. Det kan också ha specifika alternativ för att vara mer spec-kompatibel som en avvägning till prestanda.

Compact

Babel försöker använda minsta möjliga mängd kod utan beroende av en skrymmande körtid.

detta kan vara svårt att göra i fall, och det finns ”lösa” alternativ för specifika transformationer som kan avvägas spec compliancy för läsbarhet, filstorlek och hastighet.