Distribuição de Mensagens

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ê declarou suas mensagens, as extraiu, enviou para seu fornecedor de traduções e recebeu de volta o JSON traduzido no mesmo formato, é hora de abordar como distribuir e consumir o JSON traduzido.

Compilando Mensagens

Vamos usar o exemplo de Extração de Mensagens, assumindo que estamos trabalhando com a versão em francês e o arquivo se chama lang/fr.json:

{
  "hak27d": {
    "defaultMessage": "Panneau de configuration",
    "description": "title of control panel section"
  },
  "haqsd": {
    "defaultMessage": "Supprimer l'utilisateur {name}",
    "description": "delete button"
  },
  "19hjs": {
    "defaultMessage": "nouveau mot de passe",
    "description": "placeholder text"
  },
  "explicit-id": {
    "defaultMessage": "Confirmez le mot de passe",
    "description": "placeholder text"
  }
}

Podemos usar @formatjs/cli para compilar isso em um arquivo JSON consumível pelo react-intl:

Adicione o seguinte comando aos scripts do seu package.json:

{
  "scripts": {
    "compile": "formatjs compile"
  }
}

e execute com npm:

npm

npm run compile -- lang/fr.json --ast --out-file compiled-lang/fr.json

yarn

yarn compile lang/fr.json --ast --out-file compiled-lang/fr.json

Analisando mensagens em AST

Recomendamos compilar suas mensagens em AST (Árvore Sintática Abstrata) pois isso permite pular sua análise durante a execução. Isso torna seu aplicativo mais performático.

Integração com Sistema de Gestão de Traduções (TMS)

Se seu TMS/fornecedor usa um formato JSON diferente, você pode especificar um formatador personalizado com --format <formatFile> que converte para Record<string,string>, permitindo que @formatjs/cli interprete. Por exemplo:

Se seu fornecedor aceitar o formato:

{
  "[id]": {
    "string": "[message]",
    "comment": "[description]"
  }
}

você pode executar:

npm

npm run compile -- lang/fr.json --ast --out-file compiled-lang/fr.json --format formatter.js

yarn

yarn compile lang/fr.json --ast --out-file compiled-lang/fr.json --format formatter.js

onde formatter.js é:

exports.compile = function (msgs) {
  const results = {}
  for (const [id, msg] of Object.entries(msgs)) {
    results[id] = msg.string
  }
  return results
}

Futuramente, forneceremos formatadores compatíveis com TMS populares por padrão.

Distribuição

Embora cada aplicativo tenha seu próprio pipeline de distribuição, o ponto comum é a capacidade de mapear um local para seu arquivo de tradução. Neste exemplo, assumiremos que seu pipeline suporta import dinâmico:

Node

import {createIntl, createIntlCache} from '@formatjs/intl'

function loadLocaleData(locale: string): Promise<Record<string, string>> {
  switch (locale) {
    case 'fr':
      return import('compiled-lang/fr.json')
    default:
      return import('compiled-lang/en.json')
  }
}

// A single cache instance can be shared for all locales
const intlCache = createIntlCache()

async function bootstrapApplication(locale) {
  const messages = await loadLocaleData(locale)
  const intl = createIntl({locale, messages}, intlCache)
  // Now the intl object is localized and ready to use
}

React

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import {IntlProvider} from 'react-intl'

function loadLocaleData(locale: string) {
  switch (locale) {
    case 'fr':
      return import('compiled-lang/fr.json')
    default:
      return import('compiled-lang/en.json')
  }
}

function App(props) {
  return (
    <IntlProvider
      locale={props.locale}
      defaultLocale="en"
      messages={props.messages}
    >
      <MainApp />
    </IntlProvider>
  )
}

async function bootstrapApplication(locale, mainDiv) {
  const messages = await loadLocaleData(locale)
  ReactDOM.render(<App locale={locale} messages={messages} />, mainDiv)
}

Vue3

import VueIntl from 'vue-intl'
import {createApp} from 'vue'

function loadLocaleData(locale: string) {
  switch (locale) {
    case 'fr':
      return import('compiled-lang/fr.json')
    default:
      return import('compiled-lang/en.json')
  }
}

async function bootstrapApplication(locale, mainDiv) {
  const messages = await loadLocaleData(locale)
  const app = createApp(App)
  app.use(VueIntl, {
    locale: 'en',
    defaultLocale: 'en',
    messages,
  })
}