Configurar Babel en NodeJS

Pasos a seguir para poder trabajar con las últimas características de Javascript mediante Ecmascript

6 min readAug 27, 2021

Node.js aparte de ser una de las tecnologías Backend más populares también es una de las que más fácil podemos implementar sin invertir mucho tiempo y podemos amoldar a nuestras necesidades y gustos, sin tantas ataduras.

En esta ocasión os voy a mostrar los pasos que daremos creando un sencillo servidor usando Node.js con Babel configurado en nuestro código.

Antes de empezar a trabajar con el servidor de Node.js, vamos a hacer una pequeña introducción sobre que es Babel y porque vamos a usarlo en Node.js

1.- ¿Qué es Babel?

Babel es un compilador de JavaScript. Es una herramienta popular que nos ayuda a utilizar las funciones más actuales del lenguaje de programación JavaScript.

2.- ¿Por qué usar Babel en Node.js?

Seguramente alguna vez habéis abierto un repositorio de backend creado con Node.js / Express, donde se encuentran las declaraciones de importación y exportación de ES6 junto con algunas otras características interesantes de sintaxis de ES6.

Por defecto, añadir esas declaraciones no es posible y ahí entra en juego Babel.

Como os he mencionado anteriormente, Babel es una herramienta popular que nos va a permitir utilizar las funciones más actuales de JavaScript. Y muchos frameworks de hoy usan Babel internamente para compilar su código.

Ya sabemos que Node.js por su cuenta no va a poder realizar declaraciones de importación y exportación ES6 junto con otras características interesantes de la sintaxis de ES6 sin usar un compilador como Babel.

Por lo tanto, con el objetivo de poder aprovecharnos de las características de ES6 os voy a mostrar los pasos que debemos de dar para poder implementar el uso Babel y así poder realizar declaraciones como “import” y “export”.

3.- Requisitos previos para poder realizar el tutorial

Asumo que para realizar este tutorial disponéis de estos conocimientos / herramientas:

Instalado Node.js en nuestro equipo, preferiblemente versión LTS.
Conocimientos básicos de Node.js
Cualquier IDE / editor de código para desarrollar el proyecto. Recomiendo Visual Studio Code.

4.- Comenzamos desde 0

Vamos a comenzar creando una app muy básica que la utilizaremos como proyecto base para seguir el tutorial.

Lo primero, creamos un directorio, donde vamos a tener todos los ficheros del proyecto y accedemos a él desde consola.

Una vez que ya hemos creado y estamos dentro de ese directorio desde el terminal, ejecutamos lo siguiente para crear el fichero de manifiesto del proyecto, llamado package.json:

npm init

Seguimos el asistente y podemos responder lo siguiente (es un ejemplo):

Asistente y resultado de la generación del fichero package.json

Ahora que ya tenemos el primer paso realizado, vamos a crear el fichero index.js donde vamos a desarrollar el proyecto de la API Express con Babel.

touch index.js

5.- Instalar y configurar Babel

Para empezar con la configuración de Babel y el servidor, necesitamos realizar la instalación de los siguientes cinco paquetes, que lo realizaremos en dependencias de desarrollo, ya que esto solo lo vamos a usar en el entorno local

@babel/cli, @babel/core, @babel/preset-env y @babel/node

Realizamos la instalación:

npm install -D @babel/cli @babel/core @babel/preset-env @babel/node

Y así estará el proyecto en este momento, donde se ha creado el directorio node_modules debido al proceso de instalación y se han registrado los tres paquete en las dependencias de desarrollo.

Estado del proyecto en estos momentos, con vista al package.json y los módulos de Node

Ahora que ya hemos completado y comprobado que el proceso de instalación ha sido satisfactorio, creamos el fichero .babelrc para realizar la configuración de Babel.

touch .babelrc

Esta configuración, es la mínima que habría que añadir, luego si queremos personalizarla más, os recomiendo que consulteis en esta URL:

{
  "presets": [
    ["@babel/env", {
      "targets": {
        "node": "current"
      }
    }]
  ]
}

La configuración que os he añadido sirve para usar aparte de las declaraciones de importación y exportación, también la característica de clase, así como el resto y los operadores de propagación de ES6.

6.- Creamos un simple servidor Node

Ahora abrimos el archivo “index.js” que hemos creamos anteriormente y agregamos el siguiente código para generar un servidor simple:

import http from 'http';const server = http.createServer((req, res) => {
  res.end('Trabajando con NodeJS + Babel');
}).listen(4001);console.log('Estamos en el tutorial de Node+Babel :)');export default server;

Con el código de muestra de arriba, nuestro servidor escuchará en el puerto 4001 y luego nos enviará una respuesta de “Estamos en el tutorial de Node + Babel :)” cada vez que visitemos la URL que corresponde al puerto asignado.

7.- Configuración scripts package.json

Ahora tenemos un servidor simple. Para ejecutar esto, tenemos que transpilar nuestro código antes de ejecutarlo con Node. Para hacer esto, abra el archivo “package.json” y agregamos este script de compilación e inicio:

"scripts": {
   "build": "babel index.js -d dist",
    "start": "babel-node index.js"
  }

Bien, ahora podemos comenzar a ejecutar nuestro servidor con el siguiente comando

npm start

Ahora si todo va bien tendremos el siguiente mensaje en la consola.

Estado de la consola al iniciar el servidor

Como no tenemos ningún error, accedemos a la URL de nuestro servidor que es http://localhost:4001

Al entrar, nos mostrará en el navegador lo siguiente:

Al acceder a la URL principal de nuestro servidor

8.- Cómo usar Nodemon para observar cambios y reiniciar

Para evitar tener que reiniciar el servidor cada vez que realizamos cambios en nuestra aplicación, necesitamos instalar nodemon. Instalamos nodemon en nuestro proyecto como dependencia de desarrollo

npm install -D nodemon

Ahora modificamos el script “start” añadiendo la configuración de nodemon:

"scripts": {
    "build": "babel index.js -d dist",
    "start": "nodemon --exec babel-node index.js"
  }

A continuación, si ejecutamos el script “start”, veremos en la consola de la siguiente manera. Ahora recordad, que cuando hagamos cualquier cambio en el proyecto, el servidor de se reiniciará (os animo a cambiar añadiendo un comentario por ejemplo)

Al iniciar por primera vez el servidor con Nodemon

Si hacemos un cambio en el código.

Estado de la consola cuando hacemos los cambios

9.- Conclusión

Llegados a este punto, ya tenemos configurado nuestro servidor en Node para poder trabajar con la sintaxis de ES6.

Como os he comentado anteriormente, podremos utilizar la sintaxis para utilizar “import”, “export” y otras declaraciones correspondientes a ES6.

Ahora ya podemos evitar usar “require” para utilizar módulos y otras implementaciones

10.- Invítame a un café

Si este contenido o cualquier artículo de los que puedes encontrar aquí te resulta útil, si queréis ir obteniendo artículos de calidad, me gustaría vuestro apoyo ya que sin ese apoyo no podré dedicarle el tiempo necesario a crear este contenido de calidad.

Podéis apoyarme desde aquí:

buymeacoffee.com/mugan86

11.- Presencia en redes sociales.

Podéis encontrarme en las siguientes redes.

12.- Cursos Online

Los cursos que imparto (PREMIUM y gratuitos) los podéis encontrar siempre al mejor precio en mi web personal.

Anartz Mugika Ledo.