Tutorial Babel CLI

Cuando entramos en el mundo de JavaScript, aprendemos sobre las versiones de ECMAScript y como estas van evolucionando y mejorando cada una para facilitar la forma en la que programamos nuestras aplicaciones. Sin embargo, los navegadores no llevan el mismo ritmo de actualización por lo que posiblemente algún usuario de nuestra aplicación tenga problemas para ejecutarla ya que su navegador no soporta la versión de ECMAScript que estamos utilizando para programar. Para solucionar este problema entra en juego Babel Js que nos permite transpilar nuestro código a una versión que los navegadores, en su mayoría, puedan interpretar. En este tutorial les enseñaré a configurar babel CLI para comprender mejor su uso y en que nos beneficia el transpilado que realiza.

instalación

Primero para realizar este tutorial debemos de tener instalado Node.js ya que estaremos utilizando npm para la instalación. Primero debemos de crear un directorio en donde colocaremos nuestros modulos, por ejemplo:

mkdirBabelJS
cdBabelJS

Ya que estamos ubicados en la carpeta donde estaremos trabajando, creamos nuestro archivo package.json y para esto npm nos puede ayudar utilizando npm init y podemos dejar la configuración que nos sugiere npm.

Instalamos los paquetes necesarios, entre los que estan babel-core, babel-preset-env que es el que contiene todos los presets que podemos utilizar, ahora al utilizar ‘env’ en los presets, le estamos diciendo a babel que interprete y transpile lo más nuevo de ECMAScript.

npm i --save-dev babel-core babel-cli babel-preset-env babel-preset-es2015

Luego creamos dos carpetas, en lo personal comunmente las nombro src a la que contiene las fuentes en es6 y todo lo que querramos transpilar, y la carpeta destino la nombro dist, que es el directorio donde se ubicarán los archivos transpilados.

Antes de poder transpilar nuestro código, debemos de crear el archivo de configuración de babel por lo que continuamos con crear el archivo utilizando touch .babelrc. Este contiene los presets que vamos a utilizar. Para este tutorial vamos a usar los siguientes:
Podemos utilizar un preset específico

{
    "presets": ["es2015"]
}

o podemos utilizar “env” para que tome lo más actual

{
    "presets": ["env"]
}

Finalmente debemos configurar el script en package.json

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

En este script le decimos a babel que ubicación debe transpilar y su destino.

Uso

En la carpeta src creamos un archivo javascript y colocamos un poco de código que se necesite transpilar, por ejemplo:

const saludar = (name) => console.log(`Hola ${name}!`)

saludar('manu')  // Hola manu!

Luego en la consola corremos el comando y este los transpila y lo coloca en el destino

npm run build

y obtendremos el siguiente resultado:

> [email protected] build /BabelJs
> babel src -d dist

src/index.js -> dist/index.js

Finalmente si queremos minificar el archivo podemos utilizar minify de babel. Instalandolo con npm i --save-dev babel-minify y creando una nueva variable dentro de los scripts por ejemplo así:

"scripts": {
    "build": "BABEL_ENV=production babel src -d dist"
  }

Luego en el archivo babelrc agregamos el preset:

"presets": ["env"],
    "env": {
        "production": {
            "presets":["minify"]
        }
    }

y ejecutamos nuevamente npm run build y el resultado será ubicado en la misma carpeta en un archivo con el mismo nombre preo minificado y transpilado.

'use strict';saludar=function(a){returnconsole.log('Hola '+a+'!')};saludar('manu');

Espero que este tutorial sea de utilidad para entender como funciona babel y como puede ser implementado con babel-CLI.