Hvad er Babel?

Babel er en JavaScript-kompilator

Babel er en værktøjskæde, der hovedsageligt bruges til at konvertere ECMAScript 2015+ kode til en bagudkompatibel version af JavaScript i nuværende og ældre bro.sere eller miljøer. Her er de vigtigste ting, Babel kan gøre for dig:

• Transform syntaks
• Polyfill-funktioner, der mangler i dit målmiljø (gennem @babel/polyfill)
• kildekodetransformationer (codemods)
• og mere! (tjek disse videoer til inspiration)

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

for en fantastisk tutorial om kompilatorer, tjek-super-tiny-compiler, som også forklarer, hvordan Babel selv fungerer på et højt niveau.

ES2015 og videre

Babel har understøttelse af den nyeste version af JavaScript gennem syntakstransformatorer.

disse plugins giver dig mulighed for at bruge ny syntaks lige nu uden at vente på bro.sersupport. Tjek vores brugsvejledning for at komme i gang.

JS og React

Babel kan konvertere JS syntaks! Tjek vores React preset for at komme i gang. Brug den sammen med babel-sublime-pakken til at bringe syntaksfremhævning til et helt nyt niveau.

Du kan installere denne forudindstilling med

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

og tilføje@babel/preset-react til 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ær mere om JS

Type anmærkninger (strøm og Typeskrift)

Babel kan strippe ud type anmærkninger! Tjek enten vores strøm forudindstilling eller TypeScript forudindstilling for at komme i gang. Husk, at Babel ikke foretager typekontrol; du bliver stadig nødt til at installere og bruge forløb eller TypeScript til at kontrollere typer.

Du kan installere strømforindstillingen med

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

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

eller TypeScript-forudindstillingen med

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

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

Lær mere om strøm og TypeScript

pluggable

Babel er bygget ud af plugins. Komponer din egen transformationspipeline ved hjælp af eksisterende plugins eller skriv din egen. Brug nemt et sæt plugins ved at bruge eller oprette en forudindstilling. Få mere at vide Larsen

Opret et plugin i farten med astexplorer.net eller brug generator-babel-plugin til at generere en plugin skabelon.

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

Kildekortstøtte, så du nemt kan debugge din kompilerede kode.

Spec-kompatibel

Babel forsøger at forblive tro mod ECMAScript-standarden, så meget som det med rimelighed er muligt. Det kan også have specifikke muligheder for at være mere spec kompatibel som en afvejning til ydeevne.

Compact

Babel forsøger at bruge den mindste mængde kode muligt uden afhængighed af en voluminøs runtime.

dette kan være svært at gøre i tilfælde, og der er “løse” muligheder for specifikke transformationer, der kan afvejes spec compliancy for læsbarhed, Filstørrelse og hastighed.