fcbk
Conéctate con TwitterConéctate con Facebook
5

¿Qué es y para qué sirve Babel?

17089Puntos

hace 9 meses

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.

Babel funciona mediante plugins para que le indiquemos que cosas queremos que transforme, por ejemplo con el plugin babel-plugin-transform-es2015-arrow-functions podemos decirle que transforme las arrow functions de ECMAScript 2015 a funciones normales, con babel-plugin-transform-react-jsx podemos hacer que entienda código de JSX y lo convierta a código JS normal.

Instalando Babel

Vamos a ver como instalar y usar Babel en su última versión desde la consola. Para eso necesitamos bajarnos varios módulos de npm.

npm i -D babel-core babel-cli

Con esto instalado ya podemos ejecutar Babel con el comando

babel script.js --out-file script-compiled.js

Sin embargo con la configuración por defecto Babel no hace absolutamente nada, así que necesitamos configurarlo nosotros.

Configurando Babel

Para eso vamos a crear en la raíz de nuestro proyecto un archivo llamado .babelrc que es donde vamos a colocar la configuración en formato JSON.

Lo primero que necesitamos que haga Babel es transformar nuestro código de ECMAScript 6 a ECMAScript 5, para esto hay muchos plugins, uno por cada característica nueva, y para no bajar uno por uno existen los presets.

Un preset es un conjunto de plugins, hay varios presets que los desarrolladores de Babel ofrecen y otros creados por la comunidad, para ECMAScript 6 vamos a bajar el preset ES2015.

npm i -D babel-preset-es2015

Luego vamos a agregarlo a la configuración de Babel.

{
	"presets": ["es2015"]
}

Ese JSON lo colocamos en el archivo .babelrc y cuando volvamos a usar Babel este va a transformar todo el código de ES6 a ES5. Como se puede ver no necesitamos agregar babel-preset- al nombre del preset ya que Babel asume por defecto que tiene ese prefijo.

Soportando React.js y JSX

En Platzi usamos React.js y usamos JSX como sintaxis para poder usar esto:

return (
	<div>
		Hola mundo
	</div>
);

En vez de esto:

return React.DOM.div(null, 'Hola mundo');

Al crear nuestros componentes, sin embargo los navegadores y Node.js no entienden JSX, así que para que funcionen nuestro components necesitamos transformar nuestro código, para eso usamos Babel.

Babel tiene plugins para soportar JSX y FlowType, sí deciden usarlo, y posee un preset con estos plugins llamado react así que vamos a cargarlo, para esto lo bajamos con npm.

npm i -D babel-preset-react

Y lo agregamos a nuestra configuración.

{
	"presets": ["es2015", "react"]
}

Con esto ya podemos usar JSX y FlowType en nuestro código y Babel se va a encargar de que funcione en todos los navegadores realizando las transformaciones necesarias.

Usando ECMAScript 2016 y superior

Hay algunas funciones de ES2016 y superiores como Async/Await, etc. que son muy útiles al desarrollar y ya podemos usarlas mediante plugins de Babel.

Y al igual que existe un preset con los plugins para ES2015 existe uno para los de ES2016 y ES2017, incluso hay uno que trae los tres presets juntos llamado latest, algo genial de este último es que cuando salga ES02018 simplemente actualizando la versión de latest vamos a poder tener sus plugins, sin necesidad de modificar la configuración de Babel.

También podemos decidir solo transformar código dependiendo de los navegadores que queramos dar soporte para eso con el preset env podemos configurar esto y así si decidimos dejar de dar soporte a IE, por ejemplo, podemos empezar a usar ciertas funciones de ES2015 que ya todos los demás navegadores soportan.

Adicionalmente existen plugins que nos permiten usar ya mismo ciertas funcionalidades que todavía no son estándar y son más bien propuestas, pero nos permite probar o hacer uso de funciones interesantes. Para esto existen 4 presets llamados stage-3, stage-2, stage-1 y stage-0 que activan estas funciones experimentales.

Cada preset soporte algunas las características del preset superior más nuevas, así stage-3 soporta ciertas features y stage-2 soporta todas las de stage-3 más nuevas, el último preset stage-0 por tanto soporta todas estas características.

¿Como se usan todos estos presets? Simplemente los bajamos con npm y lo agregamos a la configuración de Babel.

npm i -D babel-preset-stage-0 babel-preset-latest

Luego en nuestra configuración.

{
	"presets": ["latest", "react", "stage-0"]
}

Con esto ya tenemos todo ECMAScript 2015/2016/2017, React (JSX y FlowType) y las funciones experimentales del Stage 0.

Mejoras de rendimiento en producción

Cuando usamos Babel hay muchos plugins que podemos usar que no son parte de ningún preset y que nos dan ciertas mejoras de rendimiento, minificación u otras funciones que nos pueden ser útiles.

Mejoras de minificación

Mejoras de rendimiento con React

Otros

Para poder usar todos estos plugins vamos a primero descargarlos con npm.

npm i -D babel-plugin-transform-react-constant-elements babel-plugin-transform-runtime

Luego podemos agregar estos plugins desde la configuración de Babel.

{
	"presets": ["latest", "react", "stage-0"],
	"plugins": [
		"transform-runtime"
	],
	"env": {
		"production": {
			"plugins": [
				"transform-react-constant-elements"
			]
		}
	}
}

Como vemos un plugin se agrega usando la propiedad plugins y agregándolos dentro de un array.

También vemos algo interesante y es la propiedad env, esta nos permite configurar ciertos presets y plugins y otras configuraciones dependiendo de el entorno, por defecto Babel usa el entorno development, así podemos definir ciertos plugins o presets solo para desarrollo, luego podemos mediante la variable de entorno NODE_ENV definir que usemos production, test o cualquier otro entorno y con eso agregar algunos plugins solo para estos entornos.

La gran ventaja de esto es que ciertos plugins hacen más difícil el desarrollo o más lento a Babel, pero ayudan mucho en nuestra aplicación en producción, para eso entonces podemos solo activarlos en production y obtener todas sus ventajas cuando es necesario.

Usar Babel junto a Webpack

Si usan Webpack para hacer el build de sus archivos de Frontend pueden usarlo junto a Babel muy fácilmente, simplemente descargando un loader de Webpack y configurándolo.

npm i -D babel-loader

Luego en nuestra configuración agregar el loader de esta forma:

module.exports = {
	...
	module: {
		rules: [
			{
				test: /\.jsx?$/,
				loader: 'babel-loader',
				exclude: /(node_modules)/,
			},
		],
	},
	...
};

Con esto y teniendo el archivo de configuración .babelrc en la raíz del proyecto podemos hacer que Webpack se encargue de usar Babel para transformar todo nuestro código JS y JSX a JS que todos los navegadores entiendan.

Conclusiones

Como se puede ver, usar Babel es bastante simple, la configuración más básica es muy fácil de usar y no cuesta nada iniciar un proyecto con esta simplemente copiándola de otro proyecto y usar Babel nos va a ayudar a poder usar la última versión del estándar ya mismo e incluso algunas funciones experimentales o que no son parte del estándar (ni siquiera propuestas) pero nos ayudan a trabajar más fácilmente.

Sergio Daniel
Sergio Daniel
@sergiodxa

17089Puntos

hace 9 meses

Todas sus entradas