Tutoriel Webpack 5 – Comment configurer Babel

Babel permet d’écrire du code avec des fonctionnalités JavaScript qui ne sont pas encore prises en charge par la plupart des navigateurs. Vous avez peut-être entendu parler de JavaScript ES6 (ES2015), ES7, et d’autres versions de la spécification ECMAScript pour le langage JavaScript.

En utilisant Babel, le code qui n’est pas encore supporté sera transposé en JavaScript classique afin que chaque environnement (par exemple, le navigateur) puisse l’interpréter. Afin de faire fonctionner Babel, vous devez utiliser le loader pour babel.

INSTALLATION Webpack Babel loader

Vous devez installer deux de ses principales dépendances en ligne de commande :

npm install --save-dev @babel/core @babel/preset-env

En outre, si vous avez mis en place Webpack pour regrouper votre application JavaScript, vous devrez installer un Loader Webpack pour Babel :

npm install --save-dev babel-loader

Maintenant, avec toutes les bibliothèques (paquets node) en place, vous devez modifier votre package.json et webpack.config.js pour ajouter les changements de Babel. Ces changements incluront tous les paquets que vous avez installés auparavant. Tout d’abord, dans votre package.json, incluez le Preset Babel :

package.json
{
  ...
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  },
  ...
}

@babel/preset-env est un préréglage intelligent qui vous permet d’utiliser le dernier JavaScript sans avoir à microgérer les transformations syntaxiques (et éventuellement les polyfills de navigateur) nécessaires à votre ou vos environnements cibles. Cela vous facilite la vie et réduit la taille des paquets JavaScript !

Configuration de webpack 5 avec BABEL

Votre fichier webpack.config.js doit également inclure Babel dans son processus de compilation. Pour cela, utilisez le Webpack Loader pour Babel précédemment installé. Vous devez indiquer à Webpack sur quels fichiers utiliser le chargeur (par exemple, les fichiers .js) et, éventuellement, quels dossiers exclure du processus, par exemple, node_modules :

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

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

Vous pouvez relancer votre application. Rien ne devrait avoir changé, si ce n’est que vous pouvez désormais utiliser les prochaines fonctionnalités ECMAScript pour JavaScript. Une étape optionnelle serait d’extraire votre configuration Babel dans un fichier de configuration .babelrc séparé. Vous pouvez créer ce fichier dans le répertoire racine de votre projet en ligne de commande :

touch .babelrc

Ensuite, ajoutez la configuration pour Babel que vous avez précédemment ajoutée dans votre package.json dans le fichier .babelrc. N’oubliez pas de supprimer la configuration dans le fichier package.json par la suite. Elle ne doit être configurée qu’une seule fois.

.babelrc
{
  "presets": [
    "@babel/preset-env"
  ]
}

Babel vous permet d’utiliser les futures fonctionnalités JavaScript dans votre navigateur, car il les transpose en JavaScript classique. Essayez-le vous-même en installant votre premier plugin. Assurez-vous de voir que la fonctionnalité JavaScript ne fonctionne pas au début dans votre fichier src/index.js, mais une fois que vous avez installé le plugin pour la fonctionnalité et l’avez intégré dans votre fichier .babelrc, il devrait être possible d’exécuter le code source JavaScript.

Ressources

Pensez à installer les dépendances en saisissant la commande npm install à la racine du projet

Nouveau Tutoriel

Newsletter

Ne manquez jamais les nouveaux conseils, tutoriels et autres.

Pas de spam, jamais. Nous ne partagerons jamais votre adresse électronique et vous pouvez vous désabonner à tout moment.