# General Translation React SDKs (gt-react, gt-next, gt-react-native): Configurazione di una SPA webpack URL: https://generaltranslation.com/it/docs/react/guides/spa/configuring-webpack-spa.mdx Docs index: https://generaltranslation.com/llms.txt Description: Come configurare gt-react in un'app React a pagina singola basata su webpack. Configura il runtime dell'applicazione e, facoltativamente, includi i cataloghi di traduzione generati nella build webpack. Questa guida prepara il runtime dell'applicazione. Contrassegna separatamente i contenuti destinati agli utenti per la traduzione. ## Configurazione di una SPA React con webpack [#setup] Inizializza `gt-react` prima dell'esecuzione dell'entry point dell'applicazione. ### 1. Installa gt-react Installa l'ultima versione di `gt-react` usando il package manager preferito del repository. Se è già installato, salta questo passaggio. ### 2. Aggiungi un file `gt.config.json` nella radice del progetto Aggiungi un file `gt.config.json` nella radice del progetto. Questo file conterrà la configurazione del package `gt-react`. Le impostazioni regionali già presenti nel progetto o fornite all'attività di configurazione fanno testo. Mantieni eventuali valori esistenti di `locales` e `defaultLocale`. I valori riportati di seguito sono solo esempi. Se il progetto non dispone di una configurazione delle impostazioni regionali, non dedurre i requisiti relativi alle impostazioni regionali da questi esempi. ```json title="gt.config.json" { "defaultLocale": "en", "locales": ["fr", "de"] } ``` Il campo facoltativo [`src`](/docs/cli/reference/config#src) specifica i file sorgente in cui GT cerca contenuti inline; se omesso, usa per impostazione predefinita questi glob JavaScript e TypeScript in `src`, `app`, `pages` e `components`: ```json title="gt.config.json" { "defaultLocale": "en", "locales": ["fr", "de"], "src": [ "src/**/*.{js,jsx,ts,tsx}", "app/**/*.{js,jsx,ts,tsx}", "pages/**/*.{js,jsx,ts,tsx}", "components/**/*.{js,jsx,ts,tsx}" ] } ``` ### 3. Inizializza la libreria Inizializza la libreria con [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) prima che l'applicazione venga renderizzata o importi moduli che usano funzioni di traduzione a livello di modulo. Crea un file bootstrap accanto all'attuale file entry dell'applicazione. In questo esempio, l'entry originale è `src/main.tsx` e il nuovo file bootstrap è `src/index.ts`. Fai puntare la configurazione `entry` esistente di webpack al file bootstrap. Mantieni tutte le altre impostazioni di build e l'eventuale struttura esistente dell'oggetto entry. ```js title="webpack.config.mjs" export default { // ...le options esistenti del progetto entry: './src/index.ts', }; ``` webpack inserisce in genere l'entry compilata nell'HTML tramite `HtmlWebpackPlugin`, quindi non aggiungere un secondo tag script se il progetto utilizza già un plugin HTML. Se invece l'HTML fa riferimento direttamente all'entry sorgente originale, aggiorna tale riferimento al file bootstrap. Quindi inizializza GT e importa dinamicamente l'entry originale solo al termine dell'inizializzazione. L'applicazione di riferimento webpack supporta il top-level await: ```ts title="src/index.ts" import { initializeGTSPA } from 'gt-react'; import gtConfig from '../gt.config.json'; await initializeGTSPA(gtConfig); await import('./main'); // renderizza l'app solo dopo che GT è pronto ``` Se il target di compilazione webpack esistente non supporta top-level await, non modificarlo solo per questa configurazione. Usa invece una funzione di bootstrap async: ```ts title="src/index.ts" import { initializeGTSPA } from 'gt-react'; import gtConfig from '../gt.config.json'; async function bootstrap() { await initializeGTSPA(gtConfig); await import('./main'); } void bootstrap(); ``` ## Caricamento delle traduzioni [#translations] Quando [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) viene chiamata senza una funzione [`loadTranslations`](/docs/react/reference/functions/load-translations), il runtime carica le traduzioni dalla CDN di General Translation solo se è disponibile un [`projectId`](/docs/react/reference/config#project-id). Per includere i cataloghi nel bundle dell'applicazione, configura un percorso di output e un loader corrispondente. I passaggi seguenti usano `src/_gt/[locale].json`. ### 1. Aggiorna la configurazione Imposta `files.gt.output` sul percorso in cui la CLI deve scrivere i file di traduzione generati. Aggiungi o unisci solo l'impostazione `files.gt.output`. Mantieni i valori `locales` e `defaultLocale` esistenti del progetto; i valori mostrati di seguito sono solo esempi e non devono sostituire le impostazioni regionali configurate del progetto. In genere, in un'applicazione basata su webpack, le traduzioni vengono archiviate nella directory `src/_gt`. In questo modo webpack può includere i moduli di traduzione nel bundle dell'applicazione. ```json title="gt.config.json" { "locales": ["fr", "zh"], "defaultLocale": "en", "files": { "gt": { "output": "src/_gt/[locale].json" } } } ``` ### 2. Aggiungi gli stub Crea un file JSON vuoto per ogni impostazione regionale di destinazione già configurata in `gt.config.json`, escludendo l'impostazione regionale predefinita. Questi stub consentono di risolvere gli import prima che esistano i bundle di traduzione. I file `fr` e `zh` riportati di seguito illustrano la configurazione di esempio di questa guida; crea invece i file per le impostazioni regionali di destinazione effettivamente configurate nel progetto. Se non sono configurate impostazioni regionali di destinazione, non inventarne né creare file placeholder. ```json title="src/_gt/fr.json" {} ``` ```json title="src/_gt/zh.json" {} ``` ### 3. Aggiungi il loader Crea `src/loadTranslations.ts` per caricare le traduzioni. Deve puntare alla stessa posizione di output configurata in `files.gt.output`. ```ts title="src/loadTranslations.ts" export default async function loadTranslations(locale: string) { const translations = await import(`./_gt/${locale}.json`); return translations.default; } ``` ### 4. Aggiornare l'initializer Aggiornare l'initializer affinché utilizzi la nuova funzione loader. Mantenere la forma di bootstrap con top-level await o funzione async utilizzata dall'applicazione. ```ts title="src/index.ts" import { initializeGTSPA } from 'gt-react'; import gtConfig from '../gt.config.json'; import loadTranslations from './loadTranslations'; await initializeGTSPA({ ...gtConfig, loadTranslations }); await import('./main'); ``` ## Next steps - /docs/react/guides/spa/internationalizing-react-spa - /docs/react/guides/developing-spa-translations - /docs/react/guides/storing-translations - /docs/react/guides/managing-locales ## Sitemap See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.