BabelJS - Exécution de code ES6

BabelJSest un transpilateur JavaScript, qui convertit les nouvelles fonctionnalités ajoutées à JavaScript en ES5 ou réagit en fonction du préréglage ou du plugin donné. ES5 est l'une des plus anciennes formes de JavaScript et est pris en charge pour fonctionner sur les nouveaux et anciens navigateurs sans aucun problème. Dans la plupart des exemples de ce tutoriel, nous avons transpilé le code en ES5.

Nous avons vu de nombreuses fonctionnalités telles que des fonctions fléchées, des classes, des promesses, des générateurs, des fonctions asynchrones, etc. ajoutées à ES6, ES7 et ES8. Lorsque l'une des fonctionnalités nouvellement ajoutées est utilisée dans d'anciens navigateurs, elle génère des erreurs. BabelJS aide à compiler le code, qui est rétrocompatible avec les anciens navigateurs. Nous avons vu que ES5 fonctionne parfaitement sur les anciens navigateurs sans aucun problème. Donc, compte tenu des détails de l'environnement du projet, s'il doit être exécuté sur des navigateurs plus anciens, nous pouvons utiliser n'importe quelle nouvelle fonctionnalité de notre projet et compiler le code vers ES5 à l'aide de babeljs, et l'utiliser sans aucun problème dans tous les navigateurs.

Prenons l'exemple suivant pour comprendre cela.

Exemple

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script type="text/javascript" src="index.js"></script>
   </body>
</html>

fichier index.js

var _foo = () => {
   return "Hello World"
};

alert(_foo());

Production

Lorsque nous exécutons le html ci-dessus dans le navigateur Chrome, nous obtenons le résultat suivant -

Lorsque le HTML est exécuté dans Firefox, il génère la sortie suivante -

Et lorsque le même HTML est exécuté dans Internet Explorer, il génère l'erreur de syntaxe suivante -

Nous avons utilisé la fonction Flèche ES6; la même chose ne fonctionne pas sur tous les navigateurs comme vu ci-dessus. Pour que cela fonctionne, nous avons BabelJS pour compiler le code vers ES5 et l'utiliser dans tous les navigateurs.

Compilera le fichier js vers es5 en utilisant babeljs et vérifiera à nouveau dans les navigateurs.

Dans le fichier html, nous utiliserons index_new.js comme indiqué ci-dessous -

<!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());

Sortie Chrome

Sortie du navigateur Firefox

Sortie du navigateur IE

↰ Previous page Next page ↱