Quiero usar importaciones absolutas como

import Button from 'components/iu/Button';

En lugar de

import Button from '../../../iu/Button';

La aplicación ha sido creada usando create-react-app. Actualmente, la aplicación no tiene webpack.config.js ni .babelrc. No estoy seguro de hasta qué punto puedo crear estos archivos y agregar la configuración y hasta qué punto la tubería create-react-app maneja todo eso fuera de la vista.

¿Cómo puedo agregar importaciones absolutas al proyecto?

1
user1283776 16 oct. 2018 a las 14:15

2 respuestas

La mejor respuesta

Cree un archivo llamado .env en su directorio raíz (donde está la carpeta src).

Coloque esta línea en el archivo .env.

NODE_PATH src

Ahora puede utilizar la importación absoluta como import Button from 'components/iu/Button';.

Probado en react-create-app 1.x .

4
JaLe 17 oct. 2018 a las 10:55

@JaLe tiene razón, y como dijo, parece que esto solo funciona con create-react-app.

Además, también debe agregar el siguiente archivo a su proyecto para que su IDE pueda brindarle autocompletado correcto de la ruta del módulo:

jsconfig.json

// Set up compilerOptions for VSCode, including how to resolve import statements (needed in accordance with the setup done in ".env")
{
  "compilerOptions": {
    "module": "es6",
    "baseUrl": "./"
  }
}
0
Liran H 27 dic. 2018 a las 15:07