A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Babel Loader para JavaScript

6/28
Recursos

Aportes 49

Preguntas 34

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

馃挍 Babel Loader para JavaScript

<h4>Apuntes</h4>
  • 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 鈥渆xtensiones鈥 o plugins las cuales nos permiten tener caracter铆sticas m谩s all谩 del JavaScript com煤n

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.

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

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.

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 鈥渋ndent-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谩.
<h3>3. Loaders y Plugins en Webpack</h3> <h4>Babel Loader para JS</h4>

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鈥檚 project

  1. Create file .babelrc .

  2. Set the babel鈥檚 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'
                }
        }
    ]
}