Inizia con Babel 7

JavaScript è unico a causa della larghezza dell'ecosistema. Mentre i nuovi standard aggiungono zucchero sintattico, ottenendoli supportati sui browser richiedono tempo. Babel funziona attorno a questo problema tramite la traspirazione automatica.

L'idea alla base del prodotto è semplice: Babel prende il codice ES6 o ES7 e sostituisce nuovi elementi sintattici con codice di emulazione. La sua uscita conferma alla classica sintassi JavaScript e funziona su browser più vecchi come Internet Explorer.

La versione iniziale di Babel ha preso il mondo per tempesta. Poco dopo è apparso per la prima volta, vari quadri come reagire, Vue e Ember lo abbracciono. Gli sviluppatori spesso usano il prodotto senza sapere che funziona 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 in conflitto. La versione 7, ancora gestita da un piccolo team di manutentore, quindi ha cercato di essere il più compatibile possibile. Le variazioni di rottura sono poche e lontane tra, mentre la qualità della generazione del codice rimane alta (se lavori con una squadra, salvando i documenti in deposito cloud. ti aiuterà a rimanere coeso).

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

Vorresti alcuni strumenti per semplificare il tuo processo? La nostra guida al meglio Builder del sito web aiuterà. Vuoi supporto a lungo termine? Ottenere la giusta web hosting servizio.

01. Versione controlla

Babel abitualmente vive nell'ambiente runtime del nodo. Iniziamo fuori controllando le versioni utilizzate. L'output fornisce lo stato della versione trovato sulla workstation Ubuntu 14.04 utilizzato per creare il seguente articolo. Questo non è pedanteria - la figura che accompagna questa fase mostra che il team Babel ha abbandonato il supporto per alcune versioni Node.js.

 Tamhan @ Tamhan-ThinkPad: ~ $ node --version
v8.14.0.
Tamhan @ Tamhan-ThinkPad: ~ $ NPM --version
6.4.1 

02. Cambio dei nomi dei pacchetti

Un cambiamento di rottura 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 passaggio.

 Tamhan @ Tamhan-ThinkPad: ~ / WorkspaceB7 $ NPM
Installa --Save-Dev @ Babel / Core @ Babel / CLI @
Babel / Preset-env @ Babel / Nodo
. . .
+ @ Babel / Core @ 7.2.0
+ @ Babel / Node @ 7.2.0
+ @ Babel / CLI @ 7.2.0
+ @ Babel / Preset-env @ 7.2.0 

03. Aggiungi un'azione di compilazione

Il passo sopra presuppone che tu lavori all'interno di un progetto NPM. In tal caso, eseguire Babel tramite l'azione di costruzione è facile. Aperto pacchetto.json. e modificalo come dimostrato nel codice qui sotto:

 {
. . .
"Main": "index.js",
"Script": {
"Test": errore "echo \": nessun test
specificato \ "& amp; & amp; uscita 1",
"Build": "Babel index.js -d lib"

}, 

04. Codice traspile a mano

Mettere Babel al lavoro comporta lo sparare l'azione di costruzione. Questo è meglio realizzato tramite il comando run npm. Il -D. Il valore informa Babel che i risultati devono essere collocati nel lib. Cartella: la figura che accompagna questo passaggio mostra che la cartella viene creata al volo.

 Tamhan @ Tamhan-ThinkPad: ~ / WorkspaceB7 $ NPM
Esegui costruire
& GT; [email protected] Build / Home / Tamhan /
WorkspaceB7.
& GT; Babel index.js -d lib
Compilato con successo 1 file con Babel. 

05. Una questione di configurazione

Invocazione di Babel senza ulteriori opzioni di configurazione non abilita la traspirazione. Il codice può essere traspirato solo se il framework riceve ulteriori informazioni sull'ambiente di destinazione. Questo può essere fatto tramite un parametro della riga di comando o creando un file chiamato .babelrc. nella radice del progetto.

06. Configura il Babelrc

Babel si configura tramite una serie di plugin, ognuno dei quali applica la traspirazione trasformabile alla base del codice. Noi usiamo il preset-env. Pacchetto: viene fornito con un set di trasformazioni preconfigurato destinato a coprire la maggior parte delle basi.

 {
"Presets": ["@ Babel / Preset-env"]
} 

07. Tempo per un test drive

Aggiungi un po 'di JavaScript New-Eve a Index.js per testare il programma contro un codice live. Il codice che accompagna questo passaggio non funzionerebbe sui browser legacy - se fatto, la funzione implicita viene sostituita con a normale Dichiarazione, come mostrato nella figura.

 Funzione Tamstest () {
[1, 2, 3] .Map ((N) = & GT; N + 1);
} 

08. Regolare il targeting.

preset-env. Applica la maggior parte delle traspirazioni per impostazione predefinita: l'obiettivo del prodotto è creare JavaScript universalmente compatibile senza riguardo alle spese di larghezza di banda e prestazioni. Puoi cambiare la sua configurazione passando in a obiettivi Oggetto - L'esempio seguente indica versioni specifiche di Chrome e IE.

 {
"Preselezioni": [
[
"@ Babel / preset-env",
{
"Tariffe": {
"Chrome": "58",
"IE": "11"
}
}
]
]
} 

09. Targeting avanzato

Il targeting del browser di Babel non è limitato a Chrome e Internet Explorer. Grazie alla collaborazione con BrowserSlist. , gli sviluppatori possono mescolare e abbinare da più di una dozzina di obiettivi, come mostrato di seguito.

I nomi sono case insensibili:

• Android. per Android Webview.
• Baidu. per Browser Baidu.
• Mora o BB. per browser BlackBerry.
• Cromo per Google Chrome.
• Chromeandroid. o e_chr. per Chrome per Android.
• Bordo per Microsoft Edge.
• Elettrone per quadro elettronico. Sarà convertito in versione Chrome.
• Esploratore o cioè 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.
• Nodo per node.js.opera per l'opera.
• Opera Mini o op_mini. per Opera MINI.
• Operamobile o op_mob. per Opera Mobile.
• Qqandroid. o and_qq. Per il browser QQ per Android.
• Safari per safari desktop.
• Samsung. per Samsung internet.
• Ucandroid. o and_uc. Per il browser UC per Android.

10. Targeting avanzato, seconda parte

BrowserList può anche prendere query avanzate. La sua homepage Elenca le opzioni di configurazione, quasi tutte possono anche essere utilizzate all'interno di Babel modificando Babelrc. . Le query possono essere valutate localmente se la workstation ha installato NPX.

 {
"Tariffe": "& GT, 0,25%, non morto"
} 

11. Traspirazione automatica

Dovendo invocare Babel a mano diventa noioso rapidamente. L'utilità NODEMON monitora le risorse del filesystem e spara i comandi spenti come vengono rilevati modifiche. In teoria, l'aggiunta di un supporto nodemon è gestito tramite un piccolo cambiamento a pacchetto.json. .

 {
"Nome": "WorkspaceB7",
. . .
"Main": "index.js",
"Script":
{
"Start": "NODEMON --EXEC Babel-Node
index.js ", 

12. Controllare la presenza

Alcune workstation hanno nodemony installato a livello globale. Se questo non è il caso, invocando il programma produrrà un messaggio di errore simile a quello mostrato di seguito. Fortunatamente, distribuire nodemony è facilmente realizzabile tramite il Installazione NPM. comando.

 Tamhan @ Tamhan-ThinkPad: ~ / WorkspaceB7 $ NPM
Installa --Save-Dev Nodemon 

13. Controllare la funzionalità

Fuoco spento Inizio NPM in una finestra terminale e procedere a cambiare il contenuto di index.js. con un editor come GEDIT o Codice studio visivo . Dopo il salvataggio, nodemony emetterà le informazioni sullo stato.

 [Nodemon] Riavvio dovuto a modifiche ...
[Nodemon] Avvio di "Babele-Node Index.js`
[Nodemon] Esci pulito - In attesa di modifiche
prima di riavviare 

14. Fix Transpilation.

Mentre nodemony Il rilevamento dovrebbe funzionare perfettamente a questo punto, il contenuto del index.js. file che si trovano in lib. Non aggiornare. Questo è causato da una nicetà di Babel-nodo. - Non impegna i file traspirati sul disco. Invece spara una versione modificata del nodo CLI, che funziona con i file traspirati.

15. Codice traspile a livello programmatico

Babel non è limitato a lavorare sulla riga di comando. Se i pacchetti corretti sono installati, il codice può anche essere traspirato da un altro programma. Lo snippet che accompagna questo passaggio applica un insieme di trasformazioni di base in una stringa di ingresso. Tieni presente che le impostazioni di configurazione, di solito, sono ottenute da a Babelrc. file.

 VAR BABEL = Richiede ("@ Babel / Core");
import {trasformazione} da "@ babel / core";
Importa * come Babel da "@ Babel / Core";
babel.transform ("codice ();", opzioni,
funzione (err, risultato) {
risultato.code;
risultato.Mappa;
risultato.ast;
}); 

16. Traspilare gli interi file

Il codice sorgente di solito non viene memorizzato in variabili di stringa. L'API Babel rappresenta questo tramite un insieme di funzioni relative ai file, che rinuncia alla stringa di ingresso per una variabile con un nome file. I risultati, tuttavia, vengono restituiti come una normale variabile JavaScript.

 babel.transformfile ("file filename.js", opzioni,
funzione (err, risultato) {
risultato; // = & gt; {codice, mappa, AST}
}
); 

17. Sincronizza e Async

Babel 7 ha introdotto versioni sincrono e asincroni della maggior parte delle chiamate API. Assicurati di scegliere quello giusto per le tue esigenze - mentre traspirando i piccoli esempi possono essere fatti al volo, impostare Babel allentato su file più complessi può facilmente portare a ritardi in esecuzione in dozzine di secondi.

18. Scopri i singoli plugin

Dovresti mai trovarti a chiedermi cosa succede sullo sfondo, visita semplicemente questa pagina . Fornisce un elenco di tutti i plugin attualmente contenuti nella distribuzione Babel e contiene anche alcuni suggerimenti per tutti coloro che cercano di creare un plug-in proprio.

19. Striscia le specifiche dei dattiloscritti

Babel non è limitato a traspirare elementi JavaScript New-AGE. Il prodotto contiene un motore dattiloscritto vincolato a funzionalità. Strappi di digitare le informazioni e sostituisce gli elementi avanzati. Purtroppo, Babel non esegue il controllo del tipo - questo elimina uno dei vantaggi più significativi del linguaggio dattilografo.

 {
"Presets": ["@ Babel / preset-dattiloscritto"]
} 

20. Run Babel online

Mentre le operazioni di traspirazione di solito funzionano senza intoppi, i problemi a volte si verificano. In tal caso, il Babel Rept. è utile Esegue Babel nel browser della tua workstation e mostra input e output proprio accanto all'altro.

21. Scopri i punti del dolore

La nostra introduzione ha spiegato che Babel vede un uso diffuso in vari progetti. La squadra del manutentore di Babel semplifica gli aggiornamenti della versione con a Registro modificabile dettagliato . Se usi Babel a livello di programmazione, non dimenticare di consultare il Guida all'aggiornamento API. .

Questo articolo è stato originariamente pubblicato in questione 283 di creative Web Design Magazine Web designer . Comprare il problema 283 qui o Iscriviti al web designer qui .

Articoli Correlati:

• Come codice JavaScript più veloce e più leggero
• 5 fantastiche API JavaScript
• 27 Modelli di sito Web di alta classe