Extracción de Mensajes

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Ahora que has declarado algunos mensajes, es momento de extraerlos.

Instalación

npm

npm i -D @formatjs/cli

yarn

yarn add -D @formatjs/cli

Extracción

Agrega el siguiente comando a los scripts de tu package.json:

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

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

Patrón de Interpolación de ID

Asegúrate de que este patrón coincida con idInterpolationPattern cuando uses babel-plugin-formatjs o @formatjs/ts-transformer en Bundling with formatjs, de lo contrario obtendrás un error MISSING_TRANSLATION.

Dado un archivo con los siguientes mensajes:

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>

ejecutar el comando anterior creará un archivo llamado 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 Mensaje

Durante la extracción, preservaremos los IDs declarados explícitamente e insertaremos un hash como ID para mensajes sin ID. Recomendamos evitar IDs explícitos ya que pueden causar colisiones.

Generación Automática de IDs

Dado que no se recomiendan los IDs manuales, proporcionamos un plugin para babel y un transformador de AST para TypeScript que insertarán automáticamente IDs de mensajes en tu código transpilado. Para más detalles visita Bundling with formatjs.

Integración con sistemas de gestión de traducciones (TMS)

El formato predeterminado generado por @formatjs/cli podría no funcionar con el TMS/proveedor específico que estés usando. Puedes especificar un formateador personalizado con --format <formatFile> que te permite convertir ese formato en algo adaptado a tu TMS. Por ejemplo:

Si tu proveedor acepta un formato como

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

puedes ejecutar

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

donde formatter.js es:

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

También proporcionamos varios formateadores integrados para integrar con TMS de terceros, así que no dudes en crear PRs para agregar más.

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