Ir para o conteúdo principal

Empacotando com 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 →

Agora que você tem um pipeline funcional, é hora de aprofundar como otimizar o build com formatjs. No guia Extração de Mensagens, recomendamos explicitamente evitar IDs explícitos devido a possíveis colisões em aplicações grandes. Embora nosso extrator possa inserir IDs no arquivo JSON extraído, você também precisará inserir esses IDs na saída JS compilada. Este guia abordará como fazer isso.

Usando babel-plugin-formatjs​

npm i -D babel-plugin-formatjs

Vejamos este exemplo simples:

import {FormattedMessage} from 'react-intl'

<FormattedMessage
  description="A message"
  defaultMessage="My name is {name}"
  values={{
    name: userName,
  }}
/>

Durante a execução, isso lançará um Error informando ID is required. Para injetar um ID no JS transpilado, você pode usar nosso babel-plugin-formatjs conforme abaixo:

babel.config.json

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

Isso produzirá o seguinte JS

const {FormattedMessage} = require('react-intl')

React.createElement(FormattedMessage, {
  id: '179jda',
  defaultMessage: 'My name is {name}',
  values: {
    name: userName,
  },
})
description

Nosso plugin também remove description porque ele é apenas para o tradutor, não para o usuário final.

Usando @formatjs/ts-transformer​

npm i -D @formatjs/ts-transformer

Se você usa TypeScript, para habilitar um transformador AST personalizado, considere usar ts-patch, ts-loader ou similar.

Vejamos este exemplo simples:

import {FormattedMessage} from 'react-intl'

<FormattedMessage
  description="A message"
  defaultMessage="My name is {name}"
  values={{
    name: userName,
  }}
/>

ts-loader​

Você pode adicionar isso na configuração do webpack ts-loader.

import {transform} from '@formatjs/ts-transformer'
// webpack config
module.exports = {
  rules: [
    {
      test: /\.tsx?$/,
      use: [
        {
          loader: 'ts-loader',
          options: {
            getCustomTransformers() {
              return {
                before: [
                  transform({
                    overrideIdFn: '[sha512:contenthash:base64:6]',
                  }),
                ],
              }
            },
          },
        },
      ],
      exclude: /node_modules/,
    },
  ],
}

Isso produzirá o seguinte JS

const {FormattedMessage} = require('react-intl')

React.createElement(FormattedMessage, {
  id: '179jda',
  defaultMessage: 'My name is {name}',
  values: {
    name: userName,
  },
})
description

Nosso transformador também remove description porque ele é apenas para o tradutor, não para o usuário final.