Consulta nuestro curso de vídeo de Babel 7 y Webpack 4:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD
Lleva tu habilidad con JavaScript al siguiente nivel:
https://www.udemy.com/course/javascript-boost/?referralCode=06AF8499F008CC241201
Babel es una cadena de herramientas que se utiliza principalmente para convertir el código ECMAScript 2015+ en una versión de JavaScript compatible con versiones anteriores en navegadores o entornos actuales y antiguos. ECMAScript 2015+ equivale a ES6+.
Puedes pensar en Babel como un traductor. ES6+ JS nos ofrece muchas nuevas características y sintaxis. Pueden mejorar tremendamente nuestra eficiencia de desarrollo. Pero en este momento, la mayoría de estas nuevas características son irreconocibles en los navegadores. Para encontrar un equilibrio entre la compatibilidad y la conveniencia y eficiencia del desarrollo, se desarrolló Babel.
Los programadores escribimos códigos en ES6+ y luego pedimos a Babel que los traduzca a códigos que los navegadores puedan entender.
Babel por sí mismo sólo puede manejar la traducción de las nuevas sintaxis. ES6+ también ha añadido muchas nuevas APIs como Promise, Map, Object.assign(), etc. Nueva API significa nuevos objetos, propiedades y métodos. API es sólo un nombre elegante. No te dejes intimidar por él. Para lidiar con ellos, tenemos que añadir estas APIs en ES5. Este trabajo lo realiza un asistente de Babel. Te mostraremos quién es este asistente más adelante.
Así que recuerda esta conclusión: Babel traduce las nuevas sintaxis y su asistente se encarga de las nuevas APIs.
Primero ve a la web oficial de Babel y pulsa el botón Docs.
Babel se encarga de la traducción de la sintaxis. Polyfill se encarga de las características que faltan. Así que la respuesta a la pregunta que dejamos antes: el asistente de Babel es polyfill.
Además de traducir ES6+, Babel también puede manejar JSX y TypeScript. Así que aquí viene otro concepto: preset. Preset es la traducción que utiliza Babel. Controla cómo Babel hace la traducción.
Así que ahora, has aprendido dos conceptos importantes de Babel: preset y polyfill.
A continuación, vamos a instalar Babel.
Instalación y configuración de Babel:
Este es el comando de instalación sugerido por el manual oficial de Babel. Si te fijas bien, verás que en realidad se instalan cuatro paquetes, tres como dependencia de desarrollo y uno como dependencia de producción.
- npm install – save-dev @babel/core
- npm install @babel/cli
- npm install @babel/preset-env
- npm install – save @babel/polyfill
Babel/core, tal y como su nombre ha sugerido, es el núcleo de todo el programa Babel.
Babel/cli es la interfaz de línea de comandos. La utilizamos para comunicarnos con babel.
Babel por sí mismo no sabe cómo traducir los códigos ES6. Requiere de plugins que le digan cómo hacerlo. Hay muchos plugins. Instalarlos y configurarlos uno por uno es un trabajo intensivo. Por lo tanto, la mejor solución es utilizar babel preset. Preset es una colección de plugins. El preset que utilizamos es preset-env.
Babel/preset-env es el estándar que utiliza Babel 7 para traducir ES6+ a ES5. En Babel 7, preset-env ha sustituido a preset-2015/6/7, etc.
Babel/polyfill es para añadir características de ES6+ en ES5. Entonces, ¿por qué necesitamos hacer eso?
La nueva sintaxis no es la única diferencia entre ES6 y ES5. ES6 ya ha recibido muchas nuevas APIs. API es sólo un nombre elegante para los objetos incorporados. Estos nuevos objetos incorporados son muy útiles pero el problema es que no existen en el entorno ES5.
La única solución es añadir estos objetos incorporados al entorno ES5. Para eso está el polyfill.
Encendamos nuestro propio terminal y configuramos un proyecto.
Primero, encendemos el terminal y creamos un directorio raíz del proyecto. Luego entramos en él y hacemos npm init.
A continuación, copiamos los cuatro comandos de instalación del manual oficial de Babel y los pegamos en la terminal.
Cuando termine la instalación, deberías ver estos cuatro paquetes siendo instalados:
Abramos nuestro proyecto en VSC y comprobamos el paquete.json.
Cli, core, y preset-env son dependencias de desarrollo. polyfill es una dependencia de producción.
Puedes pensar en polyfill como un código fuente. Almacena las fuentes de todas las nuevas características de es6.
ES5 + polyfill = ES6.
Antes de poder usar Babel, necesitamos configurarlo. La mejor manera de hacerlo es crear un archivo para almacenar la información de configuración de Babel.
En Babel 6, almacenamos la información de configuración en .babelrc o package.json.
Babel 7 nos ofrece una nueva solución: babel.config.js.
El manual de Babel nos ofrece una plantilla para crear babel.config.js. Sólo tenemos que copiarla en la carpeta raíz de nuestro proyecto.
Primero, el módulo exporta un objeto.
Entonces definimos una propiedad presets en él. El valor de presets es un array.
Dentro del array, ponemos otro array.
El primer elemento del array hijo es el preset que queremos utilizar. Aquí, lo establecemos como @babel/env o @babel/preset-env.
El segundo elemento es un objeto config. Dentro de él, hay dos propiedades: targets y useBuiltIns. Targets es para configurar los navegadores y useBuiltIns para los polyfills.
Ahora, hemos instalado y configurado Babel.
A continuación, vamos a probarlo.
En el directorio raíz del proyecto, creamos un nuevo archivo: es6.js.
A continuación, encendemos el terminal e introducimos un comando babel: npx babel es6.js. Esto es lo que obtendremos:
El let de ES6 se ha convertido en var de ES5.
NPX babel es lo mismo que node_modules/.bin/babel
Ahora, hemos «babelizado» con éxito nuestro primer archivo ES6.
Es posible que quieras sacar el archivo traducido como un archivo independiente. En este caso, necesitas -o o – output-dir.
-o y – output-file sólo pueden traducir un archivo a la vez. En su desarrollo de la vida real, es posible que desee almacenar los archivos ES6 en un directorio y traducir cada archivo en ese directorio.
Por ejemplo, en el directorio raíz del proyecto, creamos dos directorios hijos: ES6 y ES5. Escribimos nuestros archivos ES6 en el dir ES6. Luego los «Babel» en dir ES5. Los archivos HTML enlazan los archivos JS del dir es5.
En este caso, el comando que necesitamos es npx babel ES6 -d ES5 o npx babel ES6 – out-dir ES5.
Ahora, todos los ficheros del dir ES6 serán «babelizados» en el dir ES5.
A continuación, vamos a mostrar lo que polyfill puede hacer por nosotros.
Este es el archivo que queremos babelizar:
Usa un montón de APIs de ES6 que no existen en ES5. La única manera de permitir que funcionen en un entorno ES5 es añadir los códigos fuente de estas nuevas APIs en el entorno ES5. Para eso está polyfill y por eso también se instala polyfill como dependencia de producción. Lo necesitamos en producción.
Aquí tienes una analogía menos precisa para ayudarte a entender por qué necesitamos polyfill.
Tengamos un programa jQuery. No podemos ejecutar nuestro programa jQuery directamente. Necesitamos enlazar el código fuente de jQuery primero. Polyfill es el código fuente de jQuery que enlazamos.
Este es el archivo ES5 «etiquetado» que tenemos:
¿Ves todos esos archivos necesarios? Son cargados por polyfill. Pero el archivo «babeled» no puede ser utilizado por los archivos HTML directamente. Necesitamos empaquetarlos usando webpack. Pero todos los «códigos fuente de la API» necesarios han sido cargados.
Esta configuración está controlada por la propiedad useBuiltIns en babel.config.js. Esta propiedad tiene tres valores: usage, false y entry.
Usage es el mejor valor y el más utilizado. También es el que recomendamos.
Aparte de use, useBuiltIns tiene otros dos valores: false y entry.
False cerrará el polyfill. Esto significa que usted tiene que enlazar las APIs necesarias manualmente. Definitivamente no quieres hacer eso.
Si usas entry, necesitas «requerir» @babel/polyfillEntry al principio de su archivo. Entonces babel comprobará primero la propiedad targets para averiguar cuáles son los navegadores de destino. Cargará todas las APIs que no sean soportadas por el navegador de destino. Obviamente, obtendremos un montón de APIs innecesarias de esta manera.
Así que en resumen, establece useBuiltIns a usage y Babel se encargará del resto por ti.
Consulta nuestro curso COMPLETO de Babel 7 y Webpack 4 en Udemy:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=MDM_BABEL_P
Consulta nuestro curso completo de desarrollo web en Udemy:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD