Introdução

A importação relativa é comumente utilizada para importar arquivos em projetos JavaScript. Entretanto, à medida que a base de código cresce em extensão e complexidade, encontrar o caminho correto do arquivo pode se tornar uma tarefa desafiadora durante a depuração do código. Por outro lado, as importações absolutas oferecem um método limpo e consistente para referenciar arquivos, promovendo uma organização mais eficiente do código e facilitando a sua manutenção.

Neste guia, vou ensinar passo a passo como criar importações absolutas em um app React com Vite. Mostrarei como configurar seu projeto, ajustar o arquivo vite.config.js para resolver importações absolutas, importar componentes usando caminhos absolutos e configurar o Intellisense do vscode para reconhecê-los. Ao final, você terá dominado o uso de importações absolutas em seu app React com Vite.

O problema

Ao desenvolver em React, é comum que as declarações de importação se tornem complexas, como por exemplo: import Button from "../../components/Button";. Se o componente Button for movido para outra pasta, a aplicação pode quebrar, exigindo a atualização de todos os caminhos de importação relacionados. Isso pode resultar em atrasos durante a depuração.

Por outro lado, as importações absolutas oferecem uma solução mais robusta. Elas referenciam os arquivos de origem usando um caminho fixo, independentemente da localização do arquivo de importação. Isso simplifica a localização dos arquivos, especialmente em projetos maiores. No Vite React, você pode configurar importações absolutas no arquivo vite.config.js, como no exemplo abaixo:

import Button from "@/components/Button;

Pré-requisitos

• Você deve possuir o Nodejs instalado em seu dispositivo.
• É importante estar familiarizado com a sintaxe de importação e exportação do ES6.
• Além disso, é necessário ter um conhecimento básico de React.

Configurando o projeto React do Vite para importações absolutas

Para configurar um projeto React Vite para importações absolutas, você primeiro precisará criar um aplicativo React usando o Vite. Abaixo, vou guiá-lo rapidamente pelo processo:

yarn create vite vite-app --template react-ts

O comando criará um código de modelo para nosso aplicativo React. Eu nomeei o meu como demo-app. Você pode nomear o seu como desejar. Em seguida, movemo-nos para o diretório do nosso projeto executando o código abaixo na linha de comando:

cd vite-app

Depois de estar no diretório do projeto, execute o comando abaixo para instalar todas as dependências necessárias para o funcionamento do aplicativo:

yarn ou yarn install

Após a instalação das dependências, basta executar o comando abaixo para iniciar o servidor de desenvolvimento:

yarn dev

Se você seguiu as instruções corretamente, você poderá acessar a aplicação pela url: http://localhost:5173/

Vamos fazer algumas alterações no projeto. Crie uma pasta chamada components no diretório src. No diretório components, crie uma nova pasta chamada button. Nesta nova pasta, crie um novo arquivo chamado index.tsx, copie e cole o código abaixo nele e salve o arquivo.

type ButtonProps = {
  label: string;
};
export function Button({ label }: ButtonProps) {
  return <button>{label}</button>;
}

O próximo passo é substituir o código de modelo presente no arquivo App.jsx pelo código abaixo:

import "./App.css";
import { Button } from "./components/button";

function App() {
  return <Button label="Botão" />;
}

export default App;

Com essas mudanças, você poderá ver o botão no seu navegador.

Configurando o projeto para usar importações absolutas

Para configurar seu aplicativo para usar importação absoluta, você precisa fazer algumas alterações no arquivo vite.config.js, que é encontrado na raiz do diretório do seu projeto.

Adicione o código abaixo ao arquivo vite.config.js.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  // trecho adicionado:
  resolve: {
    alias: {
      "@": "/src",
    },
  },
});

O servidor de desenvolvimento será reiniciado assim que você salvar o arquivo. Agora que a importação absoluta foi configurada para o projeto, qualquer arquivo pode ser importado usando o alias criado no arquivo vite.config.js.

Aqui está um exemplo de como o componente button em nosso aplicativo pode ser importado:

import Button from "@/components/button";

Agora, sempre que o Vite encontrar @ no início do nosso caminho de importação durante o processo de desenvolvimento ou construção, ele será resolvido para ./src devido às configurações no arquivo vite.config.js. Isso torna mais fácil localizar o componente, mesmo à medida que sua base de código cresce.

Configurando o IntelliSense do VS Code

Atualmente, ao tentar importar o componente Button, o IntelliSense do VSCode ainda sugere caminhos de arquivo usando caminhos relativos.

Por exemplo, se você tentar importar o componente Button no nosso arquivo App.tsx, o VSCode ainda usará a sintaxe de importação relativa para sugerir a localização do componente.

Isso ocorre porque ainda não configuramos o IntelliSense do VS Code para reconhecer caminhos de importação absolutos. Para configurar o IntelliSense do VS Code, basta adicionar no seu tsconfig.json o seguinte trecho:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"]
    }
  }
}

As configurações do IntelliSense para o seu VSCode serão atualizadas automaticamente assim que o arquivo for salvo. Agora, ao importar novamente o componente Button, a sugestão de caminho de arquivo fornecida pelo IntelliSense do VSCode será o caminho de importação absoluto.

Ao seguir os passos descritos neste guia, você aprendeu como configurar um aplicativo Vite React, como configurar o arquivo vite.config.js para resolver caminhos absolutos em seu aplicativo, como importar componentes usando importações absolutas e como configurar o IntelliSense do VSCode para reconhecer o caminho de importação absoluto em seu aplicativo.