Che cos’è Babel?

Babel è un compilatore JavaScript

Babel è una toolchain che viene utilizzata principalmente per convertire il codice ECMAScript 2015+ in una versione retrocompatibile di JavaScript nei browser o ambienti attuali e precedenti. Ecco le cose principali che Babel può fare per te:

• Trasforma la sintassi
• Polyfill caratteristiche che mancano nel tuo ambiente di destinazione (attraverso @ babel / polyfill)
• Trasformazioni del codice sorgente (codemods)
• E altro ancora! (guarda questi video per l’ispirazione)

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

Per un tutorial impressionante sui compilatori, controlla il-super-tiny-compiler, che spiega anche come Babel stesso funziona ad alto livello.

ES2015 e oltre

Babel ha il supporto per l’ultima versione di JavaScript attraverso trasformatori di sintassi.

Questi plugin consentono di utilizzare una nuova sintassi, in questo momento senza attendere il supporto del browser. Consulta la nostra guida all’uso per iniziare.

JSX e React

Babel può convertire la sintassi JSX! Controlla il nostro preimpostato React per iniziare. Usalo insieme al pacchetto babel-sublime per portare l’evidenziazione della sintassi a un livello completamente nuovo.

È possibile installare questo preset con

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

e aggiungere@babel/preset-react alla configurazione Babel.

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

Scopri di più su JSX

Annotazioni di tipo (flusso e dattiloscritto)

Babel può eliminare le annotazioni di tipo! Scopri sia il nostro preset flusso o preset TypeScript per iniziare. Tieni presente che Babel non esegue il controllo dei tipi; dovrai comunque installare e utilizzare Flow o TypeScript per controllare i tipi.

È possibile installare il flusso di preselezione con

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

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

o dattiloscritto preset con

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

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

per Saperne di più su di Flusso e Dattiloscritto

Pluggable

Babele costruita plugin. Componi la tua pipeline di trasformazione utilizzando i plugin esistenti o scrivi la tua. Usa facilmente un set di plugin usando o creando un preset. Per saperne di più →

Crea un plugin al volo con astexplorer.net oppure usa generator-babel-plugin per generare un modello di plugin.

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

Supporto della mappa sorgente in modo da poter eseguire il debug del codice compilato con facilità.

Spec Compliant

Babel cerca di rimanere fedele allo standard ECMAScript, per quanto ragionevolmente possibile. Può anche avere opzioni specifiche per essere più conforme alle specifiche come compromesso con le prestazioni.

Compact

Babel tenta di utilizzare la minor quantità di codice possibile senza alcuna dipendenza da un runtime ingombrante.

Questo può essere difficile da fare nei casi, e ci sono opzioni “sciolte” per trasformazioni specifiche che possono tradeoff conformità alle specifiche per leggibilità, dimensione del file e velocità.