Import aliases en tu aplicación de NodeJS

Hay ocasiones en las que nuestra aplicación crece y los imports acaban siendo algo feos y liosos, como estos:

import GenericRepository from '../../../shared/generics/generic.repository'

Esto puede llevar a confusiones si crece demasiado. Afortunadamente hay medidas que se pueden tomar para evitar que esto ocurra y que nos queden unos imports así de claros y bonitos:

import GenericRepository from '@generics/generic.repository'

¡Mira que bien se ve! Ahora te explico cómo usar correctamente estos imports.

Implementación

Asumiendo que estás utilizando TypeScript en tu aplicación, tendrás un archivo llamado tsconfig.json en el root de tu proyecto. Este archivo lucirá de una forma similar a esto:

{
    "compilerOptions": {
        // tu configuración
    }
}

Dentro de las compilerOptions vamos a definir nuestros path aliases. ¿Cómo? Pues lo primero que necesitamos es saber cuál es nuestra baseUrl. A mí personalmente me gusta meter toda la chicha en la carpeta src , por lo que mi baseUrl será así:

{
    "compilerOptions": {
        "baseUrl": "./src"
    }
}

Si no tienes o no utilizas la carpeta src de esa manera no te preocupes, puedes configurar la baseUrl a un punto sin más, o a cualquier otro valor que aplique a tu proyecto. Aquí un ejemplo que muestra cómo sería la baseUrl basándose en el root del proyecto:

{
    "compilerOptions": {
        "baseUrl": "."
    }
}

Una vez tenemos la baseUrl, ya podemos definir nuestros path aliases. ¡Olé!

Path aliases

• root

  • src
  • api
  • shared
    • generics
    • utils

Dentro de la carpeta src están las carpetas api y shared . Los import aliases que quiero configurar son para poder importar los archivos que estén dentro de la carpeta de generics y utils.

Venga, ya lo importante. Aquí te muestro cómo quedaría nuestro tsconfig.json:

{
    "compilerOptions": {
        "baseUrl": "./src",
        "paths": {
            "@utils/*": ["shared/utils/*"],
            "@generics/*": ["shared/generics/*"]
        }
    }
}

De esta forma podremos importar nuestros archivos de una forma mucho más limpia. Así nos quedarían los imports ahora:

import GenericRepository from '@generics/generic.repository'

Solución de problemas

¿Cómo? ¿En el editor parece que te va todo bien pero en la consola te salta el siguiente error?

Error: Cannot find module '@generics/generic.repository'

¡No te preocupes! Aún nos queda un paso extra. Principalmente si estás utilizando la librería ts-node .

El editor sabe que estás usando estos import aliases, pero para que funcione correctamente tenemos que ir poco más allá. Gracias a la librería tsconfig-paths podemos hacer que nuestros bonitos imports funcionen a la perfección.

Solo tendríamos que instalarla corriendo el siguiente comando:

npm install--save - dev tsconfig - paths

Y luego tendríamos que incluir esto en el script de ejecución de nuestra aplicación en el package.json:

-r tsconfig - paths / register

En mi caso, el script quedaría así:

{
    "scripts": {
        "dev": "ts-node-dev -r tsconfig-paths/register --env-file=.env.development index.ts"
    }
}

Conclusión

Es bastante útil tener unos imports bien claros y lo más limpio posible. ¿Por qué? Pues porque ayuda a la lectura del código y evita tener ruido en nuestros archivos. Tanto tú como la gente que trabaje contigo lo agradeceréis.

Además, creo que la ganancia de hacerlo en relación al esfuerzo que supone hace que merezca mucho la pena.

¡Si tienes cualquier pregunta o comentario, no dudes en ponerlo por abajo!

¡Saludos!