Vai al contenuto principale

Trasformatore TypeScript

Traduzione Beta Non Ufficiale

Questa pagina è stata tradotta da PageTurner AI (beta). Non ufficialmente approvata dal progetto. Hai trovato un errore? Segnala problema →

npm version

Elabora i messaggi stringa per la traduzione da moduli che utilizzano react-intl, nello specifico:

  • Analizza e verifica che i messaggi siano conformi allo standard ICU senza problemi di sintassi.

  • Rimuove description dal descrittore del messaggio per risparmiare byte poiché non utilizzato a runtime.

  • Opzione per rimuovere defaultMessage dal descrittore del messaggio per risparmiare byte poiché non utilizzato a runtime.

  • Inietta automaticamente l'ID messaggio in base a uno schema specifico.

Installazione​

npm i @formatjs/ts-transformer

Utilizzo​

I descrittori dei messaggi predefiniti per la lingua predefinita dell'app saranno elaborati da: defineMessages(), defineMessage(), intl.formatMessage e <FormattedMessage>; tutti esportazioni denominate del pacchetto React Intl.

Tramite 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]',
                    }),
                  ],
                }
              },
            },
          },
        ],
      },
    ],
  },
}

Tramite ts-jest in jest.config.js​

attenzione

Richiede ts-jest@26.4.0 o successivo

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

Tramite ts-patch​

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

Tramite 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,
          }),
        ],
      }),
    }),
  ],
}

Opzioni​

overrideIdFn​

Funzione con firma (id: string, defaultMessage: string, description: string|object) => string che consente di sovrascrivere l'ID sia nel javascript estratto che nei messaggi.

In alternativa, overrideIdFn può essere una stringa template, utilizzata solo se l'ID messaggio è vuoto.

removeDefaultMessage​

Rimuove il campo defaultMessage nel javascript generato dopo l'estrazione.

extractSourceLocation​

Specifica se estrarre i metadati sulla posizione del messaggio nel file sorgente. Se true, saranno presenti i campi file, start e end per ogni descrittore di messaggio estratto. Valore predefinito: false.

additionalComponentNames​

Nomi aggiuntivi di componenti da cui estrarre messaggi, es: ['FormattedFooBarMessage']. NOTA: Di default verifichiamo che FormattedMessage sia importato da moduleSourceName per garantire il funzionamento degli alias. Questa opzione non effettua tale verifica ed è quindi meno sicura.

additionalFunctionNames​

Nomi aggiuntivi di funzioni da cui estrarre messaggi, es: ['$formatMessage']. Usa questa opzione se preferisci aliasare formatMessage con nomi più brevi come $t.

pragma​

Analizza pragma personalizzati aggiuntivi specifici. Consente di taggare file con metadati come project. Esempio con questo file:

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

e con l'opzione {pragma: "@intl-meta"}, analizzeremo // @intl-meta project:my-custom-project in {project: 'my-custom-project'} nel file risultante.

ast​

Pre-analizza defaultMessage in AST per prestazioni runtime migliorate. Questo flag non ha effetto quando removeDefaultMessage è true.

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

Callback attivata ogni volta che viene rilevato un messaggio.

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

Callback attivata ogni volta che viene rilevata una meta pragme.

preserveWhitespace​

Specifica se preservare spazi bianchi e ritorni a capo.

Consulta il file compile.ts per un esempio pratico di integrazione.