Guía para principiantes de Babel

Este artículo presenta Babel, un compilador de JavaScript que permite a los desarrolladores usar JavaScript de próxima generación hoy en día.

Puede ser frustrante escribir JavaScript al crear aplicaciones web. Tenemos que pensar en las funciones disponibles en los navegadores a los que nos dirigimos y en lo que sucede cuando una función no se implementa. Algunas personas recomendarían simplemente no usarlo, lo cual es una experiencia dolorosa la mayor parte del tiempo si estamos construyendo algo complicado.

Afortunadamente, algunas herramientas nos permiten dejar de preocuparnos por lo que es compatible y simplemente escribir el mejor código que podamos. Se llaman transpilers. Un transpiler es una herramienta que toma código fuente como entrada y produce nuevo código fuente como salida, con una sintaxis diferente pero semánticamente lo más cercana posible, o idealmente equivalente, al original.

Babel es prácticamente el transpiler estándar para traducir JavaScript moderno (ES2015+) en implementaciones compatibles que se ejecutan en navegadores antiguos. Es la solución perfecta si solo quieres concentrarte en escribir JavaScript.

Y aunque el objetivo principal de Babel es traducir los últimos estándares de ECMAScript (ES) para navegadores antiguos o, a veces, actuales, puede hacer más. Hay un ecosistema de presets y complementos que hacen posible la adición de características no estándar también. Cada complemento hace que una nueva característica/transformación esté disponible para su código, y los ajustes preestablecidos son solo una colección de complementos.

introducción

Hay diferentes formas de configurar Babel en función de su proyecto y las herramientas que utilice. En este artículo, vamos a explicar cómo configurar Babel usando la CLI, aunque si está utilizando un sistema de compilación o marco, puede consultar instrucciones específicas en el sitio oficial. La mayoría de las veces, la CLI es la forma más rápida y fácil de comenzar, por lo que si es un usuario primerizo, no dude en continuar.

El primer paso para configurar Babel en un proyecto es instalar el paquete usando npm y agregarlo como una dependencia de desarrollo. Suponiendo que tenga un nodo de trabajo.el entorno js ya está instalado, solo es cuestión de ejecutar lo siguiente en su terminal:

mkdir babel-testcd babel-testnpm init -ynpm install --save-dev babel-cli

Esto creará un cambio de directorio (babel-test) en el directorio, inicializará un proyecto npm (creando así un archivo package.json) y luego instalará babel-cli como una dependencia de desarrollo.

Si necesita ayuda con lo anterior, consulte nuestros tutoriales sobre la instalación de Node y el trabajo con npm.

A continuación, podemos abrir package.json y agregar un comando build a nuestros scripts npm:

"scripts": { "build": "babel src -d dist"}

Esto tomará los archivos de origen del directorio src y generará el resultado en un directorio dist. Entonces podemos ejecutarlo como:

npm run build

¡Pero espera! Antes de ejecutar Babel debemos instalar y configurar los plugins que transformarán nuestro código. La forma más fácil y rápida de hacerlo es agregar el preajuste Env, que selecciona los complementos adecuados en función de los navegadores de destino que indique. Se puede instalar usando:

npm install babel-preset-env --save-dev

A continuación, cree un archivo .babelrc en la raíz de su proyecto y agregue el valor predefinido:

{ "presets": }

El archivo .babelrc es el lugar donde colocas todos tus ajustes para Babel. Usará esto principalmente para configurar preajustes y complementos, pero hay muchas más opciones disponibles. Puede consultar la lista completa en la página de la API de Babel.

Tenga en cuenta que, dependiendo de su sistema operativo, los archivos que comiencen con un punto se ocultarán de forma predeterminada. Si esto es problemático para usted (o si simplemente prefiere menos archivos), puede poner su configuración de Babel en el archivo package.json, bajo una tecla babel, de esta manera:

{ "name": "babel-test", "version": "1.0.0", "babel": { // config }}

Por último, vamos a crear los directorios y archivos que Babel espera encontrar:

mkdir src dist

Y darle algo para transformar:

let a = 1;let b = 2; = ;console.log(a);console.log(b);

Este ejemplo utiliza la asignación de desestructuración para intercambiar los valores de dos variables.

Ejecutar Babel

Ahora que tiene una instalación de Babel lista para usar, puede ejecutar el comando build para ejecutar el proceso de compilación:

npm run build

Esto tomará el código de src/main.js, lo transformará en código ES5 y generará el código transformado a dist/main.js.

Esto es lo que produjo:

"use strict";var a = 1;var b = 2;var _ref = ;a = _ref;b = _ref;console.log(a);console.log(b);

Como puede ver, let ha sido reemplazado por var y Babel ha introducido una variable temporal (denotada por el subrayado) para facilitar el intercambio.

Y eso es todo. El código que escriba en el directorio src se traducirá a versiones anteriores del idioma. De forma predeterminada, si no agrega ninguna opción al preset, cargará todas las transformaciones. También puede indicar los navegadores de destino de la siguiente manera:

{ "presets": } }] ]}

Esto cargará las transformaciones necesarias para admitir las dos últimas versiones de cada navegador y Safari mayor o igual a la versión 7. Puede encontrar las opciones disponibles para los navegadores de destino en el repositorio Browserlist.

Ecosistema de Babel: Una visión general rápida

Como se ha dado cuenta en la sección anterior, Babel no hará nada por sí solo cuando lo instale. Tenemos que instalar un conjunto de plugins para obtener el comportamiento deseado, o podemos utilizar presets, que son conjuntos predefinidos de plugins.

Por lo general, cada característica que desee incluir tendrá la forma de un complemento. Algunos ejemplos para ES2015 incluyen:

• constantes
• funciones de flecha
• funciones de ámbito de bloque
• clases
• para-de
• propagación
• literales de plantilla

Página de complementos en los documentos de Babel para una lista completa.

Pero a veces no quieres incluir todos los complementos uno por uno. Por lo tanto, hay preajustes predefinidos que facilitarán el proceso de instalación de cada complemento.

Los tres presets oficiales disponibles actualmente son:

• Env
• Reaccionar
• Flujo

Env es el más utilizado y el que hemos utilizado aquí. Carga automáticamente todas las transformaciones necesarias para que su código sea compatible en función de los navegadores de destino.

El preajuste de React transforma el código que normalmente se encuentra en los proyectos de React, añadiendo principalmente compatibilidad con anotaciones de flujo y JSX.

Y finalmente, el preajuste de flujo se utiliza para limpiar el código de las anotaciones de tipo de flujo (aunque no comprueba si los tipos son válidos o no.)

Babel Polyfill

Hay características de JavaScript que no se pueden transformar sintácticamente, generalmente porque no hay una funcionalidad equivalente implementada, por ejemplo, Promesas y funciones de generador.

Este tipo de características tienen que ser implementadas en el navegador por una biblioteca para ser utilizadas en su código, y ese es el trabajo de un polyfill.

El polyfill de Babel está compuesto por core-js y el tiempo de ejecución del Regenerador. Juntos, cubren todas las características de ES2015+.

Uso avanzado

Como se mencionó, Babel también se puede usar para transformar características que aún no se han implementado en el lenguaje. Un buen ejemplo de esto es la propuesta de campos de clase (actualmente en TC39 etapa 3: candidato). Esto es particularmente popular entre los desarrolladores de React, ya que elimina la necesidad de enlazar explícitamente métodos a un componente en particular, y también significa que el state de un componente puede declararse como un campo de clase (eliminando potencialmente la necesidad de un constructor).

Para aquellos de ustedes que quieran usar campos de clase hoy, tendrían que agregar las propiedades de clase de transformación del complemento de babel como una dependencia de desarrollo:

npm install --save-dev babel-plugin-transform-class-properties

También actualizaría su archivo .babelrc de la siguiente manera:

{ "presets": , "plugins": }

Ahora puedes escribir:

class App extends Component { state = { count: 0 }; incCount = () => { this.setState(ps => ({ count: ps.count + 1 })); }; render() { return ( <div> <p>{ this.state.count }</p> <button onClick={this.incCount}>add one</button> </div> ); }}

Y no se detiene ahí. También puede usar Babel para agregar nuevas características propias al idioma, como lo demuestra nuestro tutorial Comprender ASTs mediante la Creación de Su Propio Complemento de Babel.

Alternativas

Escribir aplicaciones web modernas a veces requiere más que las funciones disponibles en JavaScript. Otros idiomas también se pueden traducir a JavaScript compatible, pero también implementar otras características útiles.

La opción más popular es TypeScript, que es un JavaScript normal que implementa características modernas de ES, pero también agrega otras, especialmente con respecto a la seguridad de tipos.

En el otro extremo, hay lenguajes completamente diferentes en diferentes categorías, desde los funcionales como PureScript hasta los orientados a objetos como Dart.

Para obtener una visión más profunda de los idiomas alternativos, eche un vistazo a 10 Idiomas que se compilan en JavaScript.

Conclusión

Babel es una gran opción para escribir aplicaciones modernas mientras sigue sirviendo JavaScript que puede ser entendido por todos los desarrolladores y la amplia gama de navegadores en los que el código necesita ejecutarse.

Babel no solo es útil para transformar ES2015 + a versiones anteriores del lenguaje, tanto en el navegador como en plataformas como Node.js – pero también para agregar nuevas características que no son parte del estándar. Para ver a lo que me refiero, simplemente eche un vistazo al directorio npm para encontrar todos los complementos o presets de Babel disponibles.

Como JavaScript está evolucionando a un ritmo tan rápido, es obvio que los fabricantes de navegadores necesitarán un tiempo para implementar las últimas características. Darle a Babel un lugar en su kit de herramientas significa que puede escribir JavaScript de vanguardia hoy, con la seguridad de saber que no está abandonando a ninguno de sus usuarios. ¿Qué es no amar?