Integrando Babel y Webpack para la compatibilidad de navegadores

Hemos visto previamente que Babel permite crear código JavaScript compatible con múltiples navegadores y que webpack es un empaquetador de módulos JavaScript. Aprovecharemos las ventajas de estas herramientas para crear un flujo de trabajo sencillo para la creación de aplicaciones web.

Loaders en webpack

En webpack, un loader es un tipo de módulo que permite a webpack procesar archivos como imágenes, estilos CSS, archivos JSON, y también código JavaScript que necesita ser transformado de alguna manera antes de ser incluido en el paquete final de la aplicación.

Para utilizar Babel con webpack, necesitamos configurar un loader específico llamado babel-loader. Este loader permite que webpack use Babel para transpilar nuestro código JavaScript.

Integrar Babel con webpack

Ahora que comprendemos las funciones básicas de Babel y Webpack, veamos cómo podemos integrarlos para mejorar nuestro flujo de trabajo de desarrollo.

1.- Inicializar el proyecto: Creamos un proyecto node vacío para nuestro proyecto:

npm init -y

2.- Instalar webpack: Instalamos los paquetes de webpack con npm:

npm install webpack webpack-cli webpack-dev-server --save-dev

3.- Instalar Babel: Instalamos las dependencias de Babel en nuestro proyecto:

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

4.- Configurar Webpack: Creamos un archivo llamado webpack.config.js en la raíz de nuestro proyecto. Aquí especificamos que babel-loader se encargue de cargar los archivos JavaScript y procesarlos con Babel:


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

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

Esta configuración dice a webpack que tome nuestro archivo src/index.js, lo compile usando Babel a través del babel-loader, y luego genere un archivo optimizado dist/bundle.js.

5.- Configuración de comandos: Finalmente, podemos configurar scripts en nuestro archivo package.json para ejecutar las tareas directamente:


"scripts": {
  "build": "webpack --mode=production",
  "watch": "webpack --watch",
  "start": "webpack serve --open --mode=development"
},

Con esto tenemos tres comandos disponibles para utilizar webpack con Babel incluido:


npm run build         # Compila los archivos para producción
npm run watch         # Compila para desarrollo / Detecta cambios y compila nuevamente
npm run start         # Inicia un servidor web / Detecta cambios y compila nuevamente

Ahora, podemos crear nuestros archivos JavaScript usando las últimas características de ES6 y levantar un servidor web de desarrollo con el siguiente comando:

npm run start

Conclusión

Al usar babel-loader con webpack, puedes aprovechar la potencia de Babel para transpilar tu código JavaScript y garantizar la compatibilidad con versiones anteriores de navegadores, todo dentro del flujo de trabajo de construcción de tu aplicación.