Babel és un transpilador de JavaScript que permet utilitzar les últimes característiques del llenguatge, independentment de si el navegador les suporta o no. En aquest tema, aprendrem com integrar Babel amb Webpack per assegurar-nos que el nostre codi JavaScript sigui compatible amb una àmplia gamma de navegadors.

• Entendre què és Babel i per què és útil.
• Aprendre a configurar Babel amb Webpack.
• Veure exemples pràctics de com utilitzar Babel en un projecte Webpack.

Babel és una eina que permet convertir codi JavaScript d'última generació en una versió compatible amb navegadors més antics. Això és especialment útil quan es vol utilitzar característiques modernes d'ECMAScript (com ara les classes, les funcions de fletxa, etc.) sense preocupar-se per la compatibilitat del navegador.

1. Instal·lació de Babel i els seus paquets necessaris:

   Primer, hem d'instal·lar Babel i alguns paquets essencials utilitzant npm o yarn.

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

2. Creació del fitxer de configuració de Babel:

   A la carpeta arrel del projecte, crea un fitxer anomenat .babelrc i afegeix la següent configuració:

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

   Aquesta configuració utilitza el preset @babel/preset-env, que és un conjunt de plugins que permeten utilitzar les últimes característiques d'ECMAScript.

3. Configuració de Webpack per utilitzar Babel:

   Modifica el fitxer de configuració de Webpack (webpack.config.js) per incloure el loader de Babel.

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

   En aquesta configuració, estem dient a Webpack que utilitzi babel-loader per a tots els fitxers .js, excepte els que es troben a la carpeta node_modules.

Suposem que tenim el següent codi JavaScript modern a src/index.js:

Després de configurar Babel i Webpack com s'ha descrit anteriorment, podem executar Webpack per transpil·lar aquest codi a una versió compatible amb navegadors més antics.

El resultat serà un fitxer bundle.js a la carpeta dist que contindrà el codi transpil·lat.

1. Configura un projecte Webpack des de zero i integra Babel.
2. Escriu codi JavaScript modern que utilitzi característiques com les classes i les funcions de fletxa.
3. Transpil·la el codi utilitzant Webpack i Babel.

Solució

1. Instal·lació de dependències:

   npm init -y
   npm install --save-dev webpack webpack-cli @babel/core @babel/preset-env babel-loader
   

2. Configuració de Babel (.babelrc):

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

3. Configuració de Webpack (webpack.config.js):

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

4. Codi JavaScript modern (src/index.js):

   class Person {
     constructor(name) {
       this.name = name;
     }
   
     greet() {
       console.log(`Hello, my name is ${this.name}`);
     }
   }
   
   const john = new Person('John');
   john.greet();
   

5. Executar Webpack:

   npx webpack
   

Integrar Babel amb Webpack és un pas essencial per assegurar que el nostre codi JavaScript sigui compatible amb una àmplia gamma de navegadors. Amb Babel, podem utilitzar les últimes característiques del llenguatge sense preocupar-nos per la compatibilitat. En el següent tema, explorarem com integrar Webpack amb TypeScript per afegir tipat estàtic al nostre projecte.