DEV Community

Jorge Brunal Pérez
Jorge Brunal Pérez

Posted on

NodeJS, Express y ES6

Publicado originalmente (2021-01-11) en mi sitio web.

Configurando Express para utilizar ES6 con nodeJS y no morir en el intento.

 
TL;DR

ECMAScript 2015 ó ES2015 es una importante actualización del lenguaje de programación JavaScript.

Es la primera actualización importante del lenguaje desde ES5, que se estandarizó en 2009.
Por lo tanto, ES2015 suele llamarse ES6.

ES6 permite entre otras cosas:

  • let -> declarar variables con alcance de bloque utilizando la palabra clave let y las diferencias entre let y var.
  • const -> definir constantes, usando la palabra clave const.
  • Establecer el valor por defecto de los parámetros de una función.
  • Operador de propagación (...).
  • for...of -> para iterar sobre los elementos de un objeto iterable.
  • Template literals -> ().
  • Módulos de ES6(lo que nos compete principalmete en esta entrada) 😄
  • y un largo etc...

 

Comenzando

Para este tutorial necesitamos:

  • nodeJS versión 12.x
  • npm versión 6.x ó superior

Creando los archivos necesarios.

$ mkdir -pv express-es6/src
Enter fullscreen mode Exit fullscreen mode
$ cd express-es6
$ touch package.json .babelrc .prettierrc src/server.js
Enter fullscreen mode Exit fullscreen mode

La estructura del proyecto deberá lucir como:

├── .babelrc
├── .prettierrc
├── package.json
└── src
    └── server.js
Enter fullscreen mode Exit fullscreen mode

En el archivo .prettierrc agregamos lo siguiente:

{
  "singleQuote": false,
  "printWidth": 80,
  "trailingComma": "es5",
  "arrowParens": "always",
  "bracketSpacing": false,
  "jsxBracketSameLine": false,
  "parser": "babel",
  "semi": true,
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "useTabs": true,
  "tabWidth": 4,
  "endOfLine": "lf"
}
Enter fullscreen mode Exit fullscreen mode

Para más info consulta: Prettier Configuration File

 

En el archivo .babelrc agregamos lo siguiente:

{
    "presets": [
        ["@babel/preset-env",{
            "targets": {
                // specify supported browsers (ES2015+ Features to transpile)
                "node": "current"
            },
            // no module transpilation to CJS (!important)
            "modules": false
        }]

    ],
    "plugins": [
        ["babel-plugin-module-resolver",
            {
                "root": ["."],
                "extensions": [".js"],
                // some alias
                "alias":
                {
                    "@middlewares": "./src/middlewares",
                    "@modules": "./src/modules",
                    "@routes": "./src/routes"
                }
            }
        ],
        [
            "@babel/plugin-transform-modules-commonjs",
            {
                "allowTopLevelThis": true
            }
        ],
        [
            "@babel/plugin-transform-runtime",
            {
                "regenerator": true
            }
        ]
    ]
}
Enter fullscreen mode Exit fullscreen mode

El en apartado de referencias, al final del post, se encuentran enlaces para continuar la lectura, acerca de la configuración para Babel.

 
En el archivo package.json agregamos lo siguiente:

{
  ...
  "engines": {
    "node": ">=12.0.0"
  },
  "dependencies": {
    "express": "^4.17.1",
    "module-alias": "^2.2.2"
  },
  "devDependencies": {
    "rimraf": "^3.0.2",
    "@babel/cli": "^7.13.14",
    "@babel/core": "^7.13.14",
    "@babel/node": "^7.13.13",
    "@babel/plugin-transform-runtime": "^7.13.10",
    "@babel/preset-env": "^7.13.12",
    "babel-plugin-module-resolver": "^4.1.0",
    "prettier": "^2.2.1"
  }
}
Enter fullscreen mode Exit fullscreen mode

 

Instalando las depedencias

npm install
Enter fullscreen mode Exit fullscreen mode

 

Utilizando ES6

Ingresamos al directorio src y editamos el archivo server.js

import express from "express";
let server = express();

const port = process.env.PORT || 8080;
const api = "/api";
const version = 0.1;

server.use(function (req, res, next) {
    res.header("Content-Type", "application/json");
    next();
});

server.get("/", async (req, res) => {
    res.status(200).json({
        status: "OK",
        message: `welcome to Server, use ${api} instead`,
    });
});

server.get(api, async (req, res) => {
    res.status(200).json({
        status: "OK",
        message: `Welcome to Server, version: ${version}`,
    });
});

server.get("*", async (req, res) => {
    res.status(404).json({
        status: "Fail",
        message: "Not Found",
    });
});

server.listen(port, function () {
    console.log("server app listening on port:", port);
    console.log("version:", version);
});
Enter fullscreen mode Exit fullscreen mode

 

Finalizando

Ahora agregamos unas tareas al package.json para facilitar las cosas.

{
  ...

  "scripts": {
    "clean": "rimraf dist",
    "build": "babel src -d dist",
    "dev": "NODE_ENV=development babel-node src/server.js",
    "serve": "NODE_ENV=production node dist/server.js",
    "start": "node server.js",
    "lint": "prettier --config .prettierrc --check \"src/**/*.js\"",
    "lint:fix": "prettier --config .prettierrc --check \"src/**/*.js\" --write"
  },
}
Enter fullscreen mode Exit fullscreen mode

 

Pruebas

Iniciando el servidor...

$ npm run dev

> ServerWithES6@0.0.1 dev /Users/diniremix/Develop/express-es6
> NODE_ENV=development babel-node src/server.js

server app listening on port: 8080
version: 0.1
Enter fullscreen mode Exit fullscreen mode

curl es tu amigo....

$ curl --request GET \
  --url http://localhost:8080/api \
  --header 'Content-Type: application/json'

{"status":"OK","message":"Welcome to Server, version: 0.1"}%
Enter fullscreen mode Exit fullscreen mode

Construyendo...

$ npm run build

> ServerWithES6@0.0.1 build /Users/diniremix/Develop/express-es6
> babel src -d dist

Successfully compiled 1 file with Babel (527ms).
Enter fullscreen mode Exit fullscreen mode

Chequeando el código con prettier...

$ npm run lint

> ServerWithES6@0.0.1 lint /Users/diniremix/Develop/express-es6
> prettier --config .prettierrc --check "src/**/*.js"

Checking formatting...
[warn] jsxBracketSameLine is deprecated.
All matched files use Prettier code style!
Enter fullscreen mode Exit fullscreen mode

Corrigiendo posibles inconsistencias con prettier...

$ npm run lint:fix

> ServerWithES6@0.0.1 lint:fix /Users/diniremix/Develop/express-es6
> prettier --config .prettierrc --check "src/**/*.js" --write

Checking formatting...
[warn] jsxBracketSameLine is deprecated.
All matched files use Prettier code style!
Enter fullscreen mode Exit fullscreen mode

 
Todo lo necesario, en este snippet.

Todo esto hace parte de la configuración de Knot, un Proyecto de HomeInside, para construir APIs RESTful y microservicios usando Node.js, Express y Firestore.

 

Referencias

Top comments (0)