No desenvolvimento de sistemas digitais, me deparei com uma dificuldade de usar o Path Mapping ao criar um projeto React utilizando Vite.
[adrotate banner=”4″]
O que é Vite?
O Vite foi criado pelo Evan You, que também é o criador do Vue.js. Vite significa “rápido” em francês, e se pronuncia /vit/. Essa é uma ferramenta de compilação Javascript que simplifica a maneira como construímos e desenvolvemos front-end de aplicações web.
Além disso, os templates suportados oficialmente pelo Vite são:
- React Js;
- Vue Js;
- Vanilla Js;
- Preact Js;
- Lit Js;
- Svelte Js.
Além disso, em todos eles nós temos a opção com o template em Typescript.
Porque utilizar Vite?
Atualmente, a grande maioria dos navegadores já suportam os ESModules. Ou seja, conseguimos fazer importações entre arquivos Javascript de maneira nativa, o que não era possível. Anteriormente, era necessário a utilização de ferramentas como Babel, Webpack, entre outros.
Sendo assim, muitas funções dessas ferramentas não são mais necessárias. E é disso que o Vite se aproveita.
O Vite faz jus ao nome, sendo bem veloz nas renderizações de fast refresh e também na criação de projetos. Pensando nisso, trouxe também neste artigo a criação de um projeto com essa aplicação.
Criando um projeto utilizando Vite
Para criar um projeto Vite, é recomendado que tenhamos o Node.js da versão 12.2.0 para cima. Isso porque alguns templates serão necessários as versões mais novas.
Assim, para criar seu projeto, dentro do diretório desejado, abra o terminal e execute o comando:
npm create vite@latest
Ou com yarn e pmpn:
yarn create vite
pnpm create vite
Utilizando os templates na criação do projeto
Para criar um projeto Vite com um template específico, mostro aqui o exemplo de um projeto Vue.js:
# npm 6.x
npm create vite@latest nome-do-projeto --template vue
# npm 7+, necessário mais 2 "-" antes do template:
npm create vite@latest nome-do-projeto -- --template vue
# yarn
yarn create vite nome-do-projeto --template vue
# pnpm
pnpm create vite nome-do-projeto -- --template vue
E, para criar um projeto React e Typescript, veja o exemplo a seguir:
# sem passar o nome no comando
npm create vite
# passando o nome no comando
npm create vite my-app
Após rodar esse comando, se você não adicionou diretamente o nome do seu projeto no comando, o Vite irá pedir para você digitar o nome do projeto. Então, você deverá selecionar o framework, que no exemplo abaixo foi react, e depois se você quer o template com ou sem Typescript.
Caso seja a primeira vez que você cria um projeto Vite, ele irá pedir sua instalação na sua máquina. Então, basta confirmar apertando ‘y’ e prosseguir com a criação:
O Vite, por padrão, não vem com as definição de qual gerenciador de pacotes vamos utilizar, ele não roda a instalação de dependências do projeto. Então, após a criação do projeto, temos que instalar as dependências com algum dos comandos a seguir:
yarn install
ou
npm install
ou então
yarn
E, por fim, para rodar nossa aplicação, vamos executar o comando:
npm run dev
ou
yarn dev
E pronto, nossa projeto foi criado e já está rodando.
Implementando Path Mapping
Como eu tinha dito, um tempo atrás tive dificuldade para utilizar o Path Mapping em um projeto Vite. Entretanto, consegui resolver, e vou te mostrar aqui como.
Para que serve o Path Mapping?
O Path Mapping é uma maneira de importar nossos elementos de maneira mais fácil e elegante, sem um monte de ‘../../../’. Com isso, podemos fazer importações apenas com um ‘@’. Veja a diferença:
# sem path mapping
import Header from '../../../components/Header';
# com path mapping
import Header from '@components/Header';
Dessa forma, a aplicação fica muito mais prática e organizada.
Instalação e configuração
Primeiro, vamos instalar como dependência de desenvolvimento o ‘vite-tsconfig-paths’ com o seguinte comando:
npm install vite-tsconfig-paths -D
Depois, no arquivo ‘vite.tsconfig.ts’ vamos colocar o tsconfigPaths dentro dos plugins:
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), tsconfigPaths()],
});
Seu arquivo ficará assim, com os plugins contendo o React e o tsconfigPaths. Após isso, vamos reiniciar nosso projeto e podemos configurar as nossas Paths.
Configurando nossas Paths
No arquivo ‘tsconfig.json’, dentro de compilerOptions, vamos adicionar nossas configurações colocando primeiro nossa baseUrl, que será de onde nossas rotas vão partir, e depois nossas paths. Veja o exemplo a seguir:
"baseUrl": "./src",
"paths": {
"@components/*": ["./components/*"],
"@pages/*": ["./pages/*"],
"@constant/*": ["./constant/*"],
"@store/*": ["./store/*"]
}
Então, agora está pronto e podemos utilizar no nosso projeto normalmente:
import Header from "@components/Header";
import { cars } from "@store/cars.json";
Veja também:
Como evitar renderizações desnecessárias com React.memo
Conclusão
O Vite é uma excelente ferramenta para utilizar e criar seus projetos front-end Javascript ou Typescript, e utilizando o Path Mapping fica ainda melhor e mais elegante. Com ele, você pode esquecer o famoso “create-react-app”.
Autor: João Leonardo Bucch de Moraes.
[adrotate banner=”5″]