Ir para o conteúdo principal

babel-plugin-formatjs

Tradução Beta Não Oficial

Esta página foi traduzida por PageTurner AI (beta). Não é oficialmente endossada pelo projeto. Encontrou um erro? Reportar problema →

Processa mensagens de texto para tradução de módulos que utilizam react-intl, especificamente:

  • Analisa e verifica se as mensagens são compatíveis com ICU sem problemas de sintaxe.

  • Remove description do descritor de mensagem para economizar bytes, pois não é usado em tempo de execução.

  • Opção para remover defaultMessage do descritor de mensagem para economizar bytes, pois não é usado em tempo de execução.

  • Injeta automaticamente o ID da mensagem com base em um padrão específico.

Instalação​

npm i babel-plugin-formatjs

Uso​

Este plugin do Babel só processa módulos ES6 que import React Intl.

Os descritores de mensagem padrão para o idioma principal do app serão processados de: defineMessages(), defineMessage(), intl.formatMessage e <FormattedMessage>; todos sendo exportações nomeadas do pacote React Intl.

Via babel.config.json (Recomendado)​

babel.config.json

{
  "plugins": [
    [
      "formatjs",
      {
        "idInterpolationPattern": "[sha512:contenthash:base64:6]",
        "ast": true
      }
    ]
  ]
}

Via Node API​

Os descritores de mensagem extraídos estão disponíveis na propriedade metadata do objeto retornado pela API transform() do Babel:

require('@babel/core').transform('code', {
  plugins: ['formatjs'],
}) // => { code, map, ast, metadata['formatjs'].messages, metadata['formatjs'].meta };

Opções​

overrideIdFn​

Função com a assinatura (id: string, defaultMessage: string, description: string|object) => string que permite substituir o ID tanto no JavaScript extraído quanto nas mensagens.

idInterpolationPattern​

Se determinados descritores de mensagem não possuírem ID, este pattern será usado para gerar IDs automaticamente. Padrão: [sha512:contenthash:base64:6]. Consulte nodejs crypto createHash para algoritmos de hash e nodejs buffer docs para codificações de digest.

removeDefaultMessage​

Remove o campo defaultMessage no JS gerado após a extração.

additionalComponentNames​

Nomes adicionais de componentes para extrair mensagens, ex: ['FormattedFooBarMessage']. NOTA: Por padrão verificamos se FormattedMessage é importado de moduleSourceName para garantir que aliases funcionem. Esta opção não faz essa verificação, sendo menos segura.

additionalFunctionNames​

Nomes adicionais de funções para extrair mensagens, ex: ['$formatMessage']. Use se preferir apelidar formatMessage para algo mais curto como $t.

pragma​

Analisa pragmas personalizados adicionais específicos. Permite marcar arquivos com metadados como project. Exemplo com este arquivo:

// @intl-meta project:my-custom-project
import {FormattedMessage} from 'react-intl'
;<FormattedMessage defaultMessage="foo" id="bar" />

e com a opção {pragma: "@intl-meta"}, extraímos // @intl-meta project:my-custom-project para {project: 'my-custom-project'} no arquivo resultante.

ast​

Pré-analisa defaultMessage em AST para melhor desempenho em runtime. Esta flag não tem efeito quando removeDefaultMessage é true.

preserveWhitespace​

Quando definido como true, desativa a remoção de espaços em branco das mensagens.