Verteilung von Nachrichten

Inoffizielle Beta-Übersetzung

Diese Seite wurde von PageTurner AI übersetzt (Beta). Nicht offiziell vom Projekt unterstützt. Fehler gefunden? Problem melden →

Nachdem Sie Ihre Nachrichten deklariert, extrahiert und an Ihren Übersetzungsdienstleister gesendet haben und dieser Ihnen die übersetzte JSON-Datei im selben Format zurückgegeben hat, ist es an der Zeit, die Verteilung und Nutzung dieser übersetzten JSON-Datei zu besprechen.

Nachrichten kompilieren

Nehmen wir das Beispiel aus der Nachrichtenextraktion, wobei wir von der französischen Version ausgehen und die Datei lang/fr.json heißt:

{
  "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"
  }
}

Wir können @formatjs/cli verwenden, um dies in eine für react-intl nutzbare JSON-Datei zu kompilieren:

Fügen Sie den folgenden Befehl zu Ihren package.json-scripts hinzu:

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

und führen Sie ihn mit npm aus:

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

Nachrichten in AST parsen

Wir empfehlen, Ihre Nachrichten in AST zu kompilieren, da wir dadurch das Parsing zur Laufzeit überspringen können. Dies verbessert die Leistung Ihrer Anwendung.

Integration von Übersetzungsmanagementsystemen (TMS)

Falls Ihr TMS/Anbieter ein anderes JSON-Format verwendet, können Sie mit --format <formatFile> einen benutzerdefinierten Formatter angeben, der dieses in Record<string,string> konvertiert, damit @formatjs/cli es versteht. Beispiel:

Wenn Ihr Anbieter ein Format wie folgendes akzeptiert:

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

können Sie ausführen:

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

wobei formatter.js wie folgt aussieht:

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

In Zukunft werden wir standardmäßig Formatierer bereitstellen, die mit gängigen TMSes funktionieren.

In Zukunft werden wir standardmäßig Formatter für gängige TMS-Anbieter bereitstellen.

Während jede Anwendung eine eigene Verteilungspipeline hat, besteht die gemeinsame Anforderung darin, eine Lokalisierung ihrer Übersetzungsdatei zuordnen zu können. In diesem Beispiel gehen wir davon aus, dass Ihre Pipeline dynamische import-Anweisungen versteht:

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