Camille846 / cra-para-vite

Migração de um projeto criado com Create-React-App para Vite

Migração create-react-app para Vite

1. Introdução
2. Principais Diferenças
   1. Abordagem de Compilação
   2. Velocidade de Compilação
   3. Estrutura de Pasta
   4. Opções de Configuração
   5. Bibliotecas Externas
3. Considerações de Escalabilidade
4. Passo a passo para migrar create-react-app para Vite
5. Solução de Problemas
6. Conclusão

Introduçã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.

Principais Diferenças

Abordagem de Compilação

• 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.

Velocidade de Compilação

• 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.

Estrutura de Pasta

• 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".

Opções de Configuração

• 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.

Bibliotecas Externas

• 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.

Considerações de Escalabilidade

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.

Velocidade de Compilação

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.

Babel

O Vite não precisa do Babel para transpilar código moderno, mas oferece suporte caso seja necessário para navegadores mais antigos.

Passo a passo para migrar create-react-app para Vite

1. Ir ao package.json e substituir react-scripts por vite

• 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"
  },

2. Instalar dependências

Remover pasta node_modules e instalar dependências

npm i

3. Instalar o Vite e Vite Plugin

npm i vite @vitejs/plugin-react

obs: Considerar baixar vite-plugin-svgr que transforma SVG em component React

4. Criar arquivo de configuração do Vite: vite.config.js

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react'

export default defineConfig({
    plugins: [reactRefresh()],
})

5. Atualizar e mover o arquivo index.html fora do diretório public

6.Remover qualquer referência %PUBLIC_URL% do arquivo index.html

<link rel="icon" type="image/svg+xml" href="/favicon.svg" />

7. Adicionar módulo script type = "module" no arquivo index.html

<script type="module" src="/src/index.tsx"></script>

8. Atualizar process.env.REACT_APP_VARIABLE

Antes:

process.env.REACT_APP_VARIABLE

Depois:

import.meta.env.REACT_APP_VARIABLE

9. Atualizar variável em process.env

Antes:

REACT_APP_API_BASE

Depois:

VITE_APP_API_BASE

10. Rodando código para visualizar projeto

npm run dev

Solução de Problemas

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';

3. Se deseja usar imports com alias em seu projeto Vite, defina-os da seguinte maneira:

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';

4. Se precisar dar suporte ao Emotion em seu projeto Vite:

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'],
        },
      }),
    ],
  };
});

5.Se deseja abrir o navegador ao iniciar o servidor, use a seguinte configuração do Vite:

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

export default defineConfig(() => {
  return {
    server: {
      open: true,
    },
    build: {
      outDir: 'build',
    },
    plugins: [react()],
  };
});

Conclusão

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