Quando a gente começa a desenvolver com JavaScript vanilla, mais cedo ou mais tarde, nos deparamos com o conceito de modules e entramos no mundo da importação de arquivos com os famosos import e export. Nesse momento, a gente não faz ideia de que ao entrar em uma biblioteca como React, boa parte da experiência vai contar com importações e exportações de componentes, páginas, módulos e afins. E essas importações, por padrão, são relativas.
Importações relativas levam em consideração a localização (ou caminho de pasta) de um arquivo em relação ao outro, ou melhor, a localização do arquivo que você quer importar em relação à localização do arquivo em que você quer importá-lo.
Vamos fazer uma breve introdução sobre caminhos relativos de pastas, mas caso você queira ir direto ao ponto, basta usar o sumário abaixo.
Sumário
Relative imports
Absolute imports
Usando absolute imports com Create-React-App
Usando absolute imports com Vite
Conclusão
Relative imports
Imagine que você tem a estrutura de pastas abaixo e que você está trabalhando no arquivo Home/index.js, e neste arquivo você precisa importar os arquivos HookUseReducer.js e HookUseState.js.
Ao fazer essas importações no React, automaticamente elas serão relativas e escritas da seguinte forma:
import { HookUseReducer } from "../../components/HookUseReducer"
import { HookUseState } from "../../components/HookUseState"
Perceba que é necessário fazer uso do ../ para indicar que nosso caminho de pasta “saia” da pasta atual (/Home) para um nível acima (/pages) e novamente mais um ../ para “sair” de /pages para /src. A partir daí, “entramos” na pasta /components e, depois, acessamos os arquivos.
Agora, imagine se você tiver um arquivo com uma estrutura de pastas muito mais complexa que esta. As importações relativas acabam sendo verbosas e mais complicadas de ler e entender à medida que aumentamos a complexidade dessa estrutura. E com o objetivo de simplificar essas importações e ter uma leitura mais imediata, podemos configurar nosso projeto para usar importações absolutas.
Absolute imports
Recurso lançado na versão 3.0.0 do create-react-app, as importações absolutas levam em consideração a localização do arquivo que estamos importando em relação à raiz do projeto, evitando dessa forma que precisemos usar o ../para navegar entre pastas e arquivos. Veja como nossa importação fica bem mais simples e mais compreensível:
import { HookUseReducer } from "components/HookUseReducer";
import { HookUseState } from "components/HookUseState";
Usar absolute imports em seu projeto traz algumas vantagens, sendo o mais óbvio o que citamos acima. No entanto, caso você precise usar os mesmos arquivos, módulos ou componentes em vários arquivos diferentes, você pode simplesmente copiar e colar as linhas de importações que elas funcionarão em qualquer lugar, sem precisar ser reescritas ou corrigidas.
Além disso, dependendo da sua IDE ou editor de código, caso não esteja utilizando a função autocomplete, seu código fica mais limpo e mais fácil de escrever, além de ser mais fácil identificar onde o arquivo está salvo apenas ao olhar a linha de importação.
Usando absolute imports com Create-React-App
De acordo com a documentação oficial, nós podemos usar importações absolutas com CRA criando um arquivo jsconfig.json na raiz do nosso projeto. No caso de projetos em TypeScript, usamos o arquivo tsconfig.json, que já vai existir por padrão na raiz do projeto.
Para o JavaScript, salve o arquivo jsconfig.json com o conteúdo abaixo. Assim, basicamente indicamos que a raiz do nosso projeto será a pasta /src e que ela já estará implicitamente incluída nos caminhos de pasta:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
Se você estiver usando TypeScript, abra o arquivo tsconfig.json que já existirá na raiz do seu projeto. Nesse arquivo, nenhum conteúdo existente deverá ser modificado, você deve apenas acrescentar o seguinte código:
{
"compilerOptions": {
// código já existente aqui
// acrescentar as linhas abaixo:
"baseUrl": "src"
},
"include": ["src"]
}
Após a configuração acima, pode ser necessário reiniciar sua IDE ou editor de código. Caso você já tenha importações relativas em seu projeto, basta deletar os ../ existentes e tudo deve funcionar normalmente. Simples, não?
Usando absolute imports com Vite
Vimos acima que as importações absolutas são um recurso criado pelo CRA. No entanto, tem aumentado o número de devs que utilizam Vite em seus projetos e a configuração acima acaba sendo incompatível com essa ferramenta. Então, como procedemos?
Felizmente, temos dois pacotes NPM que nos permitem usar importações absolutas no Vite, tanto com JavaScript quanto com TypeScript: o vite-jsconfig-paths e o vite-tsconfig-paths, respectivamente. A configuração pelo Vite requer algumas linhas de código a mais, mas nada complicado.
Para usar os pacotes acima, primeiramente é necessário instalá-los com npm i vite-jsconfig-paths ou npm i vite-tsconfig-paths. Após instalar os pacotes, precisaremos injetá-los na aplicação através da criação de um arquivo vite.config.js (para JavaScript) ou vite.config.ts (para TypeScript). Insira o conteúdo abaixo no arquivo:
// Para o vite.config.js
import { defineConfig } from 'vite'
import jsconfigPaths from 'vite-jsconfig-paths'
export default defineConfig({
plugins: [jsconfigPaths()],
})
// Para o vite.config.ts
import react from "@vitejs/plugin-react";
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'
export default defineConfig({
plugins: [react(), tsconfigPaths()],
})
E, por último, apesar de não ser dito na documentação dos pacotes, é necessário criar os mesmos arquivos com os mesmos conteúdos que citamos lá na configuração com create-react-app. Agora é só reiniciar sua IDE ou editor de código (caso necessário) e começar a usar importações absolutas também no Vite!
Nota adicional: é possível que, caso você utilize o ESLint na configuração AirBnb (com Vite ou CRA), você pode ter o erro
ESLint: Unable to resolve path to module.... Para resolver esse erro, você pode editar o seu eslint-config.json para que ele aceite caminhos relativos à pasta/src:
{
"eslintConfig": {
"extends": ["react-app", "airbnb"],
"settings": {
"import/resolver": {
"node": {
"paths": ["src"],
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
}
}
}
Conclusão
Apesar de trabalhar com o VS Code, que facilita bastante a vida do dev, tenho usado absolute imports em projetos recentes e fico bem satisfeita com a limpeza do código e a facilidade de leitura que esse recurso traz. Além disso, para arquivos muito próximos na sua estrutura de projeto, ainda é possível utilizar relative imports sem problema algum, caso você queira fazer uso de ambos em vista de um código mais limpo ainda. Um xero!
Fontes:
Top comments (0)