Extração de Mensagens

Tradução Beta Não Oficial

Esta página foi traduzida por PageTurner AI (beta). Não é oficialmente endossada pelo projeto. Encontrou um erro? Reportar problema →

Agora que você declarou algumas mensagens, é hora de extraí-las.

Instalação

npm

npm i -D @formatjs/cli

yarn

yarn add -D @formatjs/cli

Extração

Adicione o seguinte comando aos scripts do seu package.json:

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

e execute com 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]'

Padrão de Interpolação de ID

Certifique-se que este padrão corresponde ao idInterpolationPattern quando você usa babel-plugin-formatjs ou @formatjs/ts-transformer em Bundling com formatjs, caso contrário você receberá um erro MISSING_TRANSLATION.

Dado um arquivo com as seguintes mensagens:

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>

executar o comando acima criará um arquivo chamado 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 da Mensagem

Durante a extração, preservaremos IDs declarados explicitamente e inseriremos um hash como ID para mensagens sem identificador. Desaconselhamos IDs explícitos pois podem causar colisões.

Geração Automática de IDs

Como IDs manuais são desaconselhados, fornecemos um plugin para babel e um transformador AST para TypeScript que inserirão automaticamente IDs de mensagens no seu código transpilado. Para detalhes, visite Bundling com formatjs.

Integração com Sistema de Gestão de Traduções (TMS)

O formato padrão gerado pelo @formatjs/cli pode não funcionar com o TMS/fornecedor específico que você está usando. Você pode especificar um formatador personalizado com --format <formatFile> para converter esse formato em algo adaptado ao seu TMS. Por exemplo:

Se seu fornecedor aceitar o formato:

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

você pode executar:

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

onde 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
}

Também fornecemos vários formatadores integrados para integração com TMS de terceiros. Fique à vontade para criar PRs e adicionar mais.

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