Babel es una herramienta que nos permite transformar nuestro código JS de última generación (o con funcionalidades extras) a un código de Javascript que cualquier navegador o versión de Node.js pueda entender.
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.
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.
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.
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.
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.
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.
false a !1 y true a !0 para reducir caracteresvar a=1;var b=2; a var a=1,b=2;var foo = { "bar": function () {} }; a var foo = { bar: function () {} };process.env.NODE_ENV directo en el códigoObject.assignundefined a void 0 para evitar posibles problemas en algunos motores de JSPara 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.
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.
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. Puedes conocer más a fondo y dominar esta y otras tecnologías con nuestra Ruta Profesional de Javascript.
Sergio eres un Crack! Me has ayudado más de una vez con tus consejos, tus blogs y con estas entradas brutales. Gracias totales!
Hola, he seguido los pasos, pero me sale que el babel-preset-es2015 está descontinuado y debería usar el babel/preset-env , lo he intentado configurar pero me sale error al ejecutar npm start , y otra pregunta en la actualidad babel todavía es muy usado o ya está de bajada, quizá estoy aprendiendo una tecnología que ya pasó, no lo sé, alguien sabe?
Babel 7 cambió algunas cosas de cómo se usa, pero sigue siendo muy usado.
Espectacular simple y bien explicado… Gracias
Hola, mi consulta es acerca de preset-stage-0, ya que en la ultima versión de Babel, ya no se usa. Quisiera saber cuál es la nueva alternativa, o no ponerlo en que afecta?
Buen aporte.
¡Tremendo! lectura fácil y explicación completa.
Gracias
Excelente articulo, es el aporte que todos necesitamos! 👌😉