Al utilizar importaciones absolutas, puede asignar un alias a 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 modificar 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 tanto, ¿cómo se pueden utilizar importaciones absolutas con ReactJs?
Usando mecanografiado
Si necesita configurar importaciones absolutas en su aplicación Typecript, 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 Typecript y configurar importaciones absolutas a JavaScript es prácticamente el mismo proceso. Crea el jsconfig.json archivo en el directorio raíz del proyecto. Entonces necesitas actualizar el siguiente fragmento.
Ahora puedes importar tus componentes de esta manera.
import {MyComponent} from ‘parts/MyComponent’;
También puedes usar la opción del compilador. paths también. Tal vez quieras ponerle un alias a tu element carpeta. Para eso, necesita 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 eso suficiente?
Bueno, no… Necesita 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 archivo. 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 -> Redactor-> Estilo de código -> javascript y seleccione el Importaciones pestaña. Luego revisa el Utilice rutas relativas al proyecto, recurso o raíces de fuentes..
Ahora WebStrom sabe hacia dónde apuntan las importaciones absolutas. No habrá advertencias y la función de autocompletar/saltar a la fuente funcionará. 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
La aplicación Create React también tiene una configuración ESLint pero tiene un conjunto mínimo de reglas. importación-plugin-eslint Airbnb lo utiliza y este complemento verifica las importaciones indefinidas. Cuando vaya a utilizar la configuración ESLint de Airbnb, le aparecerá el error que se muestra a continuación:
Puedes corregir el error agregando settings prop en su configuración de ESLint. Ese punto de referencia de configuración con el que sus importaciones podrían estar relacionadas src carpeta. Por lo tanto, necesita agregar una actualización de 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 son posibles desde hace mucho tiempo con Webpack. Cuando nombras tu carpeta con alias, necesitas usar PascalCase/CamelCase porque es la convención que se sigue en el paquete net.
