Como usar Path Aliases (Alias de Ruta) con TypeScript en Node JS 13.7

4 minuto(s)

En esta página:

Un Path Aliases o Alias de Ruta es una manera de renombrar una ruta para hacer más fácil su uso, en este Post te enseñaré como configurar un Alias de Ruta en un proyecto en donde uses el Lenguaje de Programación TypeScript para un proyecto con el Node JS, vamos con este Post.

Antes de continuar con este Post, te recomiendo leer los siguientes artículos:

Si ya conoces sobre TypeScript y Node JS, entonces no tendrás muchos problemas con este Post.

El Problema de Rutas en Node JS

En Node JS o en los entornos en donde se trabaja con TypeScript se pueden importar módulos al inicio de un archivo, por ejemplo:


import { Postres } from '../postres/Postres'; 
import { Bebidas } from '../../bebidas/Bebidas'; 
import { MongoDB } from '../../../../mongodb';

import { Postres } from '../postres/Postres';

import { Bebidas } from '../../bebidas/Bebidas';

import { MongoDB } from '../../../../mongodb';

Puedes ver que accedo a los niveles de los directorios en donde se encuentran los módulos colocando los puntos y barras diagonales ../../

Este es un problema muy frecuente que a veces nos puede incomodar, sobre todo si tenemos que llamara a bastantes módulos y en varios archivos en donde necesitamos importar nuestros módulos, a veces el Desarrollador tiene a probar los niveles de directorios hasta que queda finalmente instanciado un módulo.

Afortunadamente podemos solucionar esto con los Path Aliases o Alias de Ruta.

Que son los Path Aliases o Alias de Ruta ?

Tal como mencione al inicio de este Post, un Path Aliases o Alias de Ruta es una manera de renombrar una ruta para hacer más fácil su uso, además podemos reutilizar este alias de ruta en cualquier lugar en donde necesitamos importa un módulo, por ejemplo:


import { Postres } from '@componentes/postres/Postres'; 
import { Bebidas } from '@componentes/bebidas/Bebidas'; 
import { MongoDB } from '@servicios/mongodb';

import { Postres } from '@componentes/postres/Postres';

import { Bebidas } from '@componentes/bebidas/Bebidas';

import { MongoDB } from '@servicios/mongodb';

En el ejemplo puedes ver que los dos Path Alias o Alias de Ruta son:

@componentes
@servicios

Con esto puedes darte cuenta que hemos eliminado los puntos y barras diagonales ../../

Configurar Alias de Ruta

Bueno supongamos que tenemos una aplicación creada con Node JS con la siguiente estructura:


/mi-app-node
├── /node_modules
├── /public
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    ├── robots.txt
├── /src
    ├── /componentes // Directorio de componentes 
        ├── /postres  
            ├── Postres.js 
        ├── /bebidas  
            ├── Bebidas.js
    ├── /servicios // Directorio de servicios  
        ├── /mongodb.ts 
    ├── App.css
    ├── App.js 
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
├──  .gitignore
├──  package-lock.json
├──  package.json
├──  README.md

/mi-app-node

├── /node_modules

├── /public

├── favicon.ico

├── index.html

├── logo192.png

├── logo512.png

├── manifest.json

├── robots.txt

├── /src

├── /componentes // Directorio de componentes

├── /postres

├── Postres.js

├── /bebidas

├── Bebidas.js

├── /servicios // Directorio de servicios

├── /mongodb.ts

├── App.css

├── App.js

├── App.test.js

├── index.css

├── index.js

├── logo.svg

├── serviceWorker.js

├── .gitignore

├── package-lock.json

├── package.json

├── README.md

Primero revisare la versión de TypeScript que tengo instalado, para esto ejecuto el siguiente comando:


tsc -v 

tsc: command not found

tsc -v

tsc: command not found

Como no tengo instalado TypeScript pues me arrojó ese error, entonces voy a instalar TypeScript, para esto ejecuto el siguiente comando:


npm install -g --save typescript 

+ typescript@3.7.5
added 1 package from 1 contributor in 43.753s

npm install -g --save typescript

+ typescript@3.7.5

added 1 package from 1 contributor in 43.753s

Y si vuelvo a ejecutar de nuevo el comando para ver la versión que tengo instalada de TypeScript, me arroja la versión que tengo instalada de TypeScript:


tsc -v 

Version 3.7.5 // Versión de TypeScript

tsc -v

Version 3.7.5 // Versión de TypeScript

Ahora crearé un archivo llamado tsconfig.json ejecutando el siguiente comando:


tsc --init 

message TS6071: Successfully created a tsconfig.json file.

tsc --init

message TS6071: Successfully created a tsconfig.json file.

Ahora si reviso la estructura de mi proyecto, me debe aparecer el archivo tsconfig.json:


/mi-app-node
├── /node_modules
├── /public
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    ├── robots.txt
├── /src
    ├── /componentes 
        ├── /postres  
            ├── Postres.js 
        ├── /bebidas  
            ├── Bebidas.js
    ├── /servicios  
        ├── /mongodb.ts 
    ├── App.css
    ├── App.js 
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
├──  .gitignore
├──  package-lock.json
├──  package.json
├──  tsconfig.json // Se ha creado este archivo 
├──  README.md

/mi-app-node

├── /node_modules

├── /public

├── favicon.ico

├── index.html

├── logo192.png

├── logo512.png

├── manifest.json

├── robots.txt

├── /src

├── /componentes

├── /postres

├── Postres.js

├── /bebidas

├── Bebidas.js

├── /servicios

├── /mongodb.ts

├── App.css

├── App.js

├── App.test.js

├── index.css

├── index.js

├── logo.svg

├── serviceWorker.js

├── .gitignore

├── package-lock.json

├── package.json

├── tsconfig.json // Se ha creado este archivo

├── README.md

Abre el archivo tsconfig.json y agrega lo siguiente:


"baseUrl": "./src",
"paths": {
    "@componentes/*": ["componentes/*"],
    "@servicios/*": ["servicios/*"]
}

"baseUrl": "./src",

"paths": {

"@componentes/*": ["componentes/*"],

"@servicios/*": ["servicios/*"]

}

Ahora vamos a instalar el paquete module-alias ejecutando el siguiente comando:


npm i --save module-alias 

+ module-alias@2.2.2
updated 1 package and audited 1 package in 2.489s
found 0 vulnerabilities

npm i --save module-alias

+ module-alias@2.2.2

updated 1 package and audited 1 package in 2.489s

found 0 vulnerabilities

El paquete module-alias que instalé registra los Alias de ruta en los archivos JS compilados, por eso agregaré los siguiente en el archivo package.json:


"_moduleAliases": {
    "@componentes": "dist/componentes",
    "@servicios": "dist/servicios"
}

"_moduleAliases": {

"@componentes": "dist/componentes",

"@servicios": "dist/servicios"

}

El directorio dist es el directorio en donde se almacenan los archivos compilados de un proyecto creado con Node JS.

Para poder usar el paquete module-alias debemos instanciarlo o llamarlo en la parte superior del archivo en donde necesito usar mis Alias de Ruta.


import 'module-alias/register';

import 'module-alias/register';

Si quieres llamarlo en el archivo de configuración de tu servidor de Node JS, puedes colocar require(‘module-alias/register’) :


var http = require('http');
var server = http.createServer();

require('module-alias/register'); // El paquete 'module-alias' 

function mensaje(petic, resp) {
	resp.writeHead(200, {'content-type': 'text/plain'});
	resp.write('Hola Mundo');
	resp.end();
}
server.on('request', mensaje);

server.listen(3000, function () {
  	console.log('La Aplicación está funcionando en el puerto 3000');
});

var http = require('http');

var server = http.createServer();

require('module-alias/register'); // El paquete 'module-alias'

function mensaje(petic, resp) {

resp.writeHead(200, {'content-type': 'text/plain'});

resp.write('Hola Mundo');

resp.end();

}

server.on('request', mensaje);

server.listen(3000, function () {

console.log('La Aplicación está funcionando en el puerto 3000');

});

Esto es todo, ahora podrás usar los Alias de rutas que sean necesarios en tu proyecto con Node JS.

Si deseas más información sobre la configuración del paquete module-alias, puedes visitar su página NPM en el siguiente enlace.

Conclusión

Mediante los pasos que te comparto en este Post tus proyectos tus proyectos se verán mas limpios y ordenados, puedes reutilizar los Alias de Rutas, cuando sea necesario.

Si conoces alguna otra herramienta, puedes compartirla en los comentarios.

Nota(s)

Los pasos mencionados en este este Post, pueden quedar descontinuados, continuar o ser modificadas, esto no dependen de mí si no de los Desarrolladores que dan soporte a Node JS.
El paquete module-alias, puede quedar descontinuado, continuar o ser modificado, esto no dependen de mí si no de los Desarrolladores que dan soporte a este paquete.
No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenido.