Uso de alias de ruta para importaciones más limpias de React y TypeScript

Nota del editor: Este artículo fue actualizado por última vez por Muhammed Ali el 31 de mayo de 2024. Ahora incluye información sobre la gestión de alias en monorepositorios, que suelen contener varios paquetes, cada uno de los cuales puede requerir su propio conjunto de alias de ruta. También cubre casos de uso avanzados para alias de ruta, como el alias dinámico para aplicaciones escalables y la gestión de proyectos con Múltiple alias.

React y TypeScript se han popularizado entre los desarrolladores para crear aplicaciones web escalables, fáciles de mantener y modernas. Sin embargo, a medida que los proyectos crecen en tamaño y complejidad, las declaraciones de importación pueden volverse confusas. En particular, las importaciones de rutas relativas predeterminadas pueden volverse largas rápidamente y dificultar la legibilidad del código.

Afortunadamente, existe una solución a este problema: configurar alias de ruta. En este artículo, exploraremos cómo aprovechar los alias de ruta para mejorar la organización y el mantenimiento de tus proyectos de React y TypeScript.

Para seguir este tutorial, necesitarás conocimientos básicos de JavaScript y TypeScript, además de cierta familiaridad con React. También debes tener un proyecto de React y TypeScript y asegurarte de que Node.js esté instalado en tu equipo.

Compresión de las declaraciones de importación en aplicaciones React y TypeScript

En aplicaciones React y TypeScript, los desarrolladores usan sentencias de importación para incorporar funcionalidad de otros módulos o archivos. Esta práctica garantiza el desarrollo de software reutilizable y modular.

Aunque las sentencias de importación son útiles de esta manera, pueden causar problemas si no se utilizan correctamente. El siguiente fragmento de código muestra un ejemplo típico de este problema:

importar React desde 'react' ; importar { Botón } desde '../../../../components/button' ; // importación larga y desordenada :( función AlgúnComponente () { return Botón /; };      

Como puede ver, este fragmento de código utiliza importaciones relativas del archivo actual para importar el Buttoncomponente. Sin embargo, este patrón de importación es confuso porque importa el componente desde un directorio profundamente anidado.

Para proyectos relativamente pequeños, esto podría no ser un gran problema. Sin embargo, a medida que el proyecto crece, escribir y leer largas rutas de importación se vuelve tedioso.

Además, refactorizar el proyecto se vuelve un desafío cuando la estructura del directorio del módulo importado cambia porque está estrechamente acoplada a la estructura del archivo del proyecto.

Cómo los alias de ruta pueden ayudar a simplificar las declaraciones de importación

Los alias de ruta permiten a los desarrolladores definir atajos personalizados para las rutas de importación, haciéndolas más claras e intuitivas. Con los alias de ruta configurados, se pueden obtener importaciones claras y concisas independientemente del tamaño del proyecto, como se muestra en el siguiente fragmento de código:

importar React desde 'react' ; importar {Botón} desde '@components/button'; // importación limpia y concisa :) función AlgúnComponente () { return Botón /; };      

Al configurar alias de ruta en una aplicación React y TypeScript, puede simplificar las declaraciones de importación, mejorar la navegación del código y mejorar la experiencia de desarrollo general.

Configurar alias de ruta en el archivotsconfig.json

Puedes configurar fácilmente alias de ruta en el archivo de tu proyecto. Este archivo suele encontrarse en la raíz de un proyecto de TypeScript.tsconfig.json

Para configurar los alias de ruta en este archivo, simplemente agregue una pathspropiedad al objeto compilerOptions. Luego, puede asignar los alias de ruta a las rutas de archivo, como se muestra en el siguiente fragmento de código:

{ "opcionesdelcompilador" : { "rutas" : { "@/*" : [ "./src/*" ] } } }                     

El código anterior indica al compilador de TypeScript que resulta las importaciones del alias al directorio. Una vez configurado el alias de ruta, puede usarlo en sus declaraciones de importación.@/*./src/*

Por ejemplo, puedes importar un Buttoncomponente al directorio directamente desde cualquier lugar del proyecto de la siguiente manera:src/components

importar { Botón } desde "@/componentes/Botón" ; función App() { return ( Botón Haz clic en mí / Botón ) }            

Sin un alias de ruta configurado, importe el Buttoncomponente desde otro archivo, por ejemplo, se vería así:src/pages/dashboard/profile/settings/index.tsx

importar { Botón } desde '../../../../componentes/Botón' ; función Configuración () { return ( Botón Haz clic en mí / Botón ) }            

Puedes ir un paso más allá y agregar más alias de ruta, lo cual puede ser beneficioso para proyectos grandes que almacenan partes críticas de la aplicación en directorios bien definidos. En el archivo, actualiza el campo como se muestra en el siguiente fragmento de código:tsconfig.jsonpaths

{ "compilerOptions": { "baseUrl": "./src", "paths": { "@components/*": [ "./components/*"], "@ui/*": [ "./components/common/ui/*"], "@pages/*": [ "./pages/*"], "@hooks/*": [ "./hooks/*"], "@api/*": [ "./api/*"], "@utils/*": [ "./utils/*"], } } }                                                              

El baseUrlcampo en el fragmento de código anterior se utiliza para hacer que los alias de ruta sean más cortos para escribir.

Mejores prácticas para usar alias de ruta

Los alias de ruta pueden ayudar a mejorar significativamente la legibilidad y la concisión de las rutas de importación en sus proyectos, pero deben usarse correctamente para maximizar sus beneficios.

A continuación se muestran algunas prácticas recomendadas a seguir al usar alias de ruta en sus proyectos React y TypeScript:

• Sea explícito y descriptivo: Los nombres de alias de ruta deben representar claramente el contenido del directorio o módulo al que corresponde. Por ejemplo, use ` @componentsen lugar de` @cpara definir un alias para los componentes almacenados en el componentsdirectorio.
• Mantén la coherencia: Mantén una convención de nomenclatura uniforme para tus alias de ruta durante todo el proyecto. Por ejemplo, si usas @components, mantén un patrón de nomenclatura similar como @utils, @api, etc. Esta coherencia puede ayudar a otros desarrolladores a comprender y recordar los alias.
• Evitar colisiones: Asegúrese de que el alias de su ruta no entre en conflicto con los nombres de los paquetes instalados en el node_modulesdirectorio. Es recomendable usar siempre nombres únicos para los alias de su ruta para evitar estos conflictos.
• Considere el tamaño y la complejidad del proyecto.: Es crucial evaluar el tamaño y la complejidad de su proyecto antes de agregar demasiados alias de ruta, lo que podría generar sobrecarga. Para proyectos más pequeños con un número muy limitado de módulos, un alias de ruta podría no ser necesario.
• Utilice herramientas compatibles: asegúrese de que todas las herramientas que utilice en su proyecto sean compatibles con los alias de ruta para evitar posibles errores durante el desarrollo.

Tenga en cuenta que debe usar los alias de ruta de forma inteligente y estratégica. Por ejemplo, nunca los use como una solución rápida para una mala organización del código. En cambio, es crucial organizar su código base correctamente y asegurarse de que su proyecto cumpla con los estándares aprobados.

Sin embargo, TypeScript y las herramientas de compilación como webpack o esbuild están bien optimizadas y emplean mecanismos de almacenamiento en caché para reducir el impacto de la resolución repetida del módulo para contrarrestar cualquier posible problema de rendimiento.

Es posible que experimente una ligera reducción del rendimiento al usar alias de ruta en los raros casos de proyectos grandes y complejos con jerarquías de módulos complejos. Sin embargo, incluso en esos casos, los alias de ruta ofrecen ventajas como una mejor organización del código y facilidad de mantenimiento que generalmente compensan el impacto en el rendimiento.

Seguir estas prácticas recomendadas puede ayudarle a aprovechar los beneficios de los alias de ruta sin encontrarse con inconvenientes y errores.

Cómo resolver errores de alias de ruta al usar Create React App

Si ha seguido este tutorial con un proyecto de React y TypeScript configurado con Create React App (CRA), es posible que encuentre un error como el siguiente:

Este error se produce porque webpack no puede resolver las importaciones especificadas utilizando los alias de ruta en el archivo.tsconfig.json

Una solución sencilla para este error es actualizar la configuración de webpack para resolver el alias de ruta. Sin embargo, la configuración predeterminada de CRA no permite modificar la configuración de webpack sin expulsar el archivo, lo cual puede resultar incómodo.

Afortunadamente, el paquete CRACO proporciona una forma conveniente de modificar las configuraciones de ESLint, Babel y webpack en un proyecto CRA sin necesidad de expulsarlo.

Explorando el paquete CRACO

CRACO significa “Crear Anulación de Configuración de Aplicación React”. Este proyecto de código abierto se creó para abordar las limitaciones en la personalización y extensión de CRA.

De forma predeterminada, al expulsar un proyecto de CRA, es responsable de mantener los archivos de configuración y los scripts necesarios para su funcionamiento. Esta responsabilidad puede dificultar la actualización y el mantenimiento del proyecto en el futuro.

CRACO le libera de esta carga al proporcionar un único archivo de configuración para anular y ampliar los ajustes predeterminados de CRA, conservando al mismo tiempo su simplicidad y capacidad de abstracción. Exploraremos cómo hacerlo en la siguiente sección.

Configuración y uso de CRACO en un proyecto CRA

Primero instalamos CRACO en el proyecto CRA ejecutando el siguiente comando:

npm i - D @craco / craco

A continuación, cree un archivo en la raíz del proyecto y agregue la siguiente configuración:craco.config.js

constante path = require('path'); módulo.exports = { webpack: { alias: { '@': path.resolve(__ dirname, 'src'), }, }, };                

Actualice el scriptscampo en el archivo con lo siguiente para usar la CLI en lugar de los scripts , , y :package.jsoncracoreact-scriptsstartbuildtesteject

"scripts" : { "inicio" : "inicio de craco" , "compilación" : "compilación de craco" , "prueba" : "prueba de craco" , "expulsión" : "expulsión de craco" }                       

Después de completar los pasos anteriores, webpack debería estar configurado correctamente para funcionar con los alias de ruta definidos. Esta configuración garantizará que no se producirán errores debido a rutas de importación sin resolver.

Manejo de alias en proyectos monorepo

En proyectos monorepositorio, que suelen contener varios paquetes, cada uno necesitaría su propio conjunto de alias de ruta. La gestión de alias en estas configuraciones requiere una configuración adicional para garantizar que cada paquete pueda resolver sus dependencias correctamente.

Para gestionar los alias en una configuración monorepositorio, puede configurar el archivo en el directorio raíz y los archivos individuales en cada directorio de paquetes. El directorio raíz debe hacer referencia a los alias de ruta de todos los paquetes, mientras que cada paquete específico debe heredar de la configuración raíz.tsconfig.jsontsconfig.jsontsconfig.jsontsconfig.json

He aquí un ejemplo de raíz:tsconfig.json

{ "opciones del compilador": { "baseUrl": "." , "rutas" : { "@shared/*" : [ "paquetes/shared/*" ], "@app/*" : [ "paquetes/app/*" ], "@lib/*" : [ "paquetes/lib/*" ] } }, "include" : [ "paquetes/**/*" ] }                                           

A continuación se muestra un ejemplo específico del paquete (por ejemplo, ):tsconfig.jsonpackages/app/tsconfig.json

{ "extiende" : "../../tsconfig.json" , "opciones del compilador" : { "URL base" : "./src" }, "incluir" : [ "src" ] }                

Esta configuración permite que cada paquete resuelva sus dependencias utilizando los alias de ruta definidos en la configuración raíz mientras mantiene configuraciones individuales adaptadas a cada paquete.

Casos de uso avanzados para alias de ruta

Los alias de ruta se pueden utilizar para casos de uso más avanzados en aplicaciones y proyectos escalables con Múltiples alias.

Un ejemplo de uso es el alias dinámico. En aplicaciones a gran escala, es posible que sea necesario cambiar dinámicamente las rutas de alias según el entorno (p. ej., desarrollo, pruebas, producción). Esto se puede lograr mediante archivos de configuración específicos del entorno y un script de compilación para modificar dinámicamente el archivo.tsconfig.json

Otro caso de uso se da en proyectos con Múltiples alias. Los proyectos con arquitecturas modulares suelen beneficiarse de múltiples alias de ruta. Por ejemplo, se pueden definir alias para diferentes capas de la aplicación (p. ej. @services, , @controllers, @models) para separar claramente las preocupaciones y mejorar la organización del código.

A continuación se muestra un ejemplo de alias dinámico utilizando variables de entorno:

// tsconfig.dev.json{ "opcionesdelcompilador": { "URLbase": "./src", "rutas": { "@config/*": ["./config/dev/*"] } }}// tsconfig.prod.json{ "opcionesdelcompilador": { "URLbase": "./src", "rutas": { "@config/*": ["./config/prod/*"] } }}

Este es el script de compilación para cambiar la configuración:

const fs = require('fs');const env = process.env.NODE_ENV || 'desarrollo';const tsConfig = env === 'producción' ? 'tsconfig.prod.json' : 'tsconfig.dev.json';fs.copyFileSync(tsConfig, 'tsconfig.json');

Al incorporar estos casos de uso avanzados, puede mejorar aún más la flexibilidad y escalabilidad de sus proyectos React y TypeScript.

Conclusión

Configurar alias de rutas en una aplicación React y TypeScript es una técnica poderosa que puede mejorar significativamente la legibilidad y la organización del código.

Al definir accesos directos personalizados para las rutas de importación, puede simplificar sus importaciones y hacerlas más intuitivas. Los alias de ruta no solo facilitan la navegación por el código, sino que también reducen la probabilidad de errores causados ​​por rutas relativas complejas.

Adoptar alias de rutas en sus proyectos React y TypeScript puede mejorar significativamente la experiencia de desarrollo, lo que genera un código más limpio y fácil de mantener a largo plazo.

Configure el seguimiento de errores de React moderno de LogRocket en minutos:

1. Visita https://logrocket.com/signup/ para obtener un ID de aplicación

2. Instale LogRocket mediante npm o la etiqueta de script. LogRocket.init()Debe llamarse del lado del cliente, no del lado del servidor.

   • npm
   • Etiqueta de script

   $ npm i --save logrocket // Código:importar LogRocket desde 'logrocket'; LogRocket.init('app/id');                    

   // Agregar a su HTML: script src="https://cdn.lr-ingest.com/LogRocket.min.js"/scriptscriptwindow.LogRocket window.LogRocket.init('app/id');/script                    

3. (Opcional) Instale complementos para integraciones más profundas con su pila:
   • Middleware Redux
   • Middleware NgRx
   • Complemento Vuex

Empieza ahora

Si quieres conocer otros artículos parecidos a Uso de alias de ruta para importaciones más limpias de React y TypeScript puedes visitar la categoría Guias.