Distribution des messages

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Maintenant que vous avez déclaré vos messages, les avez extraits, envoyés à votre prestataire de traduction et que celui-ci vous a renvoyé le JSON traduit dans le même format, il est temps d'aborder la distribution et la consommation du JSON traduit.

Compilation des messages

Prenons l'exemple de l'extraction de messages, en supposant que nous travaillons avec la version française et que le fichier s'appelle 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"
  }
}

Nous pouvons utiliser @formatjs/cli pour compiler ceci en un fichier JSON utilisable par react-intl :

Ajoutez la commande suivante dans vos scripts du package.json :

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

et exécutez avec 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

Analyse des messages en AST

Nous recommandons de compiler vos messages en AST car cela nous permet d'éviter de les analyser lors de l'exécution. Cela rend votre application plus performante.

Intégration avec un système de gestion de traduction (TMS)

Si votre TMS ou prestataire utilise un format JSON différent, vous pouvez spécifier un formateur personnalisé avec --format <formatFile> qui convertit ce format en Record<string,string> afin que @formatjs/cli puisse le comprendre. Par exemple :

Si votre fournisseur accepte un format comme :

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

vous pouvez exécuter :

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

où formatter.js contient :

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

À l'avenir, nous fournirons par défaut des formateurs compatibles avec les TMS populaires.

Distribution

Bien que chaque application ait son propre pipeline de distribution, le point commun est la capacité à associer une locale à son fichier de traduction. Dans cet exemple, nous supposerons que votre pipeline peut comprendre l'import dynamique :

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