Importação absoluta com Create React App

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

facebook/create-react-app

As discussões:

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

A way to define custom environment variables · Issue #102 · facebook/create-react-app

Os pull requests

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

Adding namespaced environment variables to DefinePlugin under REACT_APP_ by eliperelman · Pull…

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 .