Bundling avec formatjs

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 votre pipeline fonctionne, il est temps d'approfondir l'optimisation de la compilation avec formatjs. Comme indiqué dans le guide Extraction de messages, nous déconseillons fortement les ID explicites en raison des risques de collision dans les grandes applications. Bien que notre extracteur puisse insérer des ID dans le fichier JSON extrait, vous devrez également les injecter dans le résultat JS compilé. Ce guide explique comment procéder.

Utilisation de babel-plugin-formatjs

npm

npm i -D babel-plugin-formatjs

yarn

yarn add -D babel-plugin-formatjs

Prenons cet exemple simple :

import {FormattedMessage} from 'react-intl'

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

Lors de l'exécution, cela générera une Error indiquant ID is required. Pour injecter un ID dans le JS transpilé, utilisez notre babel-plugin-formatjs comme suit :

babel.config.json

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

Ceci produira le JS suivant :

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

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

Description

Notre plugin supprime également description car il est destiné aux traducteurs, pas aux utilisateurs finaux.

Utilisation de @formatjs/ts-transformer

npm

npm i -D @formatjs/ts-transformer

yarn

yarn add -D @formatjs/ts-transformer

Si vous utilisez TypeScript, pour activer un transformateur AST personnalisé, envisagez d'utiliser ts-patch, ts-loader ou une solution similaire.

Prenons cet exemple simple :

import {FormattedMessage} from 'react-intl'

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

ts-loader

Vous pouvez l'ajouter dans votre configuration webpack pour 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/,
    },
  ],
}

Ceci produira le JS suivant :

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

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

Description

Notre transformateur supprime également description car il est destiné aux traducteurs, pas aux utilisateurs finaux.