Vai al contenuto principale

Cos'è Babel?

Traduzione Beta Non Ufficiale

Questa pagina è stata tradotta da PageTurner AI (beta). Non ufficialmente approvata dal progetto. Hai trovato un errore? Segnala problema →

Babel è un compilatore JavaScript​

Babel è una toolchain principalmente utilizzata per convertire codice ECMAScript 2015+ in una versione retrocompatibile di JavaScript per browser e ambienti attuali o più vecchi. Ecco le principali funzionalità di Babel:

  • Trasformazione della sintassi

  • Polyfill per funzionalità mancanti nel tuo ambiente target (tramite polyfill di terze parti come core-js)

  • Trasformazioni del codice sorgente (codemod)

  • E molto altro! (guarda questi video per ispirarti)

JavaScript
// Babel Input: ES2015 arrow function
[1, 2, 3].map(n => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});
consiglio

Per un fantastico tutorial sui compilatori, consulta the-super-tiny-compiler, che spiega anche come funziona Babel a livello generale.

ES2015 e oltre​

Babel supporta le ultime versioni di JavaScript tramite trasformatori sintattici.

Questi plugin ti permettono di utilizzare nuove funzionalità sintattiche subito, senza attendere il supporto dei browser. Consulta la nostra guida all'uso per iniziare.

JSX e React​

Babel può convertire la sintassi JSX! Consulta il nostro preset React per iniziare. Utilizzalo insieme al pacchetto babel-sublime per portare l'evidenziazione sintattica a un livello superiore.

Puoi installare questo preset con

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

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

JSX
export default function DiceRoll(){
  const getRandomNumber = () => {
    return Math.ceil(Math.random() * 6);
  };

  const [num, setNum] = useState(getRandomNumber());

  const handleClick = () => {
    const newNum = getRandomNumber();
    setNum(newNum);
  };

  return (
    <div>
      Your dice roll: {num}.
      <button onClick={handleClick}>Click to get a new number</button>
    </div>
  );
};
consiglio

Scopri di più su JSX

Annotazioni di tipo (Flow e TypeScript)​

Babel può rimuovere le annotazioni di tipo! Consulta il nostro preset Flow o preset TypeScript per iniziare. Tieni presente che Babel non effettua il controllo dei tipi; dovrai comunque installare e utilizzare Flow o TypeScript per verificare i tipi.

Puoi installare il preset Flow con

npm install --save-dev @babel/preset-flow
JavaScript
// @flow
function square(n: number): number {
  return n * n;
}

o il preset TypeScript con

npm install --save-dev @babel/preset-typescript
JavaScript
function Greeter(greeting: string) {
  this.greeting = greeting;
}
consiglio

Scopri di più su Flow e TypeScript!

Estensibile​

Babel è costruito con plugin. Componi la tua pipeline di trasformazione utilizzando plugin esistenti o creandone di nuovi. Utilizza facilmente un insieme di plugin usando o creando un preset. Scopri di più →

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

example-babel-plugin.js
// A plugin is just a function
export default function({ types: t }) {
  return {
    visitor: {
      Identifier(path) {
        let name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ
        path.node.name = [...name]
          .reverse()
          .join("");
      },
    },
  };
}

Debuggabile​

Supporto per source map per debug facilitato del codice compilato.

Conforme alle specifiche​

Babel cerca di aderire allo standard ECMAScript il più possibile. Offre opzioni specifiche per una maggiore conformità alle specifiche, bilanciandole con le performance.

Compatto​

Babel cerca di utilizzare la minima quantità di codice possibile senza dipendenze runtime ingombranti.

Questo può essere complesso in alcuni casi, ma sono disponibili opzioni "assumptions" che bilanciano conformità alle specifiche con leggibilità, dimensione del file e velocità.