# General Translation React SDKs (gt-react, gt-next, gt-react-native): Configurazione di una SPA Bazel URL: https://generaltranslation.com/it/docs/react/guides/spa/configuring-bazel-spa.mdx Docs index: https://generaltranslation.com/llms.txt Description: Come configurare gt-react in un'app React a pagina singola basata su Bazel. Configura il runtime dell'applicazione e, facoltativamente, includi i cataloghi di traduzione generati nel bundle con la build Bazel. Questa guida prepara il runtime dell'applicazione. Contrassegna separatamente i contenuti rivolti agli utenti per la traduzione. ## Configurazione di una SPA React con Bazel [#setup] Inizializza `gt-react` prima dell'esecuzione del punto di ingresso dell'applicazione. ### 1. Installa gt-react Installa l'ultima versione di `gt-react` con il package manager preferito del repository. Salta questo passaggio se è già installato. ### 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 specificate durante il setup fanno fede. 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 di impostazione regionale 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 che GT analizza alla ricerca di contenuti inline; se omesso, vengono usati per impostazione predefinita questi glob JavaScript e TypeScript nelle directory `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 [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) configura le funzioni di traduzione a livello di modulo e attende il caricamento del catalogo iniziale. Chiamala in un modulo bootstrap prima di importare codice che traduce a livello di modulo. Crea `src/index.js` come file di bootstrap e importa l'entry esistente `src/main.jsx` dopo l'inizializzazione. Individua il target Bazel che crea il bundle del browser. Mantieni la regola esistente del progetto, le dipendenze, le dichiarazioni delle sorgenti e le opzioni di build. Non sostituire il bundler né aggiungere una seconda pipeline di build. Il target deve ricevere tutti i file importati dal nuovo bootstrap. Aggiungi l'etichetta npm installata `gt-react` all'elenco delle dipendenze. Aggiungi `gt.config.json` a `srcs` o `data` se non è già incluso da un input dichiarato. Il file di bootstrap viene incluso automaticamente se il target include già la directory sorgente tramite un glob. Quindi modifica il punto di ingresso del browser del target, sostituendo l'entry React esistente con il nuovo file di bootstrap. Per un'applicazione che utilizza la regola `esbuild` di Aspect nella radice del repository, il target risultante può essere simile al seguente: ```python title="BUILD.bazel" load("@aspect_rules_esbuild//esbuild:defs.bzl", "esbuild") esbuild( name = "app", srcs = glob(["src/**"]) + ["gt.config.json"], deps = [ ":node_modules/react", ":node_modules/react-dom", ":node_modules/gt-react", ], entry_point = "src/index.js", format = "esm", output = "app.js", ) ``` Usa le label e gli attributi già definiti nel progetto. Ad esempio, un target in un package Bazel figlio può usare `//:gt.config.json` e `//:node_modules/gt-react` invece di label relative al package radice. Se il bundle dipende da una `js_library` proprietaria, dichiara `gt-react` nel target che gestisce il sorgente che esegue l'importazione, anziché duplicarlo arbitrariamente. Usa una funzione bootstrap async, a meno che il bundle Bazel esistente non supporti già il top-level await. Non modificare il formato di output o il target JavaScript al solo scopo di abilitare il top-level await. ```js title="src/index.js" import { initializeGTSPA } from 'gt-react'; import gtConfig from '../gt.config.json'; async function bootstrap() { await initializeGTSPA(gtConfig); await import('./main'); } void bootstrap(); ``` Non lasciare l'entry originale configurata come seconda entry nel browser. Deve essere renderizzata solo dopo che [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) è stata completata. Esegui il normale target Bazel di build o test del repository per l'applicazione. Non avviare un server persistente di sviluppo o anteprima. ## Caricamento delle traduzioni [#translations] Quando [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) viene richiamata 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 utilizzano `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 integra solo l'impostazione `files.gt.output`. Mantieni i valori `locales` e `defaultLocale` esistenti del progetto; i valori riportati di seguito sono solo esempi e non devono sostituire le impostazioni regionali configurate del progetto. In genere, in un'applicazione basata su Bazel, le traduzioni vengono archiviate nella directory `src/_gt`, così da poterle utilizzare nel codice 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 agli import di essere risolti 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 effettive impostazioni regionali di destinazione 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" {} ``` Assicurati che il target Bazel di riferimento dichiari questi file JSON. Un `glob(["src/**"])` esistente li include; in caso contrario, aggiungili a `srcs` o `data` del target, in base all'API della regola. ### 3. Aggiungi il loader Crea `src/loadTranslations.js` per caricare le traduzioni. Deve risolvere il percorso nella stessa posizione di output configurata in `files.gt.output`. Elenca esplicitamente in `translationLoaders` ogni impostazione regionale di destinazione configurata. Ogni loader deve utilizzare un percorso di importazione letterale affinché Bazel e il bundler sottostante possano individuare tutti i file di traduzione in fase di build. Le voci `fr` e `zh` riportate di seguito corrispondono alla configurazione di esempio di questa guida; usa invece le effettive impostazioni regionali di destinazione configurate per il progetto. ```js title="src/loadTranslations.js" const translationLoaders = { fr: () => import('./_gt/fr.json'), zh: () => import('./_gt/zh.json'), }; export default async function loadTranslations(locale) { const loader = translationLoaders[locale]; if (!loader) { console.warn(`No translations found for locale "${locale}"`); return {}; } const translations = await loader(); return translations.default; } ``` ### 4. Aggiorna l'inizializzatore Aggiorna l'inizializzatore per utilizzare la nuova funzione loader. Mantieni la forma di bootstrap async e l'importazione originale del punto di ingresso dell'applicazione. ```js title="src/index.js" import { initializeGTSPA } from 'gt-react'; import gtConfig from '../gt.config.json'; import loadTranslations from './loadTranslations'; async function bootstrap() { await initializeGTSPA({ ...gtConfig, loadTranslations }); await import('./main'); } void bootstrap(); ``` Esegui nuovamente il target di build o test di Bazel dopo aver aggiunto le traduzioni incluse nel bundle. ## 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.