BabelJS - Esecuzione del codice ES6
BabelJSè un transpiler JavaScript, che converte le nuove funzionalità aggiunte a JavaScript in ES5 o reagisce in base al preset o al plugin fornito. ES5 è una delle forme più vecchie di JavaScript ed è supportata per funzionare su browser vecchi e nuovi senza problemi. Nella maggior parte degli esempi di questo tutorial, abbiamo trasferito il codice in ES5.
Abbiamo visto molte funzionalità come funzioni freccia, classi, promesse, generatori, funzioni asincrone, ecc. Aggiunte a ES6, ES7 ed ES8. Quando una delle funzionalità appena aggiunte viene utilizzata nei vecchi browser, genera errori. BabelJS aiuta a compilare il codice, che è retrocompatibile con i browser meno recenti. Abbiamo visto che ES5 funziona perfettamente sui browser meno recenti senza problemi. Quindi, considerando i dettagli dell'ambiente del progetto, se è necessario che sia in esecuzione su browser meno recenti, possiamo utilizzare qualsiasi nuova funzionalità nel nostro progetto e compilare il codice per ES5 utilizzando babeljs e utilizzarlo qualsiasi browser senza problemi.
Consideriamo il seguente esempio per capirlo.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>BabelJs Testing</title>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
</body>
</html>file index.js
var _foo = () => {
return "Hello World"
};
alert(_foo());Produzione
Quando eseguiamo l'html sopra nel browser Chrome, otteniamo il seguente output:
Quando l'HTML viene eseguito in Firefox, genera il seguente output:
E quando lo stesso HTML viene eseguito in Internet Explorer, genera il seguente errore di sintassi:
Abbiamo utilizzato la funzione freccia ES6; lo stesso non funziona su tutti i browser come visto sopra. Per farlo funzionare, abbiamo BabelJS per compilare il codice per ES5 e usarlo in tutti i browser.
Compilerà il file js in es5 usando babeljs e controllerà di nuovo nei browser.
Nel file html, useremo index_new.js come mostrato di seguito -
<!DOCTYPE html>
<html>
<head>
<title>BabelJs Testing</title>
</head>
<body>
<script type="text/javascript" src="index_new.js"></script>
</body>
</html>index_new.js
"use strict";
var _foo = function _foo() {
return "Hello World";
};
alert(_foo());Uscita Chrome
Output del browser Firefox
Uscita browser IE
