Integración de Babel y Webpack para compatibilidad JavaScript

Resumen

¿Cómo integrar Babel en un proyecto de JavaScript?

Mejorar la compatibilidad de tu código JavaScript con todos los navegadores puede ser una tarea compleja. Sin embargo, Babel es una herramienta que puede simplificar este proceso. Babel se utiliza para transformar el código JavaScript en una versión más compatible con los entornos actuales, asegurando que funcione correctamente en cualquier navegador. Aquí te guiaré a través del proceso de configuración de Babel en tu proyecto, junto con la integración en Webpack.

¿Cuáles son las dependencias necesarias para Babel?

Para comenzar con Babel, es esencial instalar ciertas dependencias que prepararán tu código JavaScript. Aquí hay una lista de comandos para instalar estas dependencias a través de npm:

# Instalar dependencias de Babel
npm install @babel/core @babel/preset-env @babel/plugin-transform-runtime babel-loader --save-dev

@babel/core: El núcleo de Babel.
@babel/preset-env: Ayuda a trabajar con JavaScript moderno.
@babel/plugin-transform-runtime: Facilita el manejo de asincronismos.
babel-loader: Permite a Webpack procesar archivos JavaScript a través de Babel.

¿Cómo configurar Babel en el proyecto?

Una vez que instalamos las dependencias, necesitamos un archivo de configuración para Babel, comúnmente conocido como .babelrc. Este archivo describe cómo Babel debe transformar el código JavaScript.

// Archivo .babelrc
{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

En este archivo, especificamos los presets y plugins mencionados previamente. El uso de un punto al inicio del archivo lo hace oculto en sistemas operativos Unix, así que podría no ser visible a simple vista.

¿Cómo integrar Babel con Webpack?

Ahora que Babel está preparado, debemos asegurarnos de que Webpack pueda utilizarlo para procesar nuestro JavaScript. Necesitamos modificar la configuración de Webpack para que incluya nuestro módulo Babel.

// Configuración de webpack.config.js
module.exports = {
  // ... otras configuraciones
  module: {
    rules: [
      {
        test: /\.m?js$/, // Archivos .mjs o .js
        exclude: /node_modules/, 
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
}

test: Define que Webpack debe utilizar Babel para archivos con extensiones .js o .mjs.
exclude: Evita que los módulos dentro de node_modules sean procesados por Babel.
use: Especifica que babel-loader se utilizará para el proceso de transformación.

¿Cómo verificar que la configuración funciona?

Tras configurar Babel y Webpack, es crucial verificar que todo funcione correctamente. Puedes hacer esto compilando tu proyecto con el siguiente comando de npm:

# Ejecutar build
npm run build

Esto ejecuta el proceso de build en modo producción. Verifica el archivo de salida compilado para confirmar que el código JavaScript ha sido transformado correctamente, asegurando la compatibilidad con cualquier navegador.

¿Por qué es importante esta configuración?

La configuración adecuada de Babel y Webpack permite que el JavaScript moderno, que quizás no sea compatible directamente con ciertos navegadores, sea transformado a un formato que sí lo es. Esto logra que tu aplicación funcione sin problemas en una amplia variedad de dispositivos y versiones de navegadores, garantizando una experiencia de usuario más consistente.

Este proceso no solo facilita el trabajo con JavaScript moderno, sino que también optimiza tu código para producción. ¡Anímate a seguir explorando y mejorando la eficiencia de tus proyectos con Babel y otras herramientas modernas del ecosistema de JavaScript!

Fernando Quinteros Gutierrez

student•

💛 Babel Loader para JavaScript

Apuntes

Babel te permite hacer que tu código JavaScript sea compatible con todos los navegadores
Debes agregar a tu proyecto las siguientes dependencias

NPM

npm install -D babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime

Yarn

yarn add -D babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime

babel-loader nos permite usar babel con webpack
@babel/core es babel en general
@babel/preset-env trae y te permite usar las ultimas características de JavaScript
@babel/plugin-transform-runtime te permite trabajar con todo el tema de asincronismo como ser async y await
Debes crear el archivo de configuración de babel el cual tiene como nombre .babelrc

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

Para comenzar a utilizar webpack debemos agregar la siguiente configuración en webpack.config.js

{
...,
module: {
    rules: [
      {
        // Test declara que extensión de archivos aplicara el loader
        test: /\.js$/,
        // Use es un arreglo u objeto donde dices que loader aplicaras
        use: {
          loader: "babel-loader"
        },
        // Exclude permite omitir archivos o carpetas especificas
        exclude: /node_modules/
      }
    ]
  }
}

RESUMEN: Babel te ayuda a transpilar el código JavaScript, a un resultado el cual todos los navegadores lo puedan entender y ejecutar. Trae "extensiones" o plugins las cuales nos permiten tener características más allá del JavaScript común

Enrique Mendez Roger

student•

Advertencia por si a alguien mas le sucede.

En este ejemplo el amigo Fernando Quinteros pone la opcion de Dependencia de Desarrollo "-D" justo despues de "install", eso a mi me dio un error, si le sucede lo mismo ponga esto al final de la sentencia justo como lo hizo el profesor.

Saludos. Nunca pares de aprender.

Leobardo Adrian Diaz Ruiz

student•

GRacias por conmpartir 😀

Carmen Santiago

student•

un comentario, sin ánimo de hate. Hablando directamente con el profesor.

tus vídeos se me hacen pesados y no por la densidad o complejidad de la clase, sino, por qué te esfuerzas por añadir palabras o incluso frases que no aportan valor o están algo fuera de contexto.

Para alguien que le toma importancia a cada detalle mencionado, algunas de las cosas que mencionas solo son relleno.

Andres Gallego

student•

No siento que sea así antonio, en lo que va del curso lo veo muy bien, no veo palabras de relleno ni nada que no sea de gran aporte.

Alexis Steven Valderrama

student•

Se exactamente a que te refieres, es algo que el debería mejorar, aun así me parece que sus clases son muy buenas

Rony Porraz Vargas

student•

¿Qué Rayos es Babel? Es un transcompilador de JavaScript que agarra el código ECMAScript 2015 en adelante y lo transforma en una versión que todos los navegadores anteriores lo puedan usar En la pagina de Babel pueden ingresar código moderno se lo transpira a código viejo en tiempo real

Juan Otavalo

student•

por que lo llaman transcompilador y no solo compilador? en la página de babel ellos mismos se definen como un compilador.

Kevin Acuña Quirós

student•

Buen aporte!

Ricardo Rito Anguiano

student•

Yo al ver lo que babel hizo con main.js

Mateo Calderaro

student•

JAJAJAJAJAJ

Sebastian Heredia

student•

Hace año y medio empecé y no sabia ni CSS, hoy ya vamos en esto. JAJAJA . .

César Palma

student•

ponlo como fondo de pantalla, para loquear gente xd

JOSE FABIAN BONILLA GUZMAN

student•

algun consejo para avanzar despues de determinado punto me siento perdido y eso que estoy haciendo todo lo de la escuela de js

Carmen Santiago

student•

observación: al min 8:10 de hace un mal uso de la palabra compilar. Lo que realmente se está haciendo es una transpilación. Babel transpila el código, no lo compila.

Matías Ballestrero

student•

Entiendo a Babel... cuando hace calor yo también transpilo.

Rony Porraz Vargas

student•

Asi quedo el webpack config

const path = require('path')

module.exports = {
    mode: 'production', // LE INDICO EL MODO EXPLICITAMENTE
    entry: './src/index.js', // el punto de entrada de mi aplicación
    output: { // Esta es la salida de mi bundle
        path: path.resolve(__dirname, 'public_html/js'),
        // resolve lo que hace es darnos la ruta absoluta de el S.O hasta nuestro archivo
        // para no tener conflictos entre Linux, Windows, etc
        filename: 'main.js', 
        // EL NOMBRE DEL ARCHIVO FINAL,
    },
    resolve: {
        extensions: ['.js'] // LOS ARCHIVOS QUE WEBPACK VA A LEER
    },
    module: {
        // REGLAS PARA TRABAJAR CON WEBPACK
        rules : [
            {
                test: /\.m?js$/, // LEE LOS ARCHIVOS CON EXTENSION .JS,
                exclude: /node_modules/, // IGNORA LOS MODULOS DE LA CARPETA
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    }
}

Alonso Fabricio Samanez Nuñez

student•

Gracias

Johann Sebastian Pérez E

student•

Por tu comentario me di cuenta que escribí module.export en vez de module.exports y no te estaba tomando el babel loaader. Gracias

Joseph Manuel Salen Pantoja

student•

BABEL LOADER PARA JAVASCRIPT

Babel es una herramienta que nos permite transformar nuestro código JS de última generación (o con funcionalidades extras) a JS que cualquier navegador o versión de Node.js entienda.

En Webpack, contamos con loaders para preprocesar los archivos y convertirlos en módulos validos que pueden ser consumidos por la aplicación.

Para iniciar debemos instalar las dependencias necesarias, mediante el comando npm install babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime -D. Esto nos instalará la dependencia completa para Babel. 🔗 GitHub babel-loader. @babel/plugin-transform-runtime nos permite trabajar con asincronismo.

Lo siguiente es crear un archivo oculto en la raíz de nuestro directorio al cual le llamaremos .babelrc, este archivo presentado de la siguiente manera:

// Configuración base de babel
{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/plugin-transform-runtime"
    ]
}

Lo que sigue es añadir la configuración a nuestro Webpack.

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  resolve: {
    extensions: [".js"],
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
};

Elementos nuevos añadidos:

module: Es el sitio donde vamos a añadir la nueva configuración de babel.
rules: Las reglas que se establecerán dentro del proyecto.
test: qué tipo de extensiones vamos a trabajar, o cuáles archivos vamos a transformar. Para ello utilizaremos regEx.
exclude: Necesitamos excluir archivos para evitar dañar nuestro proyecto, especificamente archivos de /node_modules/
use: Aquí vamos a definir qué loader vamos a utilizar para la transformación.

Básicamente Webpack leerá toda la instrucción de la siguiente manera: "Cuando encuentres un import o un require con extensión .mjs o .js, usa babel-loader para transformarlo antes de empaquetarlo.*

Miguel Aguilar

student•

Buen aporte!

Rodrigo Ramos Xochiteotzin

student•

Excelente aporte, clarifica punto a punto la configuración del objeto module

Juan Carlos Valencia López

student•

Para darle npm run build hay que añadir esta linea de código dentro de scripts en nuestro archivo package.json

"build": "webpack --mode production"

Michael Juarez

student•

Por si alguien se pregunta que extension usa para darle color a los espacios de linea, si no me equivoco es “indent-rainbow”

Jose Ever Muñoz Muñoz

student•

muchas gracias por tu aporte 🙏

Gonzalo Espindola

student•

Basicamente instalamos babel y babel core sin tener ni idea de lo que es, tengo una relacion amor odio con oscar. Siento que seria un excelente profesor para personas con conocimientos de las bases, pero mal profesor para ponerlo siempre en los cursos de las bases.

Ameth Ordoñez Erazo

student•

Si señor, ya van 6 clases y no he entendido nada de webpack 😢

Yuliam Rivera González

student•

es exactamente lo que me pasa con Oscar, al principio no le entendía nada, pero ahora que tengo algunas bases siento que es uno de los mejores profesores explicando 😁

Miguel Hernández Casiano

student•

Tus posibles dudas resueltas

1. ¿Babel loader o babel plugin?

Quizás no lo notaste, pero al principio habla de loaders y luego ya está diciendo que vamos a instalar plugins

Primero que nada, debes saber que hay que diferenciar entre los plugins de webpack y los plugins de babel. En este caso, cuando estamos instalando babel, estamos instalando plugins que ayudarán a Babel.

Entonces, sí, lo que "instalamos" para webpack, realmente es un Loader de babel.

2. ¿Por qué usamos loaders?

Porque Webpack solamente entiende archivos js y jsx. Para que podamos manipular màs archivos como por ejemplo CSS o JSX de react, será necesario utilizar loaders para cada tipo de archivo. Entonces sí, un loader otorga la posibilidad a webpack de utilizar más tipos de archivos. Por eso al instalar

3. ¿Por qué descargamos esas dependencias de Babel?

Porque lo mìnimo requerido para configurar babel es:

@babel-core
@babel/preset-env
Un "ejecutador" de Babel (@babel/cli, babel-loader, @rollup/plugin-babel, etc) Ver más info aquí: https://babeljs.io/docs/en/roadmap#move-babelpreset-env-into-babelcore .

4. ¿Por qué esa configuración en el archivo .babelrc?

Porque se está utilizando formato JSON. El archivo bien podría renombrarse a babel.config.json. . Es forzoso, si estamos usando formato json, configurarlo así:

{
  "presets": [...],
  "plugins": [...]
}

En la documentación puedes ver qué otros presets y plugins existen para Babel: https://babeljs.io/docs

5. ¿Por qué en module se pone un objeto y no un arreglo?

Porque module es un atributo màs de module.exports. Y recuerda, que de JavaScript, cada atributo dentro de un objeto puede tener cualquier tipo de dato. Por eso entry, output y resolve tienen diferentes tipos de datos. . El tipo de dato que recibe cada propiedad lopuedes ver en la documentación. En el caso de module, webpack definió que su valor es un objeto (Sí, el profesor se equivocó al inicio, cuando puso un arreglo en lugar de un objeto). Eso se puede ver en la documentación: https://webpack.js.org/concepts/loaders/ . Dentro de dicho objeto encontraremos la propiedad "rules". Esta propiedad rules SÍ tiene como valor un arreglo y cada uno de los elementos de este arreglo será un objeto con al menos las siguiente propiedades: testy use. Ve el siguiente ejemplo:

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' },
    ],
  },
};

. De manera general, puedes asumir que habrá tantos objetos (elementos de arreglo) como loaders tengamos.

Lo de "test" y "use" es como decirle a Webpack: "Hey, cuando encuentres un archivo que se resuelva en un .mjs o js (recuerda que usamos las expresiones regulares), usa el babel-loader para transformarlo antes de empaquetarlo"

César Augusto Cortés Labrada

student•

Muchas gracias por todas esta aclaraciones

Jose Ever Muñoz Muñoz

student•

excelente aporte

lucas cartisano

student•

Explica que es babel, explica como lo configuró el, pero no enseña a usarlo, ++no enseña a usarlo++. Si tengo que usarlo por mi cuenta en un proyecto propio no se que hacer. Esto no es un curso, es mas bien una receta específica para un caso de uso

Carlos Andres Bohorquez Duran

student•

Es lo que he visto en casi todas las clases con Oscar, he puesto varios comentarios al respecto ojala y puedan mejorar estas clases y ser mas explicativas y no el desarrollo de un ejercicio puntual y a la medida.

Giancarlo Ramirez Reyes

student•

/\.m?js$/

Lo que la expresión regular significa: Obtener todos los archivos .mjs o .js del proyecto.

Los archivos .mjs son archivos de módulos de Javascript (ECMAScript JavaScript Module).

Erick Gaitan

student•

Gracias!!!!

Emmanuel Rodríguez

student•

Webpack en formato ES6 Para aquellos que desean tener su webpack con formato de ES6+ deberán seguir los siguentes pasos:

Nombrar el archivo como webpack.config.babel.js
Instalar la depenedicias como se comentarion en el video pero procurando instalar @babel/register

  "devDependencies": {
    "@babel/cli": "^7.13.0",
    "@babel/core": "^7.13.8",
    "@babel/plugin-transform-runtime": "^7.13.8",
    "@babel/preset-env": "^7.13.8",
    "@babel/register": "^7.13.8",
    "babel-loader": "^8.2.2",
    "webpack": "^5.24.2",
    "webpack-cli": "^4.5.0"
  },

Estructurar su archivo con ES6

import { resolve } from "path";

export default () => {
  return {
    entry: "./src/index",
    output: {
      path: resolve(__dirname, "dist"),
      filename: "bondle.js",
    },
    resolve: {
      extensions: [".js"],
    },
    module: {
      rules: [
        {
          test: /\.js?$/,
          loader: "babel-loader",
          exclude: /node_modules/,
        },
      ],
    },
  };
};

Si hay conflicto con algunos de los pasos, pueden escribir un comentario para que les ayude donde, adicionalmente, les comparto el gist de los archivos. Cabe mencionar que para el correcto funcionamiento, deberán tener configuradas sus dependencias de babel con una versión 7, como mínimo

Eddy Arellanes

student•

Excelente uso de los gist :)

Oscar Barajas Tavares

Team Platzi•

Gracias por ese aporte de los gits 🖖

JeanCarlos Atoche Pascual

student•

Que es exactamente un loader? esta seccion del curso lleva como tema loader y plugins, se hace uso de babel-loader pero no espsifica que es un loader o cual es su funcion exacatemnte y no logro encontrar alguna documentacion que se sque de duda, podrian orientarme un poco

Héctor Eduardo López Carballo

student•

Los loaders perminten preprocesar archivos. Esto te permite empaquetar cualquier recurso estático más allá de JavaScript. Son los que permiten importar archivos de CSS dentro de tu JS, por ejemplo. Acá te dejo un link a la documentación

Abelardo Salazar

student•

Lo explica en la segunda clase del curso.

Juan Jose Hernandez Garcia

student•

Hola, que tal? Aqui dejo un repositorio de Github donde se muestran los loaders y plugins que se pueden utilizar en webpack, y algo de documentacion mas ;) https://github.com/webpack-contrib/awesome-webpack#loaders

Platzi Team

student•

Excelente aporte compañero 🔥

Hernán Arica

student•

No entiendo bien para que sirven los 4 plugins que instalaste de babel

Héctor Eduardo López Carballo

student•

Hola!

Son loaders y funcionan para que webpack pueda hacer la conversión que hace babel de forma automática. Tendrías que meterte más a la documentación de babel para entender específicamente lo que hacen. Sin embargo, te puedo decir que la funcionalidad de babel es habilitar la sintaxis de JS actual a un códgio viejo para que cualquier navegador pueda usarlo sin problemas de compatibilidad.

Cecilio Cauich

student•

Esta es de las clases donde solo el profe se pone a hablar y hacer cosas sin explicar qué es y qué hace, lo hace de manera muy superficial. Esto me sirvió a mi para entender un poco mejor: Introducción a Webpack Transpilado de Javascript con Webpack y Babel HTML Webpack Plugin: Inyectar bundles en el HTML

Jose Ever Muñoz Muñoz

student•

concuerdo contigo

David Campos

student•

Babel sirve para transformar código JavaScript moderno en código que cualquier navegador pueda ejecutar.

Para trabajar con el y con Webpack se deben añadir las siguientes dependencias al proyecto:

babel-loader: Loader para que Webpack lo entienda
@babel/core: El núcleo de la librería
@babel/preset-env: Preset para JS moderno
@babel/plugin-transform-runtime: Trabajar con asíncronismo

El archivo .babelrc es el archivo de configuración de Babel, se crea en la raíz del proyecto. Aquí se definen los presets y los plugins con los que Babel va a trabajar:

Ahora hay que indicarle a Webpack que trabaje con Babel, para esto se utiliza el babel-loader que instalamos.

Para esto se crea un nuevo módulo en el archivo de configuración de Webpack, dentro la propiedad rules que es un arreglo, dentro del arreglo un objeto y dentro de este las siguiente propiedades:

Test: Se usan RegEx para indicar que archivos va a procesar
Exclude: Indica que archivos no va a procesar. Siempre incluir node_modules
Use: Un objeto con la propiedad loader que indica el loader que se usará.