Zum Hauptinhalt springen

ts-transformer

Inoffizielle Beta-Übersetzung

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

npm-Version

Verarbeitet String-Nachrichten zur Übersetzung aus Modulen, die react-intl verwenden, insbesondere:

  • Analysiert und überprüft, ob Nachrichten ICU-konform sind und keine Syntaxprobleme aufweisen.

  • Entfernt description aus dem Nachrichtendeskriptor, um Bytes zu sparen, da es zur Laufzeit nicht verwendet wird.

  • Option zum Entfernen von defaultMessage aus dem Nachrichtendeskriptor, um Bytes zu sparen, da es zur Laufzeit nicht verwendet wird.

  • Injiziert automatisch eine Nachrichten-ID basierend auf einem spezifischen Muster.

Installation​

npm i @formatjs/ts-transformer

Verwendung​

Die Standard-Nachrichtendeskriptoren für die Standardsprache der Anwendung werden aus folgenden Quellen verarbeitet: defineMessages(), defineMessage(), intl.formatMessage und <FormattedMessage>; alle davon sind benannte Exporte des React Intl-Pakets.

Über ts-loader​

import {transform} from '@formatjs/ts-transformer'

module.exports = {
  ...otherConfigs,
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              getCustomTransformers() {
                return {
                  before: [
                    transform({
                      overrideIdFn: '[sha512:contenthash:base64:6]',
                    }),
                  ],
                }
              },
            },
          },
        ],
      },
    ],
  },
}

Über ts-jest in jest.config.js​

Vorsicht

Erfordert ts-jest@26.4.0 oder höher

// jest.config.js
module.exports = {
  // [...]
  transform: {
    '^.+\\.(ts|tsx)?$': [
      'ts-jest',
      {
        astTransformers: {
          before: [
            {
              path: '@formatjs/ts-transformer/ts-jest-integration',
              options: {
                // options
                overrideIdFn: '[sha512:contenthash:base64:6]',
                ast: true,
              },
            },
          ],
        },
      },
    ],
  },
}

Über ts-patch​

{
  "compilerOptions": {
    "plugins": [
      {
        "transform": "@formatjs/ts-transformer",
        "import": "transform",
        "type": "config",
        "overrideIdFn": "[sha512:contenthash:base64:6]",
        "ast": true
      }
    ]
  }
}

Über rollup-plugin-typescript2​

// rollup.config.js
import typescript from 'rollup-plugin-typescript2'
import {transform} from '@formatjs/ts-transformer'

export default {
  input: './main.ts',

  plugins: [
    typescript({
      transformers: () => ({
        before: [
          transform({
            overrideIdFn: '[sha512:contenthash:base64:6]',
            ast: true,
          }),
        ],
      }),
    }),
  ],
}

Optionen​

overrideIdFn​

Eine Funktion mit der Signatur (id: string, defaultMessage: string, description: string|object) => string, die es ermöglicht, die ID sowohl im extrahierten JavaScript als auch in den Nachrichten zu überschreiben.

Alternativ kann overrideIdFn ein Template-String sein, der nur verwendet wird, wenn die Nachrichten-ID leer ist.

removeDefaultMessage​

Entfernt das Feld defaultMessage im generierten JavaScript nach der Extraktion.

extractSourceLocation​

Legt fest, ob Metadaten zum Speicherort der Nachricht in der Quelldatei extrahiert werden sollen. Bei true existieren file, start und end Felder für jeden extrahierten Nachrichtendeskriptor. Standardwert: false.

additionalComponentNames​

Zusätzliche Komponentennamen, aus denen Nachrichten extrahiert werden sollen, z.B.: ['FormattedFooBarMessage']. HINWEIS: Standardmäßig wird überprüft, ob FormattedMessage aus moduleSourceName importiert wird, um sicherzustellen, dass Variablen-Alias funktioniert. Diese Option führt diese Prüfung nicht durch und ist daher weniger sicher.

additionalFunctionNames​

Zusätzliche Funktionsnamen, aus denen Nachrichten extrahiert werden sollen, z.B.: ['$formatMessage']. Verwenden Sie dies, wenn Sie formatMessage zu etwas Kürzerem wie $t aliasen möchten.

pragma​

Parst spezifische zusätzliche benutzerdefinierte Pragmas. Dies ermöglicht es, bestimmte Dateien mit Metadaten wie project zu markieren. Beispielsweise mit dieser Datei:

// @intl-meta project:my-custom-project
import {FormattedMessage} from 'react-intl'
;<FormattedMessage defaultMessage="foo" id="bar" />

und mit der Option {pragma: "@intl-meta"} wird // @intl-meta project:my-custom-project in der Ergebnisdatei in {project: 'my-custom-project'} geparst.

ast​

Parst defaultMessage vorab in einen AST für eine schnellere Laufzeitleistung. Dieses Flag hat keine Auswirkung, wenn removeDefaultMessage auf true gesetzt ist.

onMsgExtracted(filePath: string, msgs: MessageDescriptor[])​

Callback, der ausgelöst wird, wenn eine Nachricht erkannt wird.

onMetaExtracted(filePath: string, meta: Record<string, string>)​

Callback, der ausgelöst wird, wenn ein pragme-Meta erkannt wird.

preserveWhitespace​

Legt fest, ob Leerzeichen und Zeilenumbrüche erhalten bleiben sollen.

Ein Beispiel zur Integration finden Sie in compile.ts.