Interfaz
Una manera fácil de mantener un código limpio en React
Usar importaciones absolutas para organizar mejor su proyecto React es una excelente manera. Las importaciones relativas son difíciles de seguir y romper durante la refactorización. Las importaciones absolutas gestionan su proyecto más fácilmente a medida que crece. Olvídese de las importaciones relativas largas después de este artículo. Este es mi artículo número 40 de Medium.
¿Qué sucede si la estructura de carpetas de su proyecto es compleja y necesita subir ¿en eso? Dentro de sus componentes, tiene importaciones que se parecen al siguiente ejemplo con importaciones relativas.
import {MyComponent} from ‘../../../../parts/MyComponent’;
Puede romper la importación anterior cambiando la ruta del componente desde el que está importando su MyComponent. Supongamos que resolve mudarse MyComponent en su propia carpeta. Luego, deberá actualizar todas sus importaciones en su proyecto y agregar una adicional ../ a todas sus importaciones. Las importaciones relativas tienen algunos problemas más.
- Bastante difícil de refactorizar
- Se vuelve peor a medida que te adentras más en él.
- Debe cambiar todo el código base si necesita extraer el código para usarlo externamente como un módulo NPM.
Mediante el uso de importaciones absolutas, puede crear un alias para algunas carpetas con un nombre como el siguiente:
import {MyComponent} from ‘parts/MyComponent’;
Las importaciones absolutas tienen algunas ventajas.
- No hay
../../../../hell. Por lo tanto, es más fácil escribir las importaciones. - Copie y pegue fácilmente el código con importaciones en otro archivo del proyecto y no tenga que jugar con las rutas de importación.
- es corto y dulce
El siguiente ejemplo es un archivo con importaciones relativas.
Haga que las importaciones en el archivo anterior sean más bonitas.
Por lo tanto, ¿cómo puedes usar importaciones absolutas con ReactJs?
Usando mecanografiado
Si necesita configurar importaciones absolutas en su aplicación TypeScript, agregue/actualice su tsconfig.json archivo en el directorio raíz del proyecto. Entonces necesitas actualizar la opción del compilador. baseUrl en el archivo.
Usando JavaScript
Configurar importaciones absolutas a TypeScript y configurar importaciones absolutas a JavaScript es prácticamente el mismo proceso. Crear el jsconfig.json archivo en el directorio raíz del proyecto. Luego, debe actualizar el siguiente fragmento.
Ahora puede importar sus componentes de esta manera.
import {MyComponent} from ‘parts/MyComponent’;
También puede usar la opción del compilador paths también. Tal vez desee crear un alias para su element carpeta. Para ello, debe configurar su tsconfig.jsono jsconfig.json como se muestra a continuación:
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@element/*": ("src/parts/*"),
}
}
}
Ahora puede importar los componentes desde su carpeta de componentes de esta manera:
import {MyComponent} from ‘@element/MyComponent’;
¿es suficiente?
Bueno, no… Debe hacer que su IDE sea inteligente para comprender las importaciones absolutas en sus archivos. Aquí voy a mencionar el progreso de los 2 IDE principales. Esos son VS Code y WebStrom.
Para código VS
VS Code es lo suficientemente inteligente como para comprender el tsconfig.jsono jsconfig.json expediente. Intellisense y jump-to-source funcionan bien con importaciones absolutas.
Por lo tanto, puede seguir el proceso anterior.
Para WebStrom/IntelliJ Concept
Seleccione la carpeta src en la ventana del proyecto y haga clic derecho sobre ella. Seleccione la opción Marcar directorio como y luego seleccione el Raíz de recursos opción.
ahora ve a Ajustes -> Editor –> Estilo de código -> JavaScript y Selecciona el Importaciones pestaña. Luego revisa el Use rutas relativas a las raíces del proyecto, recurso o fuentes.
Ahora WebStrom sabe hacia dónde apuntan las importaciones absolutas. No habrá advertencias y funcionará autocompletar/saltar a la fuente. Esto significa que el mecanismo de importación automática utiliza importaciones absolutas.
Si eres un desarrollador estricto como yo, usa algo como la configuración ESLint de Airbnb.
Con ESLint
Create React App también tiene una configuración de ESLint pero tiene un conjunto mínimo de reglas. eslint-plugin-importación es utilizado por Airbnb y este complemento verifica las importaciones no definidas. Cuando vaya a utilizar la configuración ESLint de Airbnb, le dará el error que se muestra a continuación:
Puede corregir el error agregando settings prop en su configuración de ESLint. Ese punto de apoyo de configuración de que sus importaciones podrían ser relativas a src carpeta. Por lo tanto, debe agregar actualizar su configuración de ESLint en .eslintrc archivo como este:
No necesita instalar ningún módulo NPM para evitar el error ESLint, agregue el settings el apoyo es suficiente.
Por convención
Las importaciones absolutas han sido posibles durante mucho tiempo con Webpack. Cuando está nombrando su carpeta con alias, necesita usar PascalCase/CamelCase porque es la convención que se sigue en el paquete internet.
