Importação absoluta com Create React App

Image for post
Image for post

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’

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’;

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’;

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.

Image for post
Image for post

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/’

Image for post
Image for post

E agora podemos utilizar importações absolutas.

E isso funciona muito bem.

Image for post
Image for post

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 .

Written by

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store