Distribución de mensajes

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Ahora que has declarado tus mensajes, los has extraído, enviado a tu proveedor de traducciones y te han devuelto el JSON traducido en el mismo formato, es momento de hablar sobre cómo distribuir y consumir el JSON traducido.

Compilación de mensajes

Tomemos el ejemplo de Extracción de mensajes, asumiendo que estamos trabajando con la versión en francés y el archivo se llama 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 esto en un archivo JSON consumible por react-intl:

Agrega el siguiente comando a los scripts de tu package.json:

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

y ejecuta con 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

Análisis de mensajes en AST

Recomendamos compilar tus mensajes en AST ya que nos permite omitir su análisis durante el tiempo de ejecución. Esto mejora el rendimiento de tu aplicación.

Integración con sistemas de gestión de traducciones (TMS)

Si tu TMS/proveedor usa un formato JSON diferente, puedes especificar un formateador personalizado con --format <formatFile> que lo convierta a Record<string,string> para que @formatjs/cli pueda entenderlo. Por ejemplo:

Si tu proveedor acepta un formato como

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

puedes ejecutar

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

donde formatter.js es:

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

En el futuro, proporcionaremos formateadores que funcionen con TMS populares por defecto.

Distribución

Aunque cada aplicación tiene su propia canalización de distribución, el elemento común es la capacidad de mapear un locale con su archivo de traducción. En este ejemplo asumiremos que tu canalización puede entender 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,
  })
}