Empaquetado con formatjs

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 tienes una canalización funcional, es momento de profundizar en cómo optimizar la compilación con formatjs. En la guía de Extracción de mensajes, recomendamos explícitamente evitar IDs explícitos por posibles colisiones en aplicaciones grandes. Aunque nuestro extractor puede insertar IDs en el archivo JSON extraído, también necesitarás insertarlos en el resultado JS compilado. Esta guía cubrirá cómo hacerlo.

Uso de babel-plugin-formatjs

npm

npm i -D babel-plugin-formatjs

yarn

yarn add -D babel-plugin-formatjs

Tomemos este ejemplo sencillo:

import {FormattedMessage} from 'react-intl'

<FormattedMessage
  description="A message"
  defaultMessage="My name is {name}"
  values={{
    name: userName,
  }}
/>

Durante la ejecución, esto lanzará un Error indicando ID is required. Para inyectar un ID en el JS transpilado, puedes usar nuestro babel-plugin-formatjs como se muestra a continuación:

babel.config.json

{
  "plugins": [
    [
      "formatjs",
      {
        "idInterpolationPattern": "[sha512:contenthash:base64:6]",
        "ast": true
      }
    ]
  ]
}

Esto producirá el siguiente código JS

const {FormattedMessage} = require('react-intl')

React.createElement(FormattedMessage, {
  id: '179jda',
  defaultMessage: 'My name is {name}',
  values: {
    name: userName,
  },
})

description

Nuestro complemento también elimina description porque solo es para el traductor, no para el usuario final.

Uso de @formatjs/ts-transformer

npm

npm i -D @formatjs/ts-transformer

yarn

yarn add -D @formatjs/ts-transformer

Si usas TypeScript, para habilitar transformadores AST personalizados deberías considerar usar ts-patch, ts-loader o herramientas similares.

Tomemos este ejemplo sencillo:

import {FormattedMessage} from 'react-intl'

<FormattedMessage
  description="A message"
  defaultMessage="My name is {name}"
  values={{
    name: userName,
  }}
/>

ts-loader

Puedes agregar esto en tu configuración de webpack para ts-loader.

import {transform} from '@formatjs/ts-transformer'
// webpack config
module.exports = {
  rules: [
    {
      test: /\.tsx?$/,
      use: [
        {
          loader: 'ts-loader',
          options: {
            getCustomTransformers() {
              return {
                before: [
                  transform({
                    overrideIdFn: '[sha512:contenthash:base64:6]',
                  }),
                ],
              }
            },
          },
        },
      ],
      exclude: /node_modules/,
    },
  ],
}

Esto producirá el siguiente código JS

const {FormattedMessage} = require('react-intl')

React.createElement(FormattedMessage, {
  id: '179jda',
  defaultMessage: 'My name is {name}',
  values: {
    name: userName,
  },
})

description

Nuestro transformador también elimina description porque solo es para el traductor, no para el usuario final.