Babel con Node js | ES6, ES7 | 2020

Hola muy buenas,

Bienvenidos a un nuevo artículo donde aprenderemos a usar babel con Node js. Este artículo es la versión escrita de un video que he hecho en mi canal de youtube. Os dejo aqui abajo el video para que lo miréis.

Empezemos

Antes de hacer nada, hay que explicar qué es babel y para que sirve. Explicando estos conceptos antes, entenderemos mejor el artículo y todo lo que viene después.

Todos sabemos que lo que funciona en el navegador y en nodejs ahora mismo es ES5(también conocido como Ecmascript 5 o Ecmascript 2015). Es5 es la versión de javascript que soporta el navegador y node. Pero el tema es que existe una organización llamada Ecmascript que saca cada año una nueva versión de javascript y añade nuevas funcionalidades al lenguaje. Como los navegadores tardan un poco en soportar estas nuevas funcionalidades, necesitamos herramientas como babel para usar esas nuevas funcionalidades.

Babel es un transpilador o compilador que convierte nuestro código escrito en es6, es7 a una versión de javascript que es compatible con los navegadores y nodejs. Entonces como queremos estar en la última version de javascript y usar las nuevas características del lenguaje, usamos el transpilador para convertir nuestro código.

Vamos al lio!!

Explicado estos conceptos, vamos a empezar con el tutorial de como configurar babel con Node js. Vamos a mostrar esto con una aplicación de express sencilla. Todo el código lo podéis encontrar en mi github.

Vamos a crear una nueva carpeta y inicializar una aplicación de nodejs instalando la dependencia de express.

mkdir babel-node
cd babel-node
npm init -y
npm install express

Despues de esto instalaremos las dependencias de babel. Estas dependencias van a ser de desarrollo.

npm install @babel/cli @babel/node @babel/core @babel/preset-env nodemon --save-dev

Ahora vamos a escribir un pequeño servidor de express en src/app.js. Con esto y un pequeño script con nodemon tenemos el servidor corriendo.

const express require('express');

var app = express();

var port = 4000;

app.get('/', (req, res) => {
  res.send({
    message: "Hola Mundo",
  })
});

app.listen(port, () => {
  console.log(`Server started at port ${port}`);
});

El código de arriba que hemos escrito es es5. Vamos a convertirlo en es6 usando nuevas características como module imports, async await y mas cosas. El código de abajo es la versión final de nuestro app.js

import express from 'express';
import getMessage from './getMessage';

var app = express();

var port = 4000;

app.get('/', async (req, res) => {
  await new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('waiting - ');
      resolve(true);
    }, 1000);
  });

  res.send({
    message: getMessage(),
  })
});

app.listen(port, () => {
  console.log(`Server started at port ${port}`);
});

También cambiaremos nuestro script a esto para que compile nuestro codigo a es5.

nodemon --exec babel-node src/app.js

Por último vamos a crear un nuevo archivo llamado .babelrc. Este archivo ayudara a babel a entender como tiene que compilar el nuestro código.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": true
        }
      }
    ]
  ]
}

Con esto ya estaria y podemos encender el servidor y ver el resultado. Vemos que todo funciona perfectamente!!!

Por último vamos a crear un script de build. Hasta ahora hemos visto como se trabajaria en desarrollo, pero podemos llevar nuestra Api de nodejs a producción. En ese caso necesitariamos este script. El Script nos va a compilar todo nuestro código y nos lo va a dejar en el directorio de build. Si queremos desplegar nuestra aplicación tenemos que llevar el directorio de build.

babel src --out-dir build

Conclusión

En este artículo hemos visto como configurar babel con Node js y convertir nuestro código escrito es es6, es7 o esNext a un código entendible por el navegador y node js.

Me gustaria daros las gracias por leer el artículo y si os gusta el tema del desarrollo web podéis subscribiros a mi canal de Youtube, donde subo video todas las semanas.