Importação absoluta com Create React App

Henrique Melanda
Jan 31, 2019 · 4 min read

Por padrão, os módulos ES6 no create-react-app usam caminhos relativos, o que é bom, se caso onde os arquivos que você está importando estão relativamente próximos na árvore de arquivos:

import { createGoal } from ‘./actions’import { selectAuth } from ‘./selectors’;import App from ‘../App’;

Mas, usar o caminho relativo é uma dor real quando você começa a lidar com estruturas de árvores profundamente aninhadas, porque você termina com a síndrome de ponto-ponto.

import { editUser } from ‘../../../AppContainer/actions’;import { selectAuth } from ‘../../../AppContainer/selectors;

E o que acontece quando você decide que quer mudar de lugar um arquivo? Ou talvez você queira importar o mesmo módulo em outro arquivo?

Foi bastante tedioso contar quantos pontos você precisou percorrer na primeira vez, mais agora você deve recontar toda vez porque, ao alterar o local de um arquivo, você também altera o caminho relativo em relação a outros arquivos.

E se houvesse uma maneira de importar um arquivo da mesma maneira todo tempo, independente de onde o arquivo estivesse em relação ao outro? Isso é, onde as importações absolutas são úteis:

import { editUser } from ‘containers/AppContainer/actions’;import { selectAuth } from ‘containers/AppContainer/selectors;

Não importa onde você vai importar esses arquivos, o caminho vai ser o mesmo. Não precisa mais contar os pontos.

Implementando importações absolutas no Create-React-App

Depois de analisar um monte de problemas no github, eu finalmente consegui entender as etapas requeridas para implementar importações absolutas em aplicações usando create-react-app em duas etapas.

1- Crie um arquivo ‘.env’ na raiz (no mesmo nível do package.json)

2 - Defina uma variável de ambiente, ‘NODE_PATH’ para ‘src/’

Somente isso

Pelo o que eu entendi, create-react-app é configurado de tal maneira que sua configuração de webpack vai automaticamente pegar o arquivo ‘.env’ e lê a variável de ambiente ‘NODE_PATH’, que pode então ser usado para fazer importações absolutas.

Variáveis de ambiente customizadas funcionam tanto em desenvolvimento quanto em produção porque as variáveis são incorporada durante o tempo de compilação, em vez do tempo de execução, então sua aplicação vai ter acesso ao seu ambiente de ‘process.env’.

As discussões:

https://github.com/facebookincubator/create-react-app/issues/253

Os pull requests

https://github.com/storybooks/storybook/pull/528/files

Aqui está um exemplo de como converter importação relativa para absoluta. Primeiro vamos criar nosso arquivos e pastas.

Nós temos o nosso AppCotnainer que carrega o AppRoutes.

Note como usamos importações relativas. Nós queremos usar importações absolutas.

1- Crie um arquivo ‘.env’ na raiz (no mesmo nível do package.json)

2 . Defina uma variável de ambiente, ‘NODE_PATH’ para ‘src/’

E agora podemos utilizar importações absolutas.

E isso funciona muito bem.

Conclusão

Importações absolutas podem te poupar muito tempo e dor de cabeça porque você não precisa mais contar quantos pontos você precisa toda vez que você importar ou alterar o local de um arquivo. Graças ao create-react-app isto é completamente simples de configurar o ambiente que permite que você faça isso.

Créditos

Absolute Imports with Create React App, escrito originalmente por Kyle Truong


Obrigado por ler este artigo. Espero poder fornecer-lhes algumas informações úteis. Se sim, eu ficaria muito feliz se você recomendasse este post e clicasse no botão do ♥ para que mais pessoas possam ver isso.

Se houver perguntas ou você quiser adicionar algo aqui, por favor, deixe um comentário, ou me procure no Twitter .

Henrique Melanda

Written by

Entusiasta pelo estudo de novas tecnologias, por projetos open source e CSS Evangelista.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade