Binary Coffee

Crear un proyecto en Nodejs con Express 2

expressjs javascript nodejs
Este art√≠culo pertenece a la serie de art√≠culos donde estamos creando un proyecto base en Nodejs con Express para iniciar nuestros proyectos de forma r√°pida y sencilla. Si no lo has le√≠do, puedes llegarte al primer cap√≠tulo de la serie en este [enlace](https://binary-coffee.dev/post/crear-un-proyecto-en-nodejs-con-express). # Sumario - ¬ŅPorqu√© migrar de es5 a es6? - Instalar las dependencias de babel - Configurar babel en el proyecto # ¬ŅPorqu√© migrar de es5 a es6? Actualmente los navegadores utilizan el est√°ndar es5 o lo que ser√≠a lo mismo **ECMAScript 5**, pero el lenguaje javascript a seguido evolucionando bajo Nodejs y nuevas versiones del est√°ndar del lenguaje han surgido, como es el caso de **ECMAScript 6** (es6). Con es6 tenemos ventajas que anteriormente no ten√≠amos con es5, y a continuaci√≥n veremos algunas de ellas: Para importar y exportar m√≥dulos en es5 se utilizaba el com√ļn CommonJS, de la manera conocida: ``` // export en el archivo file.js module.export = {}; // import desde el archivo file.js var file = require('./file') ``` Ahora con es6 esto es mucho mas sencillo y limpio, y lo antes visto queda de la siguiente manera: ``` // export export const file = {}; // import import file from './file'; ``` Con es6 es posible adem√°s, hacer uso de las arrow functions: ``` // es5 function suma(a, b) {return a + b;} // es6 const suma = (a, b) => a + b; ``` Como puede verse, es6 trae ventajas y ayudas que permiten que el c√≥digo sea m√°s limpio y entendible por los desarrolladores. Por este motivo, migraremos el c√≥digo de la aplicaci√≥n que estamos desarrollando, a es6. Anteriormente solo mostr√© dos ejemplos pero si lo desean, puedo hacer un art√≠culo con una recopilaci√≥n de las diferencias entre ambos. # Instalar las dependencias de babel En programaci√≥n se utiliza el t√©rmino **transpiler** que se refiere a las herramientas que permiten convertir un c√≥digo de un lenguaje a otro, algo muy diferente a compilar. Cuando compilamos un c√≥digo, lo estamos convirtiendo en un binario que luego la computadora ser√° capaz de entender, pero cuando transpilamos (este t√©rmino no existe en espa√Īol), estaremos como el caso de este art√≠culo, convirtiendo el c√≥digo de es6 a es5 (para que versiones viejas de Node puedan ser capaces de interpretar el c√≥digo). ¬ŅC√≥mo as√≠? pues los navegadores y versiones viejas de node, no entienden el c√≥digo es6, por tanto necesitamos una capa intermedia entre el c√≥digo en es6 y el int√©rprete para que se puedan entender. Esto es lo que ser√≠a transpilar el c√≥digo y una de las herramientas m√°s conocidas y la que usaremos en el art√≠culo, es babel. Para instalar babel en el proyecto solo necesitamos instalar las siguientes dependencias: ``` $ npm install --save-dev @babel/core @babel/preset-env @babel/node @babel/register ``` - *@babel/core*: es la dependencia principal de babel (digamos el coraz√≥n) - *@babel/preset-env*: es un conjunto inteligente de herramientas que permiten hacer la transpilaci√≥n del c√≥digo - *@babel/node*: esta dependencia permite utilizar a babel como un ejecutable - *@babel/register*: es un hook para compilar el c√≥digo en el momento # Configurar babel en el proyecto Una vez instalado babel, vamos a migrar todo el c√≥digo a es6. A continuaci√≥n un ejemplo de como queda el archivo app.js luego de migrarse a es6. - *es5* ``` var express = require('express'); var path = require('path'); var cookieParser = require('cookie-parser'); var logger = require('morgan'); var usersRouter = require('./routes/users'); var app = express(); app.use(logger('dev')); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); app.use('/users', usersRouter); module.exports = app; ``` - *es6* ``` import path from "path"; import express from "express"; import cookieParser from "cookie-parser"; import logger from "morgan"; import UserController from './routes/users'; const app = express(); app.use(logger('dev')); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); app.use('/users', UserController); export default app; ``` Solo faltar√≠a ejecutar el c√≥digo con babel. Pera debemos modificar el script para ejecutar el proyecto y debe quedar de la siguiente forma: ``` { ... "scripts": { "start": "babel-node ./bin/www.js", "start:dev": "nodemon --exec babel-node ./bin/www.js", "test": "mocha --require @babel/register --ui bdd ./test --recursive" }, ... "devDependencies": { "@babel/core": "^7.9.0", "@babel/node": "^7.8.7", "@babel/preset-env": "^7.9.0", "@babel/register": "^7.9.0", ... }, "babel": { "presets": [ "@babel/preset-env" ] } } ``` Nota: la configuraci√≥n de babel se ha agregado al final y todos los scripts han sido modificados Hecho esto y migrado todo el c√≥digo, ya podemos ejecutar el proyecto (junto con las pruebas) y programar sin problemas bajo el est√°ndar de es6. # Enlaces - [Crear un proyecto en Nodejs con Express 1](https://binary-coffee.dev/post/crear-un-proyecto-en-nodejs-con-express) - [C√≥digo de la aplicaci√≥n](https://github.com/dcs-community/nodejs-express-api) - [Sitio web de babel](https://babeljs.io/setup) # Conclusiones Como promet√≠, este es otro cap√≠tulo de la serie en donde vamos paso a paso, creando este cascar√≥n de proyecto donde al terminar estar√° listo para empezar de forma muy r√°pida una API, utilizando las √ļltimas tendencias con relaci√≥n a Nodejs. Si te fue interesante, aprendiste algo nuevo o simplemente quieres colaborar con esta serie, no dudes en dejar tus comentarios. > Happy coding!
Opiniones
noavatar
Muy buen post. Espero con ansias el próximo!!!
noavatar
Muy buen artículo.