Distribuzione dei Messaggi

Traduzione Beta Non Ufficiale

Questa pagina è stata tradotta da PageTurner AI (beta). Non ufficialmente approvata dal progetto. Hai trovato un errore? Segnala problema →

Ora che hai dichiarato i tuoi messaggi, li hai estratti, inviati al fornitore di traduzioni e hai ricevuto in cambio il JSON tradotto nello stesso formato, è il momento di spiegare come distribuire e utilizzare il JSON tradotto.

Compilazione dei Messaggi

Prendiamo l'esempio da Estrazione dei Messaggi, supponendo di lavorare sulla versione francese con il file denominato 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"
  }
}

Possiamo utilizzare @formatjs/cli per compilarlo in un file JSON compatibile con react-intl:

Aggiungi il seguente comando agli scripts del tuo package.json:

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

ed esegui 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

Analisi dei messaggi in AST

Raccomandiamo di compilare i messaggi in AST (Abstract Syntax Tree) per evitare l'analisi durante l'esecuzione, migliorando così le prestazioni dell'applicazione.

Integrazione con sistemi di gestione traduzioni (TMS)

Se il tuo TMS/fornitore utilizza un formato JSON diverso, puoi specificare un formattatore personalizzato con --format <formatFile> che converte i dati in Record<string,string> per la comprensione di @formatjs/cli. Esempio:

Se il tuo fornitore accetta un formato come

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

puoi eseguire

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

dove formatter.js è:

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

In futuro forniremo formattatori predefiniti compatibili con i TMS più diffusi.

Distribuzione

Sebbene ogni applicazione abbia una propria pipeline di distribuzione, l'elemento comune è la capacità di associare una lingua al relativo file di traduzione. In questo esempio supponiamo che la tua pipeline supporti l'import dinamico:

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,
  })
}