Como criar um projeto com Vite e implementar Path Mapping

No desenvolvimento de sistemas digitais, me deparei com uma dificuldade de usar o Path Mapping ao criar um projeto React utilizando Vite.

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″]