Estrazione 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 alcuni messaggi, è il momento di estrarli.

Installazione

npm

npm i -D @formatjs/cli

yarn

yarn add -D @formatjs/cli

Estrazione

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

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

ed esegui con npm:

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]'

Pattern di interpolazione ID

Assicurati che questo pattern corrisponda a idInterpolationPattern quando usi babel-plugin-formatjs o @formatjs/ts-transformer in Bundling con formatjs altrimenti riceverai un errore MISSING_TRANSLATION.

Dato un file contenente i seguenti messaggi:

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>

eseguendo il comando precedente verrà creato un file chiamato lang/en.json:

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

ID messaggio

Durante l'estrazione, preserveremo gli ID dichiarati esplicitamente e inseriremo un hash come ID per i messaggi senza. Sconsigliamo gli ID espliciti poiché possono causare collisioni.

Generazione automatica degli ID

Poiché gli ID manuali sono sconsigliati, abbiamo fornito un plugin per babel e un trasformatore AST per TypeScript che inseriranno automaticamente gli ID messaggio nel codice transpilato. Per maggiori dettagli visita Bundling con formatjs.

Integrazione con sistemi di gestione traduzioni (TMS)

Il formato predefinito generato da @formatjs/cli potrebbe non essere compatibile con il TMS/fornitore specifico che stai utilizzando. Puoi specificare un formattatore personalizzato con --format <formatFile> che ti permette di convertire quel formato in qualcosa adattato al tuo TMS. Ad esempio:

Se il tuo fornitore accetta un formato come

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

puoi eseguire

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

dove formatter.js è:

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

Forniamo anche diversi formattatori integrati per integrazioni con TMS di terze parti, quindi sentiti libero di creare PR per aggiungerne altri.

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