Utilizar ECMAScript 6 en tu backend con Babel

Con todas las novedades que ECMAScript 6 trajo consigo es normal que quieras aprovechar todas ellas también en tu backend. Seguramente la primera vez te pille por sorpresa, cuando intentes utilizar todo aquello que aprendiste con un código como el siguiente:

import express from 'express';
let app = express();
app.get('/', (req, res) => res.send('Hello World'));
app.listen(4000);

Rápidamente, te encontrarás con el siguiente error (u otro con otra característica de ES6), cuando intentes ejecutar tu aplicación:

Esto es así porque Node.js todavía no soporta ES6 y esto hace que el backend de tu aplicación no pueda aprovecharse de sus características de manera nativa. Sin embargo, existe una utilidad llamada Babel que hace este trabajo por ti. En este artículo te cuento cómo usar este compilador de JavaScript.

Instala Babel

Lo primero que necesitas es instalar babel dentro de tu proyecto. Para ello puedes ejecutar el siguiente comando:

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

Ahora necesitas crear un fichero llamado .babelrc con la siguiente información:

// .babelrc
{
    "presets": [
        "@babel/preset-env"
    ]
}

Este archivo te permitirá habilitar plugins y configuraciones para Babel. En este ejemplo estoy utilizando env preset para habilitar las transformaciones necesarias para el uso de ES6.

Ejecuta tu código con Babel

Para ejecutar correctamente tu aplicación, utilizando ES6 y Babel, puedes hacerlo con el siguiente comando:

node_modules/.bin/babel-node server.js

Aunque lo más cómodo es siempre añadir este como parte de tus script en el archivo package.json de tu proyecto (scripts > start):

{
  "name": "Using Babel with Node.js",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "start": "babel-node server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/node": "^7.5.5",
    "@babel/preset-env": "^7.5.5"
  }
}

¡Saludos!