Intlayer Compiler | Extração Automática de Conteúdo para i18n

O que é o Intlayer Compiler?

O Intlayer Compiler é uma ferramenta poderosa projetada para automatizar o processo de internacionalização (i18n) em suas aplicações. Ele escaneia seu código-fonte (JSX, TSX, Vue, Svelte) em busca de declarações de conteúdo, extrai-as e gera automaticamente os arquivos de dicionário necessários. Isso permite que você mantenha seu conteúdo localizado junto aos seus componentes, enquanto o Intlayer gerencia e sincroniza seus dicionários.

Por que Usar o Intlayer Compiler?

• Automação: Elimina a cópia manual e colagem de conteúdo nos dicionários.
• Velocidade: Extração de conteúdo otimizada garantindo que seu processo de build permaneça rápido.
• Experiência do Desenvolvedor: Mantenha as declarações de conteúdo exatamente onde são usadas, melhorando a manutenção.
• Atualizações em Tempo Real: Suporta Hot Module Replacement (HMR) para feedback instantâneo durante o desenvolvimento.

Veja o post do blog Compiler vs. Declarative i18n para uma comparação mais aprofundada.

Por que não usar o Intlayer Compiler?

Embora o compilador ofereça uma excelente experiência "funciona automaticamente", ele também introduz algumas compensações das quais você deve estar ciente:

• Ambiguidade heurística: O compilador deve adivinhar o que é conteúdo voltado para o usuário versus a lógica da aplicação (por exemplo, className="active", códigos de status, IDs de produtos). Em bases de código complexas, isso pode levar a falsos positivos ou strings perdidas que exigem anotações manuais e exceções.
• Extração apenas estática: A extração baseada em compilador depende de análise estática. Strings que existem apenas em tempo de execução (códigos de erro de API, campos CMS, etc.) não podem ser descobertas ou traduzidas pelo compilador sozinho, então você ainda precisa de uma estratégia i18n de tempo de execução complementar.

Para uma comparação arquitetural mais profunda, veja o post do blog Compiler vs. Declarative i18n.

Como alternativa, para automatizar seu processo i18n mantendo controle total sobre seu conteúdo, o Intlayer também fornece um comando de auto-extração intlayer transform (consulte a documentação CLI), ou o comando Intlayer: extract content to Dictionary da extensão Intlayer VS Code (consulte a documentação da extensão VS Code).

Uso

Vite

Para aplicações baseadas em Vite (React, Vue, Svelte, etc.), a maneira mais fácil de usar o compilador é através do plugin vite-intlayer.

Instalação

npm install vite-intlayer

Configuração

Atualize seu vite.config.ts para incluir o plugin intlayerCompiler:

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({  plugins: [    intlayer(),    intlayerCompiler(), // Adiciona o plugin do compilador  ],});

Suporte a Frameworks

O plugin do Vite detecta e lida automaticamente com diferentes tipos de arquivos:

• React / JSX / TSX: Suportado nativamente.
• Vue: Requer @intlayer/vue-compiler.
• Svelte: Requer @intlayer/svelte-compiler.

Certifique-se de instalar o pacote do compilador apropriado para o seu framework:

# Para Vuenpm install @intlayer/vue-compiler# Para Sveltenpm install @intlayer/svelte-compiler

Next.js (Babel)

Para Next.js ou outras aplicações baseadas em Webpack que usam Babel, você pode configurar o compilador usando o plugin @intlayer/babel.

Instalação

npm install @intlayer/babel

Configuração

Atualize seu babel.config.js (ou babel.config.json) para incluir o plugin de extração. Fornecemos um helper getExtractPluginOptions para carregar automaticamente sua configuração do Intlayer.

const {  intlayerExtractBabelPlugin,  intlayerOptimizeBabelPlugin,  getExtractPluginOptions,  getOptimizePluginOptions,} = require("@intlayer/babel");module.exports = {  presets: ["next/babel"],  plugins: [    // Extract content from components into dictionaries    [intlayerExtractBabelPlugin, getExtractPluginOptions()],    // Optimize imports by replacing useIntlayer with direct dictionary imports    [intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],  ],};

Esta configuração garante que o conteúdo declarado em seus componentes seja automaticamente extraído e usado para gerar dicionários durante o processo de build.