Migração de projeto e atualização de framework

Vue 2→3, Express→Fastify, Webpack→Vite —— OpenClaw ajuda a migrar lisinho, sem se meter em armadilha

Migração é uma coisa que quem faz sabe o quanto dói

Atualiza um framework, toma cem pancadas

Vue 2 precisa virar Vue 3. Abre o guia de migração e tem 200 páginas. Options API vira Composition API, Vuex vira Pinia, Vue Router mudou de sintaxe —— beleza, mexe aí.

Termina a migração e descobre que a lib de componentes não é compatível. Troca de lib, layout fica uma bagunça. Arruma layout, roda os testes, metade dos testes quebrados. E isso é só frontend, backend tem Python 2 pra 3 pra fazer também……

O pior é quando o chefe pergunta "consegue terminar essa semana?"

OpenClaw: primeiro analisa as diferenças, depois migra passo a passo

Joga o projeto antigo no OpenClaw e ele vai:
1. Escanear todos os arquivos e listar tudo que precisa mudar
2. Ordenar por prioridade: primeiro as mudanças que quebram tudo, depois as APIs deprecadas
3. Gerar código atualizado arquivo por arquivo, explicando cada mudança
4. Assinalar dependências de terceiros incompatíveis com soluções alternativas

Você não precisa mais ler o guia de migração página por página. OpenClaw já leu tudo, e sabe exatamente o que precisa mudar no seu projeto.

3 prompts de migração que cobrem os casos mais comuns

Framework frontend, backend e ferramenta de build, uma de cada.

Migração Vue 2 → Vue 3 Composition API Instrução de ouro

Atualiza esse projeto Vue 2 pra Vue 3, com as seguintes exigências:

1. Reescreve todos os componentes Options API pra Composition API (sintaxe script setup)
2. Migra gerenciamento de estado Vuex pra Pinia
3. Atualiza Vue Router 3 pra Vue Router 4 (cuidado com a mudança na sintaxe de guards)
4. Lida com APIs removidas como $listeners, $attrs, filter
5. Verifica compatibilidade Element UI → Element Plus (ou outra lib de componentes)

Como saída, mostra as modificações por arquivo, explicando o motivo de cada mudança.
No final, lista os problemas de compatibilidade de terceiros que precisam de confirmação manual.

Vue 2 → 3 é a migração frontend mais comum. Recomenda usar Claude Opus 4.6, que entende bem o ecossistema Vue. Pra projetos grandes, melhor migrar por módulo em lotes.

Migração Express.js → Fastify Técnica avançada

Migra essa aplicação Express.js pra framework Fastify:

1. Migração de rotas: Express router vira registro de rotas Fastify
2. Migração de middlewares:
   - body-parser → built-in do Fastify
   - cors → @fastify/cors
   - helmet → @fastify/helmet
   - middlewares customizados → Fastify hooks (onRequest / preHandler)
3. Tratamento de erros: error middleware Express → setErrorHandler do Fastify
4. Objetos request/response: diferenças em req.body / res.json etc
5. Validação: joi / express-validator → validação JSON Schema nativa do Fastify

Mantém todas as interfaces de API existentes iguais, a troca é transparente pro frontend.

Express → Fastify melhora performance bastante (normalmente 2-3x mais rápido), mas migração de middleware é o pulo do gato. Esse prompt cobre as middlewares mais comuns.

Migração Webpack → Vite Iniciante

Ajuda a migrar esse projeto Webpack pra Vite:

1. Cria vite.config.ts correspondendo à configuração do webpack.config.js existente
2. Lida com as seguintes diferenças comuns:
   - require() → import
   - process.env → import.meta.env
   - Configuração CSS modules / SCSS
   - Configuração de alias
   - Configuração de proxy
3. Verifica loaders Webpack incompatíveis, recomenda plugins Vite como alternativa
4. Atualiza scripts do package.json
5. Lida com compatibilidade de dependências CommonJS

Mostra os arquivos de configuração migrados e lista os arquivos de origem que precisam de ajustes.

Migração Webpack → Vite é relativamente simples, pricipalmente a migração de configuração. É marcado como iniciante porque a maioria das mudanças é mecânica e a IA lida bem com isso.

Preparação antes da migração

Antes de deixar o OpenClaw fazer a migração, é bom organizar bem as informações do projeto.

Template de contexto pra migração de projeto

# Informações de migração do projeto

## Stack técnico atual
- Framework: Vue 2.7 + Vuex 3 + Vue Router 3
- Ferramenta de build: Webpack 4
- Lib de componentes: Element UI 2.x
- Versão Node: 16.x

## Stack técnico alvo
- Framework: Vue 3.4 + Pinia + Vue Router 4
- Ferramenta de build: Vite 5
- Lib de componentes: Element Plus 2.x
- Versão Node: 20.x

## Tamanho do projeto
- Quantidade de componentes: ~80
- Quantidade de páginas: ~30
- Diretivas customizadas: 5
- Filters customizados: 8

## Problemas conhecidos
- xxx lib de componentes ainda não tem versão Vue 3
- Alguns trechos de código usam this.$refs pra mexer direto com DOM

OpenClaw vs migração manual

Migração com ajuda OpenClaw

Escaneia automaticamente tudo que precisa ser alterado, nada cai no esquecimento
Gera código atualizado por arquivo, é só copiar e colar
Explica o motivo de cada mudança, tipo um guia de migração customizado
Quando encontra lib de terceiros incompatível, avisa e sugere alternativa
Projeto grande resolvido em dias, projeto pequeno em poucas horas

Migração manual pura

Precisa ler o guia de migração oficial completo (normalmente centenas de páginas)
Procura e mexe arquivo por arquivo manualmente, fácil perder alguma coisa
Quando tem problema é Google e Stack Overflow tudo bem
Só descobre problema com lib de terceiros quando roda tudo
Projeto grande pode levar semanas, cheio de surpresas no caminho

Dica de migração

📋 Em projeto grande, não tenta fazer tudo de uma vez. Migra por módulo em lotes, roda os testes após cada lote, confirma que tá tudo certo antes de passar pro próximo.

⚠️ Antes de migrar, bora ter cobertura de testes completa. Se os testes que tem não são suficientes, primeiro deixa o OpenClaw gerar testes novos, depois começa a migração —— essa ordem é importante.

Esse caso foi útil pra você?