Babel Loader para JavaScript

💛 Babel Loader para JavaScript

• 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

¿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

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

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'
                }
            }
        ]
    }
}

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"

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.*

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

1. Nombrar el archivo como webpack.config.babel.js
2. 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"
  },

1. 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

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

/\.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).

Yo al ver lo que babel hizo con main.js

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

.babelrc

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

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js', //Punto de entrada
    output: { // Hacia donde vamos a enviar lo que va a preparar webpack
        path: path.resolve(__dirname, 'dist'), // Nombre del directorio
        filename: 'main.js' // Nombre del archivo
    },
    resolve: {
        extensions: ['.js']
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    },
}

MY NOTES BABEL LOADER FOR JAVASCRIPT 😄

Babel nos ayudara a preparar nuestro código javascript para que sea compatible con todos los navegadores, para esto vamos a integrar babel a nuestro proyecto también a la configuración de webpack.

Para instalar babel en nuestro proyecto hacemos un comando de npm

npm install -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

//creamos un objeto donde vamos a anadir las configuraciones que acabamos de agregar
  //En este caso los preced y los plugins que va a trabajar babel
{

  "presets": [
    "@babel/preset-env"
  ],

  "plugins":[

    "@babel/plugin-transform-runtime"
  ]

}

Vamos a añadir esta configuración de babel a webpack para que lo podamos utilizar en el.

//modulo que tiene un objeto
  module:{
    //que tiene unas reglas pra establecer  un arreglo donde voy a tener
      //distintas configuraciones dependiendo de lo que le agregue a esas variables
    rules :[
    {
      test: /\.m?js$/,
      exclude: /node_modules/,
      use: {

        loader: 'babel-loader'
      }

    }
  ]
  },

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

Babel Loader para JavaScript

Para instalar Babel utilizamos el comando:

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

Ahora para configurar Babel, vamos a crear un archivo llamado .babelrc

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

Ahora en nuestro archivo de webpack.config.js tenemos que indicarle que va a trabajar con Babel. Lo hacemos de la siguiente forma:

		module: {
        rules: [
            {
                /* Indicamos la extención de los archivos que va 
                a estar compilando */
                test: /\.m?js$/,
                /* Recuerda excluir la carpeta node_modules */
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    }
}

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á.

Babel lo usamos para que JS moderno sea compatible entre todos los navegadores.

El archivo “.babelrc” no es visible para el usuario.

/\.m?js$/ es una expresión regular que indica; los archivos que terminen con mjs o js

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 a alguien más le sale este tipo de error lo que yo hice fue eliminar la carpeta dist yla carpeta modules . Luego volvi a instalar webpack and babel

Alt + 92 para poner barra invertida

1 hora, con el runtume 🙄

dejo esto por aqui por si no saben como hacerlo /\ solo copienlo

Explicacion del punto (.) al principio cuando creas un archivo

babel-loader: Este paquete permite transpilar archivos JavaScript usando Babel y webpack

babel-loader y @babel/core son auto-explicativos: se trata del loader de Webpack y Babel en sí.

@babel/preset-env : permite usar el último JavaScript sin necesidad de microgestionar qué transformaciones de sintaxis (y opcionalmente, polyfills del navegador) son necesarias para entorno de destino. (paquetes de JavaScript más pequeños)

@babel/plugin-transform-runtime: Nos sirve para poder trabajar con las cuestiones de async en JS.(permite la reutilización del código auxiliar inyectado de Babel para ahorrar en el tamaño del código.)

fuentes:
https://babeljs.io/docs/en/babel-core
https://webpack.js.org/loaders/babel-loader/
https://escuelavue.es/series/curso-webpack-4-practico-gratis/babel-webpack-config/

cuidao con los typos

Este es uno de esos cursos que no cansa repetirlos! y que cada vez que vengo me voy tres veces mas satisfecho!!

si es tu caso Animo… vas Bien! lo haces muy BIIIEN…

si estas respirando, Nunca pero NUNCA pares de aprender!

Significa que, podemos usar muchas funciones de JS, CSS o HTML que no funcionan en todos lo navegadores…

Y webpack lo configura para que mi App funcione sin problema en donde sea ?

Les dejo los comandos:

• yarn

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

• npm

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

Solo quiero dejar un pequeño aporte de pero que Bien explica el profe Oscar !

¡Recomendación!

Para entender mejor esta clase les recomiendo leer la documentación de Webpack con respecto a Babel-Loader para entender un poco más claro lo que se hace en esta clase.

Y de igual forma entender este tipo de documentación directo para futuros aprender a utilizarla por cuenta propia.

Esta clase es Densa ¡Paciencia!

Babel Loader para JavaScript

Babel allows the code we are programming in JS can be available in all browsers.

Installation

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

Specific setting to Babel’s project

1. Create file .babelrc .

2. Set the babel’s configuration to presets and plugins .

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

3. Add the last settings to webpack on webpack.config.js file.

   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'
           }
         }
       ]
     },
   }
   

   These are the rules to know how we are going to work with different kind of files or elements on the project.

   test: Is a Regular Expression to know what kind of extensions we going to use.

   exclude: block the files into the folder node_modules .

   use: Is an object that contains the loader we going to use babel-loader .

4. Run the command to build the project.

   npm run build
   

   This goes to optimize the project to run on every browser.

No vayan a instalar bobel 😂 advertidos!!!

estuve pegado en este curso como 2 semanas solo por el error que me daba cargar babel xd

decidí seguir adelante

He escuchado taaaanto de este Babel que mas vale que sea algo bueno

Tip: al día de hoy pueden instalar la extensión de babel js desde el editor VStudio, buscando en la parte de extensions (ctrl+shit+x).

Instalación de babel

Babel transpila el código moderno de JavaScript y lo hace compatible con todos los navegadores.

Genial este curso, aun no soy tan experto en js pero esto me motiva a seguir aprendiendo

6.-Babel Loader para JavaScript

.
Con babel vamos a preparar nuestro código JavaScript para que sea compatible a todos los navegadores.

Añadimos dependencias de babel para preparar el proyecto cuando este trabajando con JS.

npm install babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
// @babel/preset-env para trabajar con JS moderno.
// @babel/plugin-transform-runtime para poder trabajar con asincronismo.

Para comprobar que se instalaron podemos verificarlo en el package.json.

Ahora le pasamos una configuración específica al proyecto de babel.

Creamos un archivo llamado .babelrc (el . en SO unix es un archivo oculto, es usado para añadir configuraciones). Aquí vamos a crear un objeto donde vamos a añadir las configuraciones que acabamos de agregar.

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

Ahora agregamos esta configuración al webpack para que entienda que va a trabajar directamente con estos recursos.

test: Permite saber que extensiones vamos a usar usando expresiones regulares que nos dicen como trabajar con diferentes extensiones.

Una vez hecho esto probamos que esto funcione para compilar el proyecto. Podemos ver como ya no tiene la misma estructura, si no que se optimizo por medio de babel para que pueda funcionar en cualquier navegador. Crea los elementos necesarios para que si un elemento que estemos trabajando con JS moderno aún no es compatible con un navegador tenga la certeza de que si va a funcionar.

@babel/plugin-transform-runtime habilita el uso de async y await en nuestro codigo

babel.config.json < .babelrc < programmatic options from @babel/cli

In other words, babel.config.json is overwritten by .babelrc, and .babelrc is overwritten by programmatic options.

https://babeljs.io/docs/en/configuration#babelrcjson

Webpack + Babel config

También podemos omitir la dependencia de @babel/runtime agregando la propiedad node:current dentro de nuestro babelrc

{
  "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]]
}

Esto buscara dentro de la version de node que tengas instalada si esta tiene la funcionalidad de Async/Await

Se me esta haciendo un poco complejo de entender todo. 😭

Ahora ya se para que se usa Babel. Lo malo de esto es que ya casi todos los navegadores tienen el mismo estándar, y todos funcionan de la misma manera. Antes la oveja negra era IE, pero Dios lo tenga en su Santa Gloria

¡Gracias Oscar! Con este curso he podido resolver una migración que estoy haciendo en mi trabajo actual.

Con babel podemos preparar nuestro codigo JS sea compatible con todos los navegadores. Para esto vamos a integrarlo a nuestro proyecto y a la configuracion y poder sacarle provecho al proyecto, primero instalaremos BABEL con

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

Ya con esto ya queda instalado, para comprobarlo podemos ver el archivo de package.json y ver las dependencias de tipo desarrollador.

Ahora tenemos que pasar una configuracion especifica a nuestro proyecto de babel, creando un archivo que es “.babelrc”

Dentro de esta carpeta necesitamos agregar las configuraciones dentro de un objeto donde pondremos dentro de otro arreglo las cosas:

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

Ahora tenemos que pasar la configuracion al webpack donde agregaremos el module que sera donde agregamos nuestra configuracion, donde agregaremos los rules o reglas, esto lo hacemos con un arreglo con un objeto dentro, que es donde agregaremos el babel loader para conectar webpack con babel.

Tendremos que realizar un test para saber que tipos de extensiones vamos a utilizar, esto lo haremos con expresiones regulares

La extension .mjs es la de modulos. Ya que tenemos esta parte procedemos a excluir para que no use los modulos que son de otras cosas, esto con exclude.

Tambien podemos decirle internamente pasarle el loader que vamos a utilizar con un use y loader.

Recordemosq ue esto es una RULE asi que tenemos que agregarlo a una.

Esto lo hacemos con:

module: {
        rules:[
        {
            test: /\.m?js$/, //UTILIZA CUALQUIER EXTENSION QUE SEA MJS O JS
            exclude: /node_modules/,
            use: {
                    loader: 'babel-loader'
                }
        }
    ]
}