BabelJS - Descripción general
BabelJSes un transpilador de JavaScript que transpila nuevas funciones al estándar antiguo. Con esto, las funciones se pueden ejecutar en navegadores nuevos y antiguos, sin problemas. Un desarrollador australiano, Sebastian McKenzie, fundó BabelJS.
¿Por qué BabelJS?
JavaScript es el idioma que entiende el navegador. Usamos diferentes navegadores para ejecutar nuestras aplicaciones: Chrome, Firefox, Internet Explorer, Microsoft Edge, Opera, navegador UC, etc. ECMA Script es la especificación del lenguaje JavaScript; ECMA Script 2015 ES6 es la versión estable que funciona bien en todos los navegadores nuevos y antiguos.
Después de ES5, hemos tenido ES6, ES7 y ES8. ES6 lanzado con muchas características nuevas que no son totalmente compatibles con todos los navegadores. Lo mismo se aplica a ES7, ES8 y ESNext (próxima versión de ECMA Script). Ahora no está claro cuándo será posible que todos los navegadores sean compatibles con todas las versiones de ES que se lanzaron.
En caso de que planeemos usar las funciones de ES6 o ES7 o ES8 para escribir nuestro código, tenderá a fallar en algunos navegadores antiguos debido a la falta de compatibilidad con los nuevos cambios. Por lo tanto, si queremos utilizar nuevas funciones de ECMA Script en nuestro código y queremos ejecutarlo en todos los navegadores posibles disponibles, necesitamos una herramienta que compile nuestro código final en ES5.
Babelhace lo mismo y se llama transpilador que transpila el código en la versión ECMA Script que queremos. Tiene características como ajustes preestablecidos y complementos, que configuran la versión ECMA que necesitamos para transpilar nuestro código. Con Babel, los desarrolladores pueden escribir su código utilizando las nuevas funciones de JavaScript. Los usuarios pueden transpilar los códigos usando Babel; los códigos se pueden utilizar posteriormente en cualquier navegador sin ningún problema.
The following table lists down the features available in ES6, ES7 and ES8 −
| Caracteristicas | Versión del script ECMA |
|---|---|
| Let + Const | ES6 |
| Funciones de flecha | ES6 |
| Clases | ES6 |
| Promesas | ES6 |
| Generadores | ES6 |
| Iteradores | ES6 |
| Módulos | ES6 |
| Desestructurando | ES6 |
| Literales de plantilla | ES6 |
| Objeto mejorado | ES6 |
| Propiedades predeterminadas, de descanso y propagación | ES6 |
| Async - Espera | ES7 |
| Operador de exponenciación | ES7 |
| Array.prototype.includes () | ES7 |
| Acolchado de cuerdas | ES8 |
BabelJS gestiona las siguientes dos partes:
- transpiling
- polyfilling
¿Qué es Babel-Transpiler?
Babel-transpiler convierte la sintaxis del JavaScript moderno en un formulario que los navegadores más antiguos pueden entender fácilmente. Por ejemplo, las clases de función flecha, const, let se convertirán en función, var, etc. Aquí la sintaxis, es decir, la función flecha se convierte en una función normal manteniendo la misma funcionalidad en ambos casos.
¿Qué es Babel-polyfill?
Hay nuevas funciones agregadas en JavaScript como promesas, mapas e inclusiones. Las funciones se pueden utilizar en matriz; lo mismo, cuando se usa y transpila usando babel no se convertirá. En caso de que la nueva característica sea un método u objeto, necesitamos usar Babel-polyfill junto con la transpilación para que funcione en navegadores más antiguos.
Aquí está la lista de funciones de ECMA Script disponibles en JavaScript, que se pueden transpilar y rellenar:
- Classes
- Decorators
- Const
- Modules
- Destructing
- Parámetros predeterminados
- Nombres de propiedad calculados
- Descanso / propagación de objetos
- Funciones asincrónicas
- Funciones de flecha
- Parámetros de descanso
- Spread
- Literales de plantilla
ECMA Script features that can be polyfilled −
- Promises
- Map
- Set
- Symbol
- Weakmap
- Weakset
- includess
- Array.from, Array.of, Array # find, Array.buffer, Array # findIndex
- Object.assign,Object.entries,Object.values
Características de BabelJS
En esta sección, aprenderemos sobre las diferentes características de BabelJS. Las siguientes son las características principales más importantes de BabelJS:
Complementos de Babel
Los complementos y ajustes preestablecidos son detalles de configuración para que Babel transpile el código. Babel admite una serie de complementos, que se pueden usar individualmente, si conocemos el entorno en el que se ejecutará el código.
Presets de Babel
Los ajustes preestablecidos de Babel son un conjunto de complementos, es decir, detalles de configuración del babel-transpiler que le indican a Babel que transpile en un modo específico. Necesitamos usar ajustes preestablecidos, que tiene el entorno en el que queremos que se convierta el código. Por ejemplo, es2015 preset convertirá el código a es5 .
Babel-Polyfills
Hay algunas características, como métodos y objetos, que no se pueden transpilar. En tales casos, podemos hacer uso de babel-polyfill para facilitar el uso de funciones en cualquier navegador. Consideremos el ejemplo de las promesas; para que la característica funcione en navegadores más antiguos, necesitamos usar polyfills.
Babel-Polyfills
Babel-cli viene con un montón de comandos donde el código se puede compilar fácilmente en la línea de comandos. También tiene características como complementos y ajustes preestablecidos para usar junto con el comando, lo que facilita la transpilación del código de una sola vez.
Ventajas de usar BabelJS
En esta sección, aprenderemos sobre las diferentes ventajas asociadas con el uso de BabelJS -
BabelJS proporciona compatibilidad con versiones anteriores de todas las funciones recién agregadas a JavaScript y se puede utilizar en cualquier navegador.
BabelJS tiene la capacidad de transpile para tomar la próxima versión de JavaScript: ES6, ES7, ESNext, etc.
BabelJS se puede usar junto con gulp, webpack, flow, react, mecanografiado, etc., lo que lo hace muy poderoso y se puede usar con grandes proyectos, lo que facilita la vida del desarrollador.
BabelJS también funciona junto con la sintaxis JSX de reacción y se puede compilar en formato JSX.
BabelJS tiene soporte para complementos, polyfills, babel-cli que facilita el trabajo con grandes proyectos.
Desventajas de usar BabelJS
En esta sección, aprenderemos sobre las diferentes desventajas de usar BabelJS:
El código de BabelJS cambia la sintaxis mientras se transpila, lo que dificulta la comprensión del código cuando se lanza en producción.
El código transpilado tiene más tamaño en comparación con el código original.
No todo ES6 / 7/8 o las próximas nuevas funciones se pueden transpilar y tenemos que usar polyfill para que funcione en navegadores más antiguos.
Aquí está el sitio oficial de babeljs https://babeljs.io/.
