Nachrichtenextraktion

Inoffizielle Beta-Übersetzung

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

Nachdem Sie einige Nachrichten deklariert haben, ist es an der Zeit, diese zu extrahieren.

Installation

npm

npm i -D @formatjs/cli

yarn

yarn add -D @formatjs/cli

Extraktion

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

{
  "scripts": {
    "extract": "formatjs extract"
  }
}

und führen Sie ihn mit npm aus:

npm

npm run extract -- 'src/**/*.ts*' --ignore='**/*.d.ts' --out-file lang/en.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'

yarn

yarn extract 'src/**/*.ts*' --ignore='**/*.d.ts' --out-file lang/en.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'

ID-Interpolationsmuster

Stellen Sie sicher, dass dieses Muster mit idInterpolationPattern übereinstimmt, wenn Sie babel-plugin-formatjs oder @formatjs/ts-transformer in Bundling mit formatjs verwenden, da Sie sonst einen MISSING_TRANSLATION-Fehler erhalten.

Gegeben sei eine Datei mit folgenden Nachrichten:

React

import * as React from 'react'
import {FormattedMessage, useIntl, injectIntl} from 'react-intl'

class PasswordChangeWithIntl extends React.Component {
  render() {
    const {intl} = this.props
    return (
      <li>
        <input
          placeholder={intl.formatMessage({
            defaultMessage: 'New Password',
            description: 'placeholder text',
          })}
        />
        <input
          placeholder={intl.formatMessage({
            id: 'explicit-id',
            defaultMessage: 'Confirm Password',
            description: 'placeholder text',
          })}
        />
      </li>
    )
  }
}

const PasswordChange = injectIntl(PasswordChangeWithIntl)

export function List(props) {
  const intl = useIntl()
  return (
    <section>
      <header>
        <FormattedMessage
          defaultMessage="Control Panel"
          description="title of control panel section"
        />
      </header>
      <ul>
        <li>
          <button>
            <FormattedMessage
              defaultMessage="Delete user {name}"
              description="Delete button"
              values={{
                name: props.name,
              }}
            />
          </button>
        </li>
        <PasswordChange />
      </ul>
    </section>
  )
}

Vue3

<template>
  <section>
    <header>
      {{
        $formatMessage({
          defaultMessage: 'Control Panel',
          description: 'title of control panel section',
        })
      }}
    </header>
    <ul>
      <li>
        <button>
          {{
            $formatMessage(
              {
                defaultMessage: 'Delete user {name}',
                description: 'Delete button',
              },
              {
                name: props.name,
              }
            )
          }}
        </button>
      </li>
      <li>
        <input :placeholder="newPwdPlaceholder" />
        <input :placeholder="confirmPwdPlaceholder" />
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  inject: ['intl'],
  props: ['name'],
  data() {
    return {
      name: this.name,
      newPwdPlaceholder: intl.formatMessage({
        defaultMessage: 'New Password',
        description: 'placeholder text',
      }),
      confirmPwdPlaceholder: intl.formatMessage({
        id: 'explicit-id',
        defaultMessage: 'Confirm Password',
        description: 'placeholder text',
      }),
    }
  },
}
</script>

Durch Ausführen des obigen Befehls wird eine Datei namens lang/en.json erstellt:

{
  "hak27d": {
    "defaultMessage": "Control Panel",
    "description": "title of control panel section"
  },
  "haqsd": {
    "defaultMessage": "Delete user {name}",
    "description": "delete button"
  },
  "19hjs": {
    "defaultMessage": "New Password",
    "description": "placeholder text"
  },
  "explicit-id": {
    "defaultMessage": "Confirm Password",
    "description": "placeholder text"
  }
}

Nachrichten-ID

Während der Extraktion behalten wir explizit deklarierte IDs bei und fügen für Nachrichten ohne ID einen Hash als ID ein. Wir raten von expliziten IDs ab, da sie zu Kollisionen führen können.

Automatische ID-Generierung

Da manuelle IDs nicht empfohlen werden, stellen wir ein babel-Plugin und einen TypeScript-AST-Transformer bereit, die automatisch Nachrichten-IDs in Ihren transpilierten Code einfügen. Weitere Details finden Sie unter Bundling mit formatjs.

Integration von Übersetzungsmanagementsystemen (TMS)

Das von @formatjs/cli generierte Standardformat funktioniert möglicherweise nicht mit dem spezifischen TMS/Anbieter, mit dem Sie arbeiten. Sie können mit --format <formatFile> einen benutzerdefinierten Formatierer angeben, der es Ihnen ermöglicht, das Format in eine für Ihr TMS maßgeschneiderte Form zu konvertieren. Beispiel:

Wenn Ihr Anbieter ein Format wie folgendes akzeptiert:

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

können Sie ausführen:

npm

npm run extract -- "src/**/*.{ts,tsx,vue}" --out-file lang/en.json --id-interpolation-pattern '[sha512:contenthash:base64:6]' --format formatter.js

yarn

yarn extract "src/**/*.{ts,tsx,vue}" --out-file lang/en.json --id-interpolation-pattern '[sha512:contenthash:base64:6]' --format formatter.js

wobei formatter.js wie folgt aussieht:

exports.format = function (msgs) {
  const results = {}
  for (const [id, msg] of Object.entries(msgs)) {
    results[id] = {
      string: msg.defaultMessage,
      comment: msg.description,
    }
  }
  return results
}

Wir bieten auch mehrere integrierte Formatierer zur Integration mit Drittanbieter-TMS-Systemen an, daher können Sie gerne PRs erstellen, um weitere hinzuzufügen.

TMS	--format
BabelEdit	simple
Crowdin Chrome JSON	crowdin
Lingohub	simple
Localize's Simple JSON	simple
Localizely	simple
locize	simple
Lokalise Structured JSON	lokalise
Phrase Strings	simple
POEditor Key-Value JSON	simple
SimpleLocalize JSON	simple
Smartling ICU JSON	smartling
Transifex's Structured JSON	transifex