BabelJS - Panoramica

BabelJSè un transpiler JavaScript che trasporta nuove funzionalità nel vecchio standard. Con questo, le funzionalità possono essere eseguite su browser vecchi e nuovi, senza problemi. Uno sviluppatore australiano, Sebastian McKenzie ha avviato BabelJS.

Perché BabelJS?

JavaScript è la lingua che il browser comprende. Usiamo diversi browser per eseguire le nostre applicazioni: Chrome, Firefox, Internet Explorer, Microsoft Edge, Opera, UC browser ecc. ECMA Script è la specifica del linguaggio JavaScript; ECMA Script 2015 ES6 è la versione stabile che funziona bene in tutti i browser nuovi e vecchi.

Dopo ES5, abbiamo avuto ES6, ES7 e ES8. ES6 è stato rilasciato con molte nuove funzionalità che non sono completamente supportate da tutti i browser. Lo stesso vale per ES7, ES8 e ESNext (prossima versione di ECMA Script). Non è ora chiaro quando sarà possibile per tutti i browser essere compatibili con tutte le versioni ES rilasciate.

Nel caso in cui intendiamo utilizzare le funzionalità ES6 o ES7 o ES8 per scrivere il nostro codice, tenderà a rompersi in alcuni vecchi browser a causa della mancanza di supporto delle nuove modifiche. Pertanto, se vogliamo utilizzare nuove funzionalità di ECMA Script nel nostro codice e vogliamo eseguirlo su tutti i possibili browser disponibili, abbiamo bisogno di uno strumento che compilerà il nostro codice finale in ES5.

Babelfa lo stesso e si chiama transpiler che trasporta il codice nella versione ECMA Script che vogliamo. Ha funzionalità come preset e plug-in, che configurano la versione ECMA di cui abbiamo bisogno per trasferire il nostro codice. Con Babel, gli sviluppatori possono scrivere il proprio codice utilizzando le nuove funzionalità in JavaScript. Gli utenti possono ottenere i codici trasferiti utilizzando Babel; i codici possono essere utilizzati successivamente in qualsiasi browser senza problemi.

The following table lists down the features available in ES6, ES7 and ES8 −

Caratteristiche Versione ECMA Script
Lasciate + Cost ES6
Funzioni freccia ES6
Classi ES6
Promesse ES6
Generatori ES6
Iteratori ES6
Moduli ES6
Destrutturante ES6
Letterali modello ES6
Oggetto migliorato ES6
Proprietà predefinite, di riposo e di diffusione ES6
Async - Await ES7
Operatore di esponenziazione ES7
Array.prototype.includes () ES7
Imbottitura delle corde ES8

BabelJS gestisce le seguenti due parti:

  • transpiling
  • polyfilling

Cos'è Babel-Transpiler?

Babel-transpiler converte la sintassi del moderno JavaScript in una forma, che può essere facilmente compresa dai browser meno recenti. Ad esempio, la funzione freccia, const, le classi let verranno convertite in funzione, var, ecc. Qui la sintassi, cioè la funzione freccia viene convertita in una funzione normale mantenendo la stessa funzionalità in entrambi i casi.

Cos'è Babel-polyfill?

Ci sono nuove funzionalità aggiunte in JavaScript come promesse, mappe e include. Le funzionalità possono essere utilizzate su array; lo stesso, se usato e traspilato usando babel, non verrà convertito. Nel caso in cui la nuova funzionalità sia un metodo o un oggetto, dobbiamo utilizzare Babel-polyfill insieme al transpiling per farlo funzionare sui browser meno recenti.

Di seguito è riportato l'elenco delle funzionalità di script ECMA disponibili in JavaScript, che possono essere trasferite e riempite in polyfill:

  • Classes
  • Decorators
  • Const
  • Modules
  • Destructing
  • Parametri predefiniti
  • Nomi di proprietà calcolati
  • Riposo / diffusione dell'oggetto
  • Funzioni asincrone
  • Funzioni della freccia
  • Parametri di riposo
  • Spread
  • Letterali modello

ECMA Script features that can be polyfilled −

  • Promises
  • Map
  • Set
  • Symbol
  • Weakmap
  • Weakset
  • includess
  • Array.from, Array.of, Array # find, Array.buffer, Array # findIndex
  • Object.assign,Object.entries,Object.values

Caratteristiche di BabelJS

In questa sezione, impareremo le diverse funzionalità di BabelJS. Di seguito sono riportate le caratteristiche principali più importanti di BabelJS:

Babel-Plugins

Plugin e Preset sono dettagli di configurazione per Babel per trasferire il codice. Babel supporta una serie di plugin, che possono essere utilizzati singolarmente, se conosciamo l'ambiente in cui verrà eseguito il codice.

Babel-Presets

I preset Babel sono un insieme di plugin, cioè dettagli di configurazione per il babel-transpiler che istruisce Babel a transpile in una modalità specifica. Dobbiamo usare i preset, che ha l'ambiente in cui vogliamo che il codice venga convertito. Ad esempio, il preset es2015 convertirà il codice in es5 .

Babel-Polyfills

Ci sono alcune funzionalità come metodi e oggetti, che non possono essere trasferiti. In tali casi, possiamo fare uso di babel-polyfill per facilitare l'uso delle funzionalità in qualsiasi browser. Consideriamo l'esempio delle promesse; affinché la funzionalità funzioni nei browser meno recenti, è necessario utilizzare i polyfill.

Babel-Polyfills

Babel-cli viene fornito con una serie di comandi in cui il codice può essere facilmente compilato sulla riga di comando. Ha anche funzionalità come plugin e preset da utilizzare insieme al comando che semplifica il trasferimento del codice in una volta sola.

Vantaggi dell'utilizzo di BabelJS

In questa sezione, impareremo i diversi vantaggi associati all'uso di BabelJS -

  • BabelJS fornisce compatibilità con le versioni precedenti di tutte le nuove funzionalità aggiunte a JavaScript e può essere utilizzato in qualsiasi browser.

  • BabelJS ha la capacità di transpile per prendere la prossima versione imminente di JavaScript: ES6, ES7, ESNext, ecc.

  • BabelJS può essere utilizzato insieme a gulp, webpack, flow, react, typescript, ecc. Rendendolo molto potente e può essere utilizzato con grandi progetti che semplificano la vita dello sviluppatore.

  • BabelJS funziona anche con la sintassi React JSX e può essere compilato in formato JSX.

  • BabelJS ha il supporto per plugin, polyfill, babel-cli che facilitano il lavoro con grandi progetti.

Svantaggi dell'utilizzo di BabelJS

In questa sezione, impareremo i diversi svantaggi dell'utilizzo di BabelJS:

  • Il codice BabelJS cambia la sintassi durante il transpiling, il che rende il codice difficile da capire quando viene rilasciato in produzione.

  • Il codice traspilato è di dimensioni maggiori rispetto al codice originale.

  • Non tutti gli ES6 / 7/8 o le nuove funzionalità imminenti possono essere trasferite e dobbiamo utilizzare polyfill in modo che funzioni sui browser meno recenti.

Ecco il sito ufficiale di babeljs https://babeljs.io/.