Skip to content
Freewebsolution
Menu
  • Home
  • angular
  • php
  • guide
  • laravel
  • react
  • corsi
Freewebsolution
Menu
transpilatore-babel

Transpilatore Babel: guida al suo utilizzo-#2

Posted on 14 Maggio 201914 Maggio 2019 by lucio
Category: corso javascript es6, guide
2.698 views Tempo di lettura: 3 minuti

Il transpilatore Babel ci consente di transpilare , ossia convertire, l’ultima release di ESx in una compatibile con tutti i browser attuali.

Come visto nel precedente tutorial la release ES6 ha aggiunto ottime funzionalità a JavaScript. Purtroppo queste ad oggi non sono ancora del tutto  compatibili con browser, più datati, quali possono essere,ad esempio, internet explorer 9 .

Utilizzo del transpilatore Babel

Innanzitutto colleghiamoci al sito di Babel e fate click nel menu su try it out, vi si apre una pagina come in figura sotto:

transpiler-babel

dove a sinistra scriverete il codice in ES6 ed a destra questo verrà transpilato automaticamente in una versione compatibile. Se fate click nella freccia che vi trovate lateralmente questa espande un menu a tendina dove poter effettuare delle personalizzazioni:

personalizzare-babel

quindi sul menu setting ‘flaggate‘ le voci Evaluate e Line Wrap ,mentre su Presets scegliete il linguaggio da transpilare (nel nostro caso sceglieremo ES2015 che equivale a ES6).

babel

Ora ,che siete pronti, provate a scrivere del codice in ES6 partendo dalle variabili (cosa che vedremo in uno dei  prossimi tutorial):

let b = 2;
const a = 1;

come avrete notato a destra , ossia nella zona del codice transpilato, ora vi è:

"use strict";

var b = 2;
var a = 1;

sia const che let sono state tradotte in var anche se fra le due vi è un sostanziale differenza in quanto la prima non può essere riassegnata mentre la seconda si.

Nel prossimo tutorial vedremo un modo di transpilare il codice in linea e ,quindi offline, mediante il Webpack , ovvero,un Bundle  di moduli statici per le moderne applicazioni JavaScript.

Per il momento è tutto, prima di darvi appuntamento con la prossima guida  vi ricordo che se volete approfondire i concetti di Angular 7 potete farlo seguendo il mio videocorso “Angular dalla A alla Web App” .

Potrebbero interessarti:

  • laravel_livewire
    Creare Interfacce Dinamiche con Laravel 11 e…

Lucio Ticali

Lucio Ticali - Insegnante su Udemy

Hi, I'm Lucio Ticali, author of this blog. I am a Full stack developer and Udemy Instructor with over 20 years of experience in the Information Technology sector.

Ultime da Freeweb

  • Creare un’applicazione di e-commerce con Laravel e Stripe
  • Come integrare Stripe con Laravel 11
  • Realizza il gioco del solitario con React e Laravel: Parte 1
  • Creare Interfacce Dinamiche con Laravel 11 e Livewire 3: Guida Passo-Passo
  • Come creare una Progressive Web App (PWA) con Laravel 11

Corsi da non perdere

CORSO JAVASCRIPT ES7 E TYPESCRIPT CON REACT JS ED ANGULAR 8

€ 9.99 / €12.99 GUIDA es7completa

Ebook da non perdere

Laravel 11 dall'idea al codice

€ 9.99 / €21.99 laravel 11: dall'idea al codice

©Copyright 2025 - Freewebsolution. All rights reserved, Lucio Ticali Lucio ticali Udemy instructor instructor. Privacy-Informativa cookies