Articles /

Iniziare con Babel 7

JavaScript è unico a causa della vastità dell’ecosistema. Mentre i nuovi standard aggiungono zucchero sintattico, farli supportare dai browser richiede tempo. Babel aggira questo problema attraverso la transpilazione automatica.

L’idea dietro il prodotto è semplice: Babel prende il codice ES6 o ES7 e sostituisce i nuovi elementi sintattici con codice di emulazione. Il suo output conferma la sintassi classica di JavaScript e funziona su vecchi browser come Internet Explorer.

Il rilascio iniziale di Babel ha preso d’assalto il mondo. Poco dopo la sua prima apparizione, vari framework come React, Vue ed Ember lo hanno abbracciato. Gli sviluppatori spesso usano il prodotto senza sapere che lavora in background – più di un popolare progetto npm ha una dipendenza da Babel.

  • Come fare un’app

Queste dipendenze hanno trasformato il processo di rilascio del predecessore in un affare pieno di conflitti. La versione 7, ancora gestita da un piccolo team di manutentori, ha quindi cercato di essere il più compatibile possibile. I cambiamenti di rottura sono pochi e lontani tra loro, mentre la qualità della generazione del codice rimane alta (se stai lavorando con un team, salvare i documenti nel cloud storage ti aiuterà a rimanere coeso).

Se non hai mai lavorato con Babel prima, lascia che questa sia la tua guida. Essere in grado di utilizzare funzioni JavaScript avanzate senza preoccupazioni di compatibilità rende la vita molto più facile.

Vuoi alcuni strumenti per semplificare il tuo processo? La nostra guida al miglior costruttore di siti web ti aiuterà. Vuoi un supporto a lungo termine? Prendi il giusto servizio di web hosting.

Controllo della versione

Babel di solito vive nell’ambiente runtime di Node. Cominciamo controllando le versioni utilizzate. L’output fornisce lo stato della versione trovata sulla workstation Ubuntu 14.04 utilizzata per creare il seguente articolo. Questa non è pedanteria – la figura che accompagna questo passo mostra che il team di Babel ha abbandonato il supporto per un bel po’ di versioni di Node.js.

tamhan@tamhan-thinkpad:~$ node --versionv8.14.0tamhan@tamhan-thinkpad:~$ npm --version6.4.1

Cambiamento dei nomi dei pacchetti

Un cambiamento radicale nella versione 7 ha coinvolto lo spostamento dei pacchetti Babel nel proprio spazio dei nomi. I pacchetti più vecchi non sono stati rimossi dai vari repository. Questo è importante, poiché l’uso dei nomi dei pacchetti legacy porta alla situazione mostrata nella figura che accompagna questo passo.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node. . .+ @babel/[email protected]+ @babel/[email protected]+ @babel/[email protected]+ @babel/[email protected]

Aggiungi un’azione di compilazione

Il passo precedente presuppone che si lavori all’interno di un progetto npm. In questo caso, eseguire Babel tramite l’azione di compilazione è facile. Apri package.json e modificalo come dimostrato nel codice qui sotto:

{. . ."main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "babel index.js -d lib"},

Trasporta il codice a mano

Mettere Babel al lavoro implica il lancio dell’azione di compilazione. Questo è il modo migliore per farlo tramite il comando npm run. Il valore -d informa Babel che i risultati devono essere messi nella cartella lib – la figura che accompagna questo passo mostra che la cartella viene creata al volo.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm run build> [email protected] build /home/tamhan/workspaceB7> babel index.js -d libSuccessfully compiled 1 file with Babel.

Una questione di configurazione

Invocare Babel senza ulteriori opzioni di configurazione non permette la transpilazione. Il codice può essere transpilato solo se il framework riceve ulteriori informazioni sull’ambiente di destinazione. Questo può essere fatto tramite un parametro della linea di comando, o creando un file chiamato .babelrc nella radice del progetto.

Configurare il babelrc

Babel si configura da solo tramite un insieme di plugin, ognuno dei quali applica delle trasformazioni di transpilazione al codice base. Noi usiamo il pacchetto preset-env, che viene fornito con un set preconfigurato di trasformazioni destinato a coprire la maggior parte delle basi.

{"presets": }

E’ ora di fare un giro di prova

Aggiungi un po’ di new-age JavaScript a index.js per testare il programma con del codice live. Il codice che accompagna questo passo non funzionerebbe sui browser legacy – una volta fatto, la funzione implicita viene sostituita con una normale dichiarazione, come mostrato in figura.

function tamstest(){.map((n) => n + 1);}

Regola il targeting

preset-env applica la maggior parte delle transpilazioni per impostazione predefinita: l’obiettivo del prodotto è quello di creare JavaScript universalmente compatibile senza tener conto dei costi di larghezza di banda e prestazioni. Puoi cambiare la sua configurazione passando un oggetto target – l’esempio qui sotto ha come target specifiche versioni di Chrome e IE.

{"presets": ]}

Targeting avanzato

Il targeting del browser diabel non è limitato a Chrome e Internet Explorer. Grazie alla cooperazione con browserslist, gli sviluppatori possono scegliere tra più di una dozzina di target, come mostrato di seguito.

I nomi sono case insensitive:

  • Android per Android WebView.
  • Baidu per Baidu Browser.
  • BlackBerry o bb per Blackberry browser.
  • Chrome per Google Chrome.
  • ChromeAndroid o and_chr per Chrome per Android.
  • Edge per Microsoft Edge.
  • Electron per Electron framework. Sarà convertito in versione Chrome.
  • Explorer o ie per Internet Explorer.
  • ExplorerMobile o ie_mob per Internet Explorer Mobile.
  • Firefox o ff per Mozilla Firefox.
  • FirefoxAndroid o and_ff per Firefox per Android.
  • iOS o ios_saf per iOS Safari.
  • Node per Node.js.Opera per Opera.
  • OperaMini o op_mini per Opera Mini.
  • OperaMobile o op_mob per Opera Mobile.
  • QQAndroid o and_qq per QQ Browser per Android.
  • Safari per desktop Safari.
  • Samsung per Samsung Internet.
  • UCAndroid o and_uc per UC Browser per Android.

Targeting avanzato, parte seconda

Browserlist può anche prendere query avanzate. La sua homepage elenca le opzioni di configurazione, quasi tutte possono essere utilizzate anche all’interno di Babel modificando babelrc. Le query possono essere valutate localmente se la tua postazione ha installato npx.

{"targets": "> 0.25%, not dead"}

Trasparenza automatica

Dovendo invocare Babel a mano diventa noioso in fretta. L’utilità nodemon monitora le risorse del filesystem e spara i comandi non appena vengono rilevati dei cambiamenti. In teoria, l’aggiunta del supporto per nodemon è gestita tramite una piccola modifica a package.json.

{"name": "workspaceb7",. . ."main": "index.js","scripts": {"start": "nodemon --exec babel-node index.js",

Check for presence

Alcune stazioni di lavoro hanno nodemon installato globalmente. Se questo non è il caso, invocando il programma si otterrà un messaggio di errore simile a quello mostrato sotto. Fortunatamente, il deploy di nodemon è facilmente realizzabile tramite il comando npm install.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm install --save-dev nodemon

Verifica funzionalità

Avvia npm start in una finestra di terminale e procedi a modificare il contenuto di index.js con un editor come gedit o Visual Studio Code. Dopo aver salvato, nodemon mostrerà le informazioni di stato.

 restarting due to changes... starting `babel-node index.js` clean exit - waiting for changes before restart

Fix transpilation

Mentre il rilevamento di nodemon dovrebbe funzionare perfettamente a questo punto, il contenuto del file index.js che si trova in lib non si aggiorna. Questo è causato da una particolarità di babel-node – non impegna i file transpilati sul disco. Invece lancia una versione modificata della CLI di Node, che funziona con i file trapiantati.

Trasporta il codice programmaticamente

Babel non si limita a lavorare sulla linea di comando. Se i pacchetti corretti sono installati, il codice può anche essere trapiantato da un altro programma. Lo snippet che accompagna questo passo applica un insieme di trasformazioni di base ad una stringa di input. Tieni presente che le impostazioni di configurazione, di solito, sono ottenute da un file babelrc.

var babel = require("@babel/core");import { transform } from "@babel/core";import * as babel from "@babel/core";babel.transform("code();", options, function(err, result) {result.code;result.map;result.ast;});

Traspilare interi file

Il codice sorgente di solito non viene memorizzato in variabili stringa. L’API di Babel tiene conto di questo attraverso una serie di funzioni relative ai file, che rinunciano alla stringa di input per una variabile con un nome di file. I risultati, comunque, vengono restituiti come una normale variabile JavaScript.

babel.transformFile("filename.js", options, function (err, result) {result; // => { code, map, ast }});

Sync e async

Babel 7 ha introdotto versioni sincrone e asincrone di molte chiamate API. Assicurati di scegliere quella giusta per le tue esigenze – mentre la trascrizione di piccoli esempi può essere fatta al volo, impostare Babel su file più complessi può facilmente portare a ritardi di decine di secondi.

Scopri i singoli plugin

Se mai dovessi trovarti a chiederti cosa succede in background, visita semplicemente questa pagina. Fornisce una lista di tutti i plugin attualmente contenuti nella distribuzione di Babel, e contiene anche alcuni suggerimenti per tutti coloro che cercano di creare un proprio plugin.

Strip out TypeScript specifics

Babel non si limita a trasportare elementi JavaScript new-age. Il prodotto contiene un motore TypeScript con caratteristiche limitate. Elimina le informazioni di battitura e sostituisce gli elementi avanzati. Purtroppo, Babel non esegue il controllo dei tipi – questo elimina uno dei vantaggi più significativi del linguaggio TypeScript.

{"presets": }

Esegui Babel online

Mentre le operazioni di transpilazione di solito funzionano senza problemi, talvolta si verificano problemi. In questo caso, il Babel REPL è utile. Esegue Babel nel browser della tua stazione di lavoro e mostra l’input e l’output uno accanto all’altro.

Impara i punti critici

La nostra introduzione spiegava che Babel è molto usato in vari progetti. Il team di manutentori di Babel semplifica gli aggiornamenti di versione con un dettagliato registro delle modifiche. Se usate Babel programmaticamente, non dimenticate di consultare la guida all’aggiornamento delle API.

Questo articolo è stato originariamente pubblicato nel numero 283 della rivista di web design creativo Web Designer. Compra il numero 283 qui o abbonati a Web Designer qui.

  • Come codificare JavaScript più veloce e leggero
  • 5 fantastiche API Javascript
  • 27 modelli di siti web di prima classe

Leave a Reply