DEV Community

Cover image for Rutas Alias en JavaScript para React, Vuejs...
Luis Alvarez
Luis Alvarez

Posted on • Updated on

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'


Enter fullscreen mode Exit fullscreen mode

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

Multiples rutas importadas

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'


Enter fullscreen mode Exit fullscreen mode

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

Error de Visual Studio Code en React

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": []
}


Enter fullscreen mode Exit fullscreen mode

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')


Enter fullscreen mode Exit fullscreen mode

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"]
}


Enter fullscreen mode Exit fullscreen mode

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"]
}


Enter fullscreen mode Exit fullscreen mode

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

Archivo jsconfig.json

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 💫

Top comments (0)