Zum Hauptinhalt springen

Bündelung mit formatjs

Inoffizielle Beta-Übersetzung

Diese Seite wurde von PageTurner AI übersetzt (Beta). Nicht offiziell vom Projekt unterstützt. Fehler gefunden? Problem melden →

Nachdem Sie nun eine funktionierende Pipeline haben, ist es an der Zeit, tiefer in die Optimierung des Builds mit formatjs einzusteigen. Im Leitfaden zur Nachrichtenextraktion raten wir ausdrücklich von expliziten IDs ab, da sie in großen Anwendungen zu Kollisionen führen können. Zwar kann unser Extrahierer IDs in die extrahierte JSON-Datei einfügen, Sie müssen diese IDs jedoch auch in die kompilierte JS-Ausgabe einfügen. Dieser Leitfaden erklärt, wie Sie das erreichen.

Verwendung von babel-plugin-formatjs​

npm i -D babel-plugin-formatjs

Betrachten wir dieses einfache Beispiel:

import {FormattedMessage} from 'react-intl'

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

Zur Laufzeit wird dies einen Error mit der Meldung ID is required auslösen. Um eine ID in den transpilierten JS-Code einzufügen, können Sie unser babel-plugin-formatjs wie folgt verwenden:

babel.config.json

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

Dies erzeugt den folgenden JS-Code

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

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

Unser Plugin entfernt auch description, da dies nur für Übersetzer und nicht für Endnutzer bestimmt ist.

Verwendung von @formatjs/ts-transformer​

npm i -D @formatjs/ts-transformer

Wenn Sie TypeScript verwenden, sollten Sie für benutzerdefinierte AST-Transformationen Tools wie ts-patch, ts-loader oder ähnliche in Betracht ziehen.

Betrachten wir dieses einfache Beispiel:

import {FormattedMessage} from 'react-intl'

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

ts-loader​

Sie können dies in Ihrer Webpack-Konfiguration für ts-loader hinzufügen.

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/,
    },
  ],
}

Dies erzeugt den folgenden JS-Code

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

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

Unser Transformer entfernt auch description, da dies nur für Übersetzer und nicht für Endnutzer bestimmt ist.