ce este Babel?

Babel este un compilator JavaScript

Babel este un lanț de instrumente care este utilizat în principal pentru a converti codul ECMAScript 2015+ într-o versiune compatibilă înapoi a JavaScript în browserele sau mediile actuale și mai vechi. Aici sunt principalele lucruri Babel pot face pentru tine:

• transforma sintaxa
• caracteristici Polyfill care lipsesc în mediul țintă (prin @babel/polyfill)
• transformări cod sursă (codemods)
• și mai mult! (consultați aceste videoclipuri pentru inspirație)

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

pentru un tutorial minunat despre compilatoare, consultați compilatorul-super-tiny -, care explică și modul în care Babel funcționează la un nivel înalt.

ES2015 și dincolo

Babel are suport pentru cea mai recentă versiune de JavaScript prin transformatoare de sintaxă.

aceste pluginuri vă permit să utilizați o nouă sintaxă, chiar acum, fără a aștepta suportul browserului. Consultați ghidul nostru de utilizare pentru a începe.

JSX și React

Babel poate converti sintaxa JSX! Consultați presetarea noastră React pentru a începe. Utilizați-l împreună cu pachetul babel-sublime pentru a aduce evidențierea sintaxei la un nivel cu totul nou.

puteți instala această presetare cu

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

și adăugați@babel/preset-react la configurația 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>; }});

Aflați mai multe despre JSX

adnotări tip (flux și TypeScript)

Babel poate benzi adnotări tip! Verificați presetarea fluxului sau presetarea TypeScript pentru a începe. Rețineți că Babel nu verifică tipul; va trebui totuși să instalați și să utilizați Flow sau TypeScript pentru a verifica tipurile.

puteți instala presetarea de flux cu

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

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

sau presetarea de tipografiere cu

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

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

aflați mai multe despre fluxul și TypeScript

pluggable

Babel este construit din plugin-uri. Compune-ți propria conductă de transformare folosind pluginuri existente sau scrie-ți propriul. Utilizați cu ușurință un set de pluginuri utilizând sau creând o presetare. Aflați mai multe

crearea unui plugin pe zbor cu astexplorer.net sau utilizați generator-babel-plugin pentru a genera un șablon 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

suport hartă sursă, astfel încât să puteți depana codul compilat cu ușurință.

Spec compatibil

Babel încearcă să rămână fidel standardului ECMAScript, cât mai mult posibil în mod rezonabil. De asemenea, poate avea opțiuni specifice pentru a fi mai conforme cu specificațiile ca compromis pentru performanță.

Compact

Babel încearcă să utilizeze cea mai mică cantitate de cod posibil, fără dependență de un timp de rulare voluminos.

acest lucru poate fi dificil de făcut în cazuri și există opțiuni „libere” pentru transformări specifice care pot compromite conformitatea specică pentru lizibilitate, Dimensiunea fișierului și viteză.