Rutas Alias en JavaScript para React, Vuejs...

Las Path Aliases o rutas relativas como muchos las pueden conocer, nos ayuda cuando tenemos un proyecto utilizando JavaScript o algún Framework como Vuejs o Nextjs(React), utilizamos el import { } from ''

Por ejemplo:

import Component from '../../../components/Component'
// Ö
import Logo from '../../../assets/principal/logo.png'

Lo cual cuando tienes múltiples directorios y archivos se vuelve muy algo tedioso cuando necesitas importar algo

Incluso puede suceder que por algún refactor muevas una carpeta a un nivel mas arriba, por ejemplo:

import Logo from '../../../assets/principal/logo.png'
// Y lo cambian a...
import Logo from '../../../assets/logo.png'

Entonces tendríamos un error en todos los archivos donde importemos este "Logo" o Componente ya que la ruta no funcionara y no encontrara nuestro archivo que deseamos

Por ejemplo, en la imagen de arriba nos mostrara que el modulo no fue encontrado o no se resolvió la ruta de donde importamos el archivo

Por suerte existe una solución :D

Debemos crear en la ruta raiz de nuestro proyecto un archivo jsconfig.json

Y dentro pondremos la siguiente estructura:

{
 "compilerOptions": {},
 "include": [],
 "exclude": []
}

compilerOptions

Son las opciones que le pasaremos al compilador que usemos de nuestro proyecto JavaScript

Como la ruta base de nuestro proyecto, la versión de ecmascript que estemos usando

Esto se refiere a si usamos:

import Foo from './foo'
// Ó
const bar = require('./bar')

Include

Aquí es donde pasaremos la carpeta que hara referencia a nuestra ruta

Por ejemplo si usamos la carpeta comúnmente usada src

Haremos referencia a ese directorio

Exclude

Lo que hace esta opción es excluir o ignorar las carpetas que le pasemos dentro de las opciones

Por ejemplo la famosa carpeta de agujero negro, node_modules

Ya que solo queremos que nuestros archivos de desarrollo tengan las rutas relativas

Entonces con todo esto listo nuestro archivo se vería algo así:

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es6"
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

Muy entonces dentro de nuestro proyecto podemos importar desde algún directorio que este dentro de src

Con esto estaría listo, cabe resaltar que algunos compiladores aun no aceptan por completo este tipo de archivo lo cual es raro ya que es una configuración de JavaScript pero aun así puedes intentarlo en tu proyecto :D

Tambien puedes establecer rutas especificas dentro de otras carpetas agregando dentro de compilerOptions la propiedad llamada paths

Aquí un ejemplo:

// El nombre de la izquierda puede ser cualquiera
// Solo que sea algo sencillo de entender
"paths": {
  "components": ["src/components"],
  "carpeta": ["src/carpeta/otraCarpeta"]
}

Y en tu archivo jsconfig.json se vería algo así:

No es necesario exportar el archivo, ni importarlo dentro de algún fichero en tu proyecto, generalmente funciona automáticamente

Ahora en caso estés utilizando Typescript el proceso es el mismo solo que tu archivo deberá llamarse: tsconfig.json

Si deseas aprender y conocer muchas mas opciones puedes leer la documentacion oficial y aunque sea de Visual Studio Code, puede ser usada en cualquier editor como Vim, Sublime Text, Atom, etc.

🔗Documentacion Oficial

Dime en los comentarios que te pareció, o si tienes algún error para ayudarte 💫