Como automatizar suas traduções JSON do react-intl usando Intlayer

www.youtube.com

Open embedded page in fullscreen

Índice

O que é o Intlayer?

Intlayer é uma biblioteca inovadora e de código aberto para internacionalização, projetada para resolver as limitações das soluções tradicionais de i18n. Ela oferece uma abordagem moderna para o gerenciamento de conteúdo em aplicações React.

Veja uma comparação concreta com react-intl em nosso post no blog react-i18next vs. react-intl vs. Intlayer.

Por que combinar Intlayer com react-intl?

Embora o Intlayer forneça uma excelente solução i18n independente (veja nosso guia de integração com React), você pode querer combiná-lo com o react-intl por várias razões:

1. Base de código existente: Você possui uma implementação estabelecida do react-intl e deseja migrar gradualmente para a melhor experiência de desenvolvedor do Intlayer.
2. Requisitos legados: Seu projeto requer compatibilidade com plugins ou fluxos de trabalho existentes do react-intl.
3. Familiaridade da equipe: Sua equipe está confortável com o react-intl, mas deseja um melhor gerenciamento de conteúdo.
4. Uso dos recursos do Intlayer: Você quer usar recursos do Intlayer como declaração de conteúdo, automação de traduções, testes de traduções e mais.

Para isso, o Intlayer pode ser implementado como um adaptador para o react-intl para ajudar a automatizar suas traduções JSON em pipelines CLI ou CI/CD, testar suas traduções e muito mais.

Este guia mostra como aproveitar o sistema superior de declaração de conteúdo do Intlayer enquanto mantém a compatibilidade com o react-intl.

Guia passo a passo para configurar o Intlayer com react-intl

1. 1

   Instalar dependências

   Instale os pacotes necessários:

   bash

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   npx intlayer init --interactive
   

   a flag --interactive é opcional. Use intlayer-cli init se você for um agente de IA.

   Este comando detectará seu ambiente e instalará os pacotes necessários. Por exemplo:

   bash

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   npm install intlayer @intlayer/sync-json-plugin --save-dev
   

   Descrição dos pacotes:

   • intlayer: Biblioteca principal para gerenciamento de internacionalização, declaração de conteúdo e construção
   • @intlayer/sync-json-plugin: Plugin para exportar declarações de conteúdo do Intlayer para o formato JSON compatível com react-intl
2. 2

   Implemente o plugin Intlayer para encapsular o JSON

   Crie um arquivo de configuração do Intlayer para definir os seus locais suportados:

   Se você também quiser exportar dicionários JSON para react-intl, adicione o plugin syncJSON:

   intlayer.config.ts

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   import { Locales, type IntlayerConfig } from "intlayer";
   import { syncJSON } from "@intlayer/sync-json-plugin";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
       defaultLocale: Locales.ENGLISH,
     },
     plugins: [
       syncJSON({
         format: "icu",
         source: ({ key, locale }) => `./intl/messages/${locale}/${key}.json`,
       }),
     ],
   };
   
   export default config;
   

   O plugin syncJSON irá automaticamente encapsular o JSON. Ele irá ler e escrever os arquivos JSON sem alterar a arquitetura do conteúdo.

   Se você quiser fazer coexistir esse JSON com arquivos de declaração de conteúdo do Intlayer (.content files), o Intlayer procederá da seguinte forma:

   plaintext

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   1. carregar tanto os arquivos JSON quanto os arquivos de declaração de conteúdo e transformá-los em um dicionário do Intlayer.
   2. se houver conflitos entre o JSON e os arquivos de declaração de conteúdo, o Intlayer realizará a mesclagem de todos esses dicionários. Dependendo da prioridade dos plugins e da do arquivo de declaração de conteúdo (tudo é configurável).

   Se alterações forem feitas usando o CLI para traduzir o JSON, ou usando o CMS, o Intlayer atualizará o arquivo JSON com as novas traduções.

   Para ver mais detalhes sobre o plugin syncJSON, por favor consulte a documentação do plugin syncJSON.

3. 3

   Implementar traduções JSON por componente

   Opcional

   Por padrão, o Intlayer irá carregar, mesclar e sincronizar tanto os arquivos JSON quanto os arquivos de declaração de conteúdo. Veja a documentação da declaração de conteúdo para mais detalhes. Mas se preferir, usando um plugin do Intlayer, você também pode implementar o gerenciamento por componente de JSON localizado em qualquer lugar da sua base de código.

   Para isso, você pode usar o plugin loadJSON.

   intlayer.config.ts

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   import { Locales, type IntlayerConfig } from "intlayer";
   import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
       defaultLocale: Locales.ENGLISH,
     },
   
     // Mantenha seus arquivos JSON atuais sincronizados com os dicionários do Intlayer
     plugins: [
       /**
        * Carregará todos os arquivos JSON na pasta src que correspondem ao padrão {key}.i18n.json
        */
       loadJSON({
         source: ({ key }) => `./src/**/${key}.i18n.json`,
         locale: Locales.ENGLISH,
         priority: 1, // Garante que esses arquivos JSON tenham precedência sobre os arquivos em `./locales/en/${key}.json`
       }),
       /**
        * Carregará e escreverá a saída e as traduções de volta nos arquivos JSON no diretório de locais
        */
       syncJSON({
         format: "icu",
         source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
         priority: 0,
       }),
     ],
   };
   
   export default config;
   

   Isso carregará todos os arquivos JSON no diretório src que correspondem ao padrão {key}.i18n.json e os carregará como dicionários do Intlayer.

Configuração do Git

É recomendado ignorar os arquivos gerados automaticamente pelo Intlayer:

# Ignorar arquivos gerados pelo Intlayer
.intlayer

Esses arquivos podem ser regenerados durante seu processo de build e não precisam ser commitados no controle de versão.

Extensão do VS Code

Para uma melhor experiência de desenvolvimento, instale a extensão oficial Intlayer VS Code Extension:

Instalar no VS Code Marketplace