Wat is Babel?

Babel is een JavaScript-compiler

Babel is een toolchain die voornamelijk wordt gebruikt om ECMAScript 2015 + – code te converteren naar een backwards compatibele versie van JavaScript in huidige en oudere browsers of omgevingen. Hier zijn de belangrijkste dingen die Babel voor je kan doen:

• transformeer syntaxis
• Polyfill functies die ontbreken in je doelomgeving (via @babel/polyfill)
• source code transformations (codemods)
• en meer! (bekijk deze video ‘ s voor inspiratie)

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

voor een geweldige handleiding over compilers, bekijk de-super-tiny-compiler, die ook uitlegt hoe Babel zelf werkt op een hoog niveau.

ES2015 en verder

Babel heeft ondersteuning voor de nieuwste versie van JavaScript via syntaxis transformers.

met deze plugins kunt u nieuwe syntaxis gebruiken, nu zonder te wachten op browserondersteuning. Bekijk onze gebruikshandleiding om aan de slag te gaan.

JSX en React

Babel kan JSX syntaxis converteren! Bekijk onze react preset om aan de slag te gaan. Gebruik het samen met het babel-sublime pakket om syntaxis highlighting naar een geheel nieuw niveau te brengen.

u kunt deze voorinstelling installeren met

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

en @babel/preset-react toevoegen aan uw Babel configuratie.

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

leer meer over JSX

Type annotaties (Flow en TypeScript)

Babel kan Type annotaties verwijderen! Bekijk onze Flow preset of TypeScript preset om aan de slag te gaan. Houd er rekening mee dat Babel geen typecontrole doet; je zult nog steeds Flow of TypeScript moeten installeren en gebruiken om typen te controleren.

U kunt de vooraf ingestelde flow met

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

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

of met de schrijfmachine preset met

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

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

Leer meer over Flow en de Schrijfmachine

Pluggable

Babel is gebouwd van plugins. Stel uw eigen transformatie pijplijn met behulp van bestaande plugins of schrijf uw eigen. Eenvoudig gebruik maken van een set van plugins met behulp van of het maken van een voorinstelling. Learn more →

Maak een plugin on the fly met astexplorer.net of gebruik generator-babel-plugin om een plugin template te genereren.

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

Source map ondersteuning zodat u uw gecompileerde code met gemak kunt debuggen.

Spec Compliant

Babel probeert trouw te blijven aan de ECMAScript-standaard, zoveel als redelijkerwijs mogelijk is. Het kan ook specifieke opties hebben om meer spec compliant te zijn als een afweging naar prestaties.

Compact

Babel probeert zo min mogelijk code te gebruiken zonder afhankelijkheid van een omvangrijke runtime.

dit kan moeilijk zijn om te doen in gevallen, en er zijn “losse” opties voor specifieke transformaties die kunnen afwegen spec compliancy voor leesbaarheid, Bestandsgrootte, en snelheid.