Babel et la transpilation de code JavaScript

Babel est un outil de transpilation de code qui prend en entrée du code écrit dans une version plus récente (ou actuelle) de JavaScript et le convertit en une version compatible avec les "anciennes versions", de sorte que le code puisse être exécuté sur un plus grand nombre de navigateurs et d'appareils.

Babel utilise des plugins et des presets qui lui permettent de gérer différentes versions de JavaScript et d'appliquer les transformations nécessaires pour convertir le code en une version compatible. On peut également les configurer pour effectuer des conversions spécifiques en fonction des besoins.

Voici un exemple de code JavaScript qui utilise une syntaxe qui n'est pas prise en charge par les "anciennes" versions de JavaScript, mais qui peut être transpilée avec Babel :

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map((number) => number * 2);

console.log(doubled); // [2, 4, 6, 8, 10]

Il y a notamment présence de la notion d'arrow function => et de constantes avec const. Après transpilation avec Babel, le code précédent peut être réécrit ainsi :

// Code transpilé
"use strict";

var numbers = [1, 2, 3, 4, 5];

var doubled = numbers.map(function (number) {
  return number * 2;
});

console.log(doubled); // [2, 4, 6, 8, 10]

Comme on peut le voir, la syntaxe a été modifiée pour être "compatible" avec les navigateurs qui pourraient être en retard. C'est une technique qui a été très utile pendant des années, même si désormais les différences tendent à se résorber grâce à une grande période d'amélioration du support JavaScript, grâce aux mises à jour automatiques et à l'abandon des mammouths tels qu'Internet Explorer.

Vous pouvez utiliser la démonstration en ligne de Babel https://babeljs.io/repl pour explorer son fonctionnement.

Dans quel cadre Babel est il exécuté pour développer ?

Babel est (ou a été) généralement utilisé lors du développement avec des frameworks tels que React, Vue, Angular. Cela permet durant le développement d'utiliser les dernières fonctionnalités dans la syntaxe, tout en sachant que le code sera compatible avec un plus grand nombre de navigateurs.

Pour utiliser Babel lors du développement, il faut d'abord l'installer et le configurer en utilisant les plugins et les presets (pré-réglages) appropriés. Ensuite, il peut être utilisé soit en ligne de commande dans le terminal pour transpiler le code directement, soit en tant que partie d'un processus de build (compilation) plus complet pour automatiser la transpilation dès la mise en production. Les fichiers transpilés sont utilisés dans l'application en remplacement des fichiers source originaux. La plupart du temps c'est déjà en place dans la structure de base et relativement transparent dans le processus de compilation.

Exemple d'usage de Babel avec Webpack

Webpack est un outil de build très répandu, qui peut être utilisé avec Babel.

Voici un exemple de configuration de Webpack qui utilise Babel :

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};

Dans cet exemple, la configuration indique qu'il faut utiliser le module babel-loader pour transpiler tous les fichiers JavaScript (dont le nom se termine par .js) à l'exception des fichiers situés dans le dossier node_modules. Le preset @babel/preset-env est utilisé pour indiquer quelle version doit être ciblée lors de la transpilation. Pour utiliser cette configuration avec Webpack, il suffit d'exécuter la commande webpack dans un terminal, en se situant dans le répertoire contenant la configuration. Cela dgénérera le fichier transpilé bundle.js dans le dossier dist.