- Introdução
- Principais Diferenças
- Considerações de Escalabilidade
- Passo a passo para migrar create-react-app para Vite
- Solução de Problemas
- Conclusão
Este guia destaca as razões para considerar a migração do Create React App (CRA) para o Vite, uma ferramenta de compilação de frontend. O Vite oferece uma abordagem mais rápida e moderna em comparação com o webpack, ferramenta utilizada pelo CRA no ecossistema JavaScript.
-
CRA: Utiliza webpack, compilando todo o código antecipadamente, levando a tempos de compilação mais longos.
-
Vite: Adota compilação em tempo de execução, compilando módulos individualmente sob demanda, resultando em tempos de compilação mais rápidos.
-
Vite: Compilação rápida devido à abordagem em tempo de execução e uso de ESM (ECMAScript Modules).
-
CRA: Compilação mais lenta, compilando todo o código a cada modificação.
-
Vite: Estrutura simplificada com pastas "src" e "public".
-
CRA: Além de "src", há outras pastas e arquivos que são gerados automaticamente pelo webpack durante a compilação do aplicativo, por exemplo, além de "public", há também a pasta "build".
-
Vite: Configuração mínima com arquivo "vite.config.js" para personalizações.
-
CRA: Oferece um conjunto amplo de opções e usa o arquivo "react-scripts" para configuração.
-
Vite: Usa importação de módulos dinâmicos ESM para carregamento sob demanda.
-
CRA: Suporta bibliotecas via npm, incluindo-as diretamente no código.
Ambas as ferramentas são capazes de lidar com projetos escaláveis, mas o Vite destaca-se pela velocidade de compilação e flexibilidade na estrutura de pasta.
O Vite é consistentemente mais rápido, evitando a necessidade de empacotamento antes de enviar para o navegador. Utiliza um servidor de desenvolvimento eficiente com cache inteligente.
O Vite não precisa do Babel para transpilar código moderno, mas oferece suporte caso seja necessário para navegadores mais antigos.
- Antes
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
- Depois
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"dev": "vite",
"start": "vite start",
"build": "vite build",
"serve": "vite preview"
},
Remover pasta node_modules
e instalar dependências
npm i
npm i vite @vitejs/plugin-react
import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react'
export default defineConfig({
plugins: [reactRefresh()],
})
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<script type="module" src="/src/index.tsx"></script>
Antes:
process.env.REACT_APP_VARIABLE
Depois:
import.meta.env.REACT_APP_VARIABLE
Antes:
REACT_APP_API_BASE
Depois:
VITE_APP_API_BASE
npm run dev
1. Se você encontrar o erro ReferenceError: process is not defined
de uma biblioteca, verifique se ela está em execução com a seguinte solução alternativa:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig(() => {
return {
define: {
'process.env': {},
},
build: {
outDir: 'build',
},
plugins: [react()],
};
});
2. Se deseja continuar usando SVGs em seu projeto Vite, instale o vite-plugin-svgr como dependência de desenvolvimento. Em seguida, inclua-o no arquivo de configuração do Vite
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';
export default defineConfig(() => {
return {
build: {
outDir: 'build',
},
plugins: [
react(),
// Opções do svgr: https://react-svgr.com/docs/options/
svgr({ svgrOptions: { icon: true } }),
],
};
});
Isso permite que você importe SVGs como componentes React:
// import { ReactComponent as MyIcon } from './my-icon.svg';
import path from 'path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';
export default defineConfig(() => {
return {
resolve: {
alias: {
'~': path.resolve(__dirname, './src'),
},
},
build: {
outDir: 'build',
},
plugins: [react()],
};
});
Isso permite que você importe de pastas dentro da pasta /src:
// import Button from '~/components/Button';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig(() => {
return {
build: {
outDir: 'build',
},
plugins: [
react({
jsxImportSource: '@emotion/react',
babel: {
plugins: ['@emotion/babel-plugin'],
},
}),
],
};
});
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig(() => {
return {
server: {
open: true,
},
build: {
outDir: 'build',
},
plugins: [react()],
};
});
Em resumo, o Vite oferece vantagens significativas em termos de velocidade, flexibilidade e facilidade de configuração em comparação com o Create React App. No entanto, a escolha entre eles depende das necessidades específicas do projeto e da preferência por abordagens