¿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 Babelnpminstall @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.
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.jsmodule.exports={// ... otras configuracionesmodule:{rules:[{test:/\.m?js$/,// Archivos .mjs o .jsexclude:/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 buildnpm 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!
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 loadertest:/\.js$/,// Use es un arreglo u objeto donde dices que loader aplicarasuse:{loader:"babel-loader"},// Exclude permite omitir archivos o carpetas especificasexclude:/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
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.
GRacias por conmpartir 😀
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.
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.
Se exactamente a que te refieres, es algo que el debería mejorar, aun así me parece que sus clases son muy buenas
¿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
por que lo llaman transcompilador y no solo compilador? en la página de babel ellos mismos se definen como un compilador.
Buen aporte!
Yo al ver lo que babel hizo con main.js
JAJAJAJAJAJ
Hace año y medio empecé y no sabia ni CSS, hoy ya vamos en esto. JAJAJA
.
.
ponlo como fondo de pantalla, para loquear gente xd
algun consejo para avanzar despues de determinado punto me siento perdido y eso que estoy haciendo todo lo de la escuela de js
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.
Entiendo a Babel... cuando hace calor yo también transpilo.
Asi quedo el webpack config
const path =require('path')module.exports={mode:'production',// LE INDICO EL MODO EXPLICITAMENTEentry:'./src/index.js',// el punto de entrada de mi aplicaciónoutput:{// Esta es la salida de mi bundlepath: 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, etcfilename:'main.js',// EL NOMBRE DEL ARCHIVO FINAL,},resolve:{extensions:['.js']// LOS ARCHIVOS QUE WEBPACK VA A LEER},module:{// REGLAS PARA TRABAJAR CON WEBPACKrules:[{test:/\.m?js$/,// LEE LOS ARCHIVOS CON EXTENSION .JS,exclude:/node_modules/,// IGNORA LOS MODULOS DE LA CARPETAuse:{loader:'babel-loader'}}]}}
Gracias
Por tu comentario me di cuenta que escribí module.export en vez de module.exports y no te estaba tomando el babel loaader. Gracias
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.
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.*
Buen aporte!
Excelente aporte, clarifica punto a punto la configuración del objeto module
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"
Por si alguien se pregunta que extension usa para darle color a los espacios de linea, si no me equivoco es “indent-rainbow”
muchas gracias por tu aporte 🙏
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.
Si señor, ya van 6 clases y no he entendido nada de webpack 😢
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 😁
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í:
.
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:
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:
.
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:
.
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"
Muchas gracias por todas esta aclaraciones
excelente aporte
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
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.
/\.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).
Gracias!!!!
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
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
Excelente uso de los gist :)
Gracias por ese aporte de los gits 🖖
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
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
No entiendo bien para que sirven los 4 plugins que instalaste de babel
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.
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
concuerdo contigo
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á.
