Extraction 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é des messages, il est temps de les extraire.

Installation

npm

npm i -D @formatjs/cli

yarn

yarn add -D @formatjs/cli

Extraction

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

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

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

Modèle d'interpolation d'ID

Assurez-vous que ce modèle corresponde à idInterpolationPattern lorsque vous utilisez babel-plugin-formatjs ou @formatjs/ts-transformer dans le Bundling avec formatjs, sinon vous obtiendrez une erreur MISSING_TRANSLATION.

Pour un fichier contenant les messages suivants :

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>

l'exécution de la commande ci-dessus créera un fichier 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 de message

Lors de l'extraction, nous conservons les IDs explicitement déclarés et insérons un hash comme ID pour les messages sans ID. Nous déconseillons les IDs explicites car ils peuvent provoquer des collisions.

Génération automatique des IDs

Les IDs manuels étant déconseillés, nous fournissons un plugin babel et un transformateur AST TypeScript qui insèrent automatiquement les IDs de messages dans votre code transpilé. Pour plus de détails, consultez Bundling avec formatjs.

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

Le format par défaut généré par @formatjs/cli peut ne pas convenir au TMS/fournisseur spécifique que vous utilisez. Vous pouvez spécifier un formateur personnalisé avec --format <formatFile> pour adapter le format à votre TMS. Par exemple :

Si votre fournisseur accepte un format comme :

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

vous pouvez exécuter :

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

où formatter.js contient :

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

Nous fournissons également plusieurs formateurs intégrés pour l'intégration avec des TMS tiers. N'hésitez pas à proposer des PR pour en ajouter d'autres.

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