Compiling Libraries
Este guia ajuda os autores de bibliotecas a entender como usar o React Compiler para enviar código de biblioteca otimizado para seus usuários.
- Por que Enviar Código Compilado?
- Configurando a Compilação
- Compatibilidade com Versões Anteriores
- Estratégia de Testes
- Solução de Problemas
- Próximos Passos
Por que Enviar Código Compilado?
Como autor de uma biblioteca, você pode compilar o código da sua biblioteca antes de publicá-lo no npm. Isso oferece vários benefícios:
- Melhorias de performance para todos os usuários - Seus usuários da biblioteca recebem código otimizado, mesmo que ainda não estejam usando o React Compiler.
- Nenhuma configuração exigida pelos usuários - As otimizações funcionam “out of the box”.
- Comportamento consistente - Todos os usuários recebem a mesma versão otimizada, independentemente da configuração de build.
Configurando a Compilação
Adicione o React Compiler ao processo de build da sua biblioteca:
npm install -D babel-plugin-react-compiler@latestConfigure sua ferramenta de build para compilar sua biblioteca. Por exemplo, com Babel:
// babel.config.js
module.exports = {
plugins: [
'babel-plugin-react-compiler',
],
// ... outra configuração
};Compatibilidade com Versões Anteriores
Se sua biblioteca suporta versões do React anteriores à 19, você precisará de configuração adicional:
1. Instale o pacote de runtime
Recomendamos instalar o react-compiler-runtime como uma dependência direta:
npm install react-compiler-runtime@latest{
"dependencies": {
"react-compiler-runtime": "^1.0.0"
},
"peerDependencies": {
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
}
}2. Configure a versão de destino
Defina a versão mínima do React que sua biblioteca suporta:
{
target: '17', // Versão mínima suportada do React
}Estratégia de Testes
Teste sua biblioteca com e sem compilação para garantir a compatibilidade. Execute sua suíte de testes existente contra o código compilado e também crie uma configuração de teste separada que ignore o compilador. Isso ajuda a capturar quaisquer problemas que possam surgir do processo de compilação e garante que sua biblioteca funcione corretamente em todos os cenários.
Solução de Problemas
A biblioteca não funciona com versões mais antigas do React
Se sua biblioteca compilada gerar erros no React 17 ou 18:
- Verifique se você instalou
react-compiler-runtimecomo uma dependência. - Verifique se sua configuração
targetcorresponde à sua versão mínima suportada do React. - Certifique-se de que o pacote de runtime esteja incluído no seu bundle publicado.
Conflitos de compilação com outros plugins do Babel
Alguns plugins do Babel podem entrar em conflito com o React Compiler:
- Coloque
babel-plugin-react-compilerno início da sua lista de plugins. - Desative otimizações conflitantes em outros plugins.
- Teste minuciosamente a saída do seu build.
Módulo de runtime não encontrado
Se os usuários virem “Cannot find module ‘react-compiler-runtime’“:
- Certifique-se de que o runtime esteja listado em
dependencies, não emdevDependencies. - Verifique se seu bundler inclui o runtime na saída.
- Verifique se o pacote foi publicado no npm junto com sua biblioteca.
Próximos Passos
- Saiba mais sobre técnicas de depuração para código compilado.
- Verifique as opções de configuração para todas as opções do compilador.
- Explore modos de compilação para otimização seletiva.