Guida per principianti a Babel

Questo articolo introduce Babel, un compilatore JavaScript che consente agli sviluppatori di utilizzare JavaScript di nuova generazione oggi.

Può essere frustrante scrivere JavaScript durante la creazione di applicazioni web. Dobbiamo pensare alle funzionalità disponibili nei browser che stiamo prendendo di mira e cosa succede quando una funzionalità non viene implementata. Alcune persone consiglierebbero semplicemente di non usarlo, il che è un’esperienza dolorosa la maggior parte del tempo se stiamo costruendo qualcosa di complicato.

Per fortuna, alcuni strumenti ci permettono di smettere di preoccuparci di ciò che è supportato e basta scrivere il miglior codice che possiamo. Si chiamano transpiler. Un transpiler è uno strumento che prende il codice sorgente come input e produce nuovo codice sorgente come output, con una sintassi diversa ma semanticamente il più vicino possibile — o idealmente equivalente — all’originale.

Babel è praticamente il transpiler standard per tradurre JavaScript moderno (ES2015+) in implementazioni compatibili che girano nei vecchi browser. È la soluzione perfetta se vuoi solo concentrarti sulla scrittura di JavaScript.

E sebbene l’obiettivo principale di Babel sia tradurre gli standard più recenti di ECMAScript (ES) per browser vecchi o talvolta attuali, può fare di più. C’è un ecosistema di preset e plugin che rendono possibile l’aggiunta di funzionalità non standard. Ogni plugin rende disponibile una nuova funzionalità/trasformazione per il codice e i preset sono solo una raccolta di plugin.

Guida introduttiva

Esistono diversi modi per configurare Babel a seconda del progetto e degli strumenti utilizzati. In questo articolo, stiamo andando a spiegare come impostare Babel utilizzando la CLI, anche se se si sta utilizzando un sistema di build o framework, è possibile controllare le istruzioni specifiche sul sito ufficiale. La maggior parte delle volte la CLI è il modo più semplice e veloce per iniziare, quindi se sei un utente per la prima volta, sentiti libero di continuare.

Il primo passo per impostare Babel in un progetto è installare il pacchetto usando npm e aggiungerlo come dipendenza dev. Supponendo che tu abbia un Nodo funzionante.ambiente js già in atto, è solo una questione di eseguire quanto segue nel tuo terminale:

mkdir babel-testcd babel-testnpm init -ynpm install --save-dev babel-cli

Questo creerà una directory (babel-test) nella directory, inizializzerà un progetto npm (creando così un file package.json) e quindi installerà babel-cli come dipendenza dev.

Se hai bisogno di aiuto con quanto sopra, consulta i nostri tutorial sull’installazione di Node e sul lavoro con npm.

Successivamente, possiamo aprire package.json e aggiungere un comando build ai nostri script npm:

"scripts": { "build": "babel src -d dist"}

Questo prenderà i file di origine dalla directory src e produrrà il risultato in una directory dist. Allora possiamo eseguirlo come:

npm run build

Ma aspetta! Prima di eseguire Babel dobbiamo installare e impostare i plugin che trasformeranno il nostro codice. Il modo più semplice e veloce per farlo è aggiungere il preset Env, che seleziona i plugin appropriati in base ai browser di destinazione che indichi. Può essere installato utilizzando:

npm install babel-preset-env --save-dev

Quindi creare un file .babelrc nella radice del progetto e aggiungere il preset:

{ "presets": }

Il file .babelrc è il luogo in cui hai inserito tutte le tue impostazioni per Babel. Utilizzerai questo principalmente per configurare preset e plugin, ma sono disponibili molte più opzioni. È possibile controllare l’elenco completo nella pagina API Babel.

Si prega di notare che, a seconda del sistema operativo, i file che iniziano con un punto saranno nascosti per impostazione predefinita. Se questo è problematico per te (o se preferisci solo meno file), puoi mettere le tue impostazioni Babel nel file package.json, sotto una chiave babel, in questo modo:

{ "name": "babel-test", "version": "1.0.0", "babel": { // config }}

Infine, creiamo le directory e i file che Babel si aspetta di trovare:

mkdir src dist

E dargli qualcosa da trasformare:

let a = 1;let b = 2; = ;console.log(a);console.log(b);

Questo esempio utilizza l’assegnazione destrutturazione per scambiare i valori di due variabili.

Esecuzione di Babel

Ora che si dispone di un’installazione Babel pronta all’uso, è possibile eseguire il comando build per eseguire il processo di compilazione:

npm run build

Questo prenderà il codice da src/main.js, lo trasformerà in codice ES5 e produrrà il codice trasformato in dist/main.js.

Ecco cosa ha prodotto:

"use strict";var a = 1;var b = 2;var _ref = ;a = _ref;b = _ref;console.log(a);console.log(b);

Come puoi vedere, let è stato sostituito da var e Babel ha introdotto una variabile temporanea (indicata dal carattere di sottolineatura) per facilitare lo swap.

E il gioco è fatto. Il codice che scrivi nella directory src verrà tradotto nelle versioni precedenti della lingua. Per impostazione predefinita, se non si aggiungono opzioni al preset, verranno caricate tutte le trasformazioni. È inoltre possibile indicare i browser di destinazione come segue:

{ "presets": } }] ]}

Questo caricherà le trasformazioni necessarie per supportare le ultime due versioni di ciascun browser e Safari maggiore o uguale alla versione 7. È possibile trovare le opzioni disponibili per i browser di destinazione nel repository Browserlist.

Ecosistema Babele: Una rapida panoramica

Come hai notato nella sezione precedente, Babel non farà nulla da solo quando lo installi. Dobbiamo installare un set di plugin per ottenere il comportamento desiderato, oppure possiamo usare i preset, che sono set predefiniti di plugin.

Di solito, ogni caratteristica che si desidera includere sarà sotto forma di un plugin. Alcuni esempi per ES2015 includono:

• costanti
• funzioni freccia
• funzioni con ambito di blocco
• classi
• for-of
• diffusione
• modelli letterali

Vedere il Pagina Plugin nei Documenti Babel per un elenco completo.

Ma a volte non vuoi includere tutti i plugin uno per uno. Quindi ci sono preset predefiniti che faciliteranno il processo di installazione di ciascun plugin.

I tre preset ufficiali attualmente disponibili sono:

• Env
• React
• Flow

Env è il più usato e quello che abbiamo usato qui. Carica automaticamente tutte le trasformazioni necessarie per rendere il codice compatibile a seconda dei browser mirati.

Il preset React trasforma il codice che si trova tipicamente nei progetti React, aggiungendo principalmente la compatibilità con le annotazioni di flusso e JSX.

E infine, il preset di flusso viene utilizzato per ripulire il codice dalle annotazioni del tipo di flusso (anche se non controlla se i tipi sono validi o meno.)

Babel Polyfill

Esistono funzionalità JavaScript che non possono essere trasformate sintatticamente, di solito perché non sono implementate funzionalità equivalenti, ad esempio Promesse e funzioni di generatore.

Questi tipi di funzionalità devono essere implementati nel browser da una libreria da utilizzare nel codice, e questo è il lavoro di un polyfill.

Babel polyfill è composto da core-js e dal runtime del rigeneratore. Insieme, coprono tutte le funzionalità di ES2015+.

Uso avanzato

Come accennato, Babel può anche essere utilizzato per trasformare funzionalità che non sono ancora state implementate nella lingua. Un buon esempio di questo è la proposta di campi di classe (attualmente allo stadio TC39 3: candidato). Ciò è particolarmente popolare tra gli sviluppatori React, in quanto rimuove la necessità di associare esplicitamente i metodi a un particolare componente e significa anche che state di un componente può essere dichiarato come un campo di classe (potenzialmente eliminando la necessità di un costruttore).

Per quelli di voi che desiderano utilizzare i campi di classe oggi, è necessario aggiungere babel-plugin-transform-class-properties come dipendenza dev:

npm install --save-dev babel-plugin-transform-class-properties

Dovresti anche aggiornare il tuo file .babelrc come segue:

{ "presets": , "plugins": }

Ora puoi scrivere:

class App extends Component { state = { count: 0 }; incCount = () => { this.setState(ps => ({ count: ps.count + 1 })); }; render() { return ( <div> <p>{ this.state.count }</p> <button onClick={this.incCount}>add one</button> </div> ); }}

E non finisce qui. Puoi anche usare Babel per aggiungere nuove funzionalità alla lingua, come dimostra il nostro tutorial Understanding ASTS costruendo il tuo plug-in Babel.

Alternative

La scrittura di applicazioni web moderne a volte richiede più delle funzionalità disponibili in JavaScript. Altre lingue possono anche essere tradotte in JavaScript compatibile, ma anche implementare altre funzioni utili.

L’opzione più popolare è TypeScript, che è un normale JavaScript che implementa le moderne funzionalità ES ma ne aggiunge anche altre, specialmente per quanto riguarda la sicurezza dei tipi.

All’altro estremo, ci sono linguaggi completamente diversi tra diverse categorie, da quelli funzionali come PureScript a quelli orientati agli oggetti come Dart.

Per una panoramica più approfondita delle lingue alternative, dai un’occhiata a 10 lingue che vengono compilate in JavaScript.

Conclusione

Babel è un’ottima opzione per scrivere applicazioni moderne pur servendo JavaScript che può essere compreso da tutti gli sviluppatori e dalla vasta gamma di browser in cui il codice deve essere eseguito.

Babel non è utile solo per trasformare ES2015 + in versioni precedenti della lingua, sia nel browser che su piattaforme come Node.js-ma anche per l’aggiunta di nuove funzionalità che non fanno parte dello standard. Per vedere cosa intendo, basta dare un’occhiata alla directory npm per trovare tutti i plugin o preset Babel disponibili.

Poiché JavaScript si sta evolvendo a un ritmo così rapido, è ovvio che i produttori di browser avranno bisogno di un po ‘ di tempo per implementare le funzionalità più recenti. Dare a Babel un posto nel tuo toolkit significa che puoi scrivere JavaScript all’avanguardia oggi, con la certezza che non stai abbandonando nessuno dei tuoi utenti. Cosa non c’è da amare?