# General Translation React SDKs (gt-react, gt-next, gt-react-native): Configuration d’une SPA Bazel URL: https://generaltranslation.com/fr/docs/react/guides/spa/configuring-bazel-spa.mdx Docs index: https://generaltranslation.com/llms.txt Description: Comment configurer gt-react dans une application React monopage utilisant Bazel. Configurez le runtime de l’application et intégrez éventuellement les catalogues de traduction générés à votre build Bazel. Ce guide prépare le runtime de l’application. Marquez séparément le contenu destiné aux utilisateurs pour traduction. ## Configuration d’une SPA React avec Bazel [#setup] Initialisez `gt-react` avant l’exécution du point d’entrée de l’application. ### 1. Installer gt-react Installez la dernière version de `gt-react` avec le gestionnaire de paquets privilégié du dépôt. S’il est déjà installé, ignorez cette étape. ### 2. Ajoutez un fichier `gt.config.json` à la racine du projet Ajoutez un fichier `gt.config.json` à la racine du projet. Ce fichier contiendra la configuration du paquet `gt-react`. Les paramètres régionaux déjà définis dans le projet ou fournis à la tâche de configuration font foi. Préservez les valeurs existantes de `locales` et `defaultLocale`. Les valeurs ci-dessous sont fournies à titre d’exemple uniquement. Si le projet ne comporte aucune configuration de paramètres régionaux, ne déduisez pas les paramètres régionaux requis à partir de ces exemples. ```json title="gt.config.json" { "defaultLocale": "en", "locales": ["fr", "de"] } ``` Le champ facultatif [`src`](/docs/cli/reference/config#src) indique les fichiers sources que GT analyse à la recherche de contenu inline ; s’il est omis, les motifs glob JavaScript et TypeScript suivants sont utilisés par défaut dans `src`, `app`, `pages` et `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. Initialiser la bibliothèque [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) configure les fonctions de traduction au niveau du module et attend le catalogue initial. Appelez-la dans un module d’amorçage avant d’importer du code qui traduit au niveau du module. Créez `src/index.js` en tant que fichier d’amorçage et importez le point d’entrée existant `src/main.jsx` après l’initialisation. Repérez la cible Bazel qui génère le bundle du navigateur. Préservez la règle existante du projet, les dépendances, les déclarations de sources et les options de build. Ne remplacez pas son bundler et n'ajoutez pas de second pipeline de build. La cible doit recevoir chaque fichier importé par le nouvel amorçage. Ajoutez le label npm installé `gt-react` à la liste des dépendances. Ajoutez `gt.config.json` à `srcs` ou à `data` s'il n'est pas déjà couvert par une input déclarée. Le fichier d'amorçage est automatiquement couvert lorsque la cible inclut déjà le répertoire source via un glob. Modifiez ensuite le point d'entrée du navigateur de la cible afin de remplacer l'entrée React existante par le nouveau fichier d'amorçage. Pour une application utilisant la règle `esbuild` d'Aspect à la racine du dépôt, la cible obtenue peut ressembler à ceci : ```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", ) ``` Utilisez les étiquettes et les attributs déjà définis par le projet. Par exemple, une cible dans un paquet Bazel enfant peut utiliser `//:gt.config.json` et `//:node_modules/gt-react` plutôt que des étiquettes relatives au paquet racine. Si le bundle dépend d’une `js_library` interne, déclarez `gt-react` sur la cible qui possède le fichier source effectuant l’import, plutôt que de le dupliquer arbitrairement. Utilisez une fonction d’amorçage `async`, sauf si le bundle Bazel existant prend déjà en charge l’utilisation de `await` au niveau supérieur. Ne modifiez pas le format de sortie ni la cible JavaScript uniquement pour activer l’utilisation de `await` au niveau supérieur. ```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(); ``` Ne conservez pas l’entrée d’origine configurée comme deuxième point d’entrée du navigateur. Elle ne doit s’afficher qu’une fois [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) résolue. Exécutez la cible Bazel habituelle de compilation ou de test de l’application dans le dépôt. Ne démarrez pas de serveur de développement ou de prévisualisation persistant. ## Chargement des traductions [#translations] Lorsque [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) est appelé sans fonction [`loadTranslations`](/docs/react/reference/functions/load-translations), le runtime charge les traductions depuis le CDN de General Translation uniquement si un [`projectId`](/docs/react/reference/config#project-id) est disponible. Pour intégrer les catalogues au bundle de l’application, configurez un chemin de sortie et un loader correspondant. Les étapes ci-dessous utilisent `src/_gt/[locale].json`. ### 1. Mettre à jour la configuration Définissez `files.gt.output` sur l’emplacement où la CLI doit écrire les fichiers de traduction générés. Ajoutez ou fusionnez uniquement le paramètre `files.gt.output`. Préservez les `locales` et `defaultLocale` existants du projet ; les valeurs indiquées ci-dessous sont des exemples et ne doivent pas remplacer les paramètres régionaux configurés du projet. Dans une application utilisant Bazel, les traductions sont généralement stockées dans le répertoire `src/_gt`. Cela permet de les utiliser dans le code de l’application. ```json title="gt.config.json" { "locales": ["fr", "zh"], "defaultLocale": "en", "files": { "gt": { "output": "src/_gt/[locale].json" } } } ``` ### 2. Ajoutez les fichiers vides Créez un fichier JSON vide pour chaque paramètre régional cible déjà configuré dans `gt.config.json`, à l’exclusion du paramètre régional par défaut. Ces fichiers vides permettent aux imports de se résoudre avant même que les bundles de traduction n’existent. Les fichiers `fr` et `zh` ci-dessous illustrent l’exemple de configuration de ce guide ; créez plutôt des fichiers pour les paramètres régionaux cibles réellement configurés dans le projet. Si aucun paramètre régional cible n’est configuré, n’inventez pas de paramètres régionaux et ne créez pas de fichiers placeholder. ```json title="src/_gt/fr.json" {} ``` ```json title="src/_gt/zh.json" {} ``` Assurez-vous que la cible Bazel concernée déclare ces fichiers JSON. Un `glob(["src/**"])` existant les inclut ; sinon, ajoutez-les aux `srcs` ou aux `data` de la cible, selon l’API de la règle. ### 3. Ajoutez le loader Créez `src/loadTranslations.js` pour charger les traductions. Il doit être résolu vers le même emplacement de sortie que celui configuré dans `files.gt.output`. Répertoriez explicitement chaque paramètre régional cible configuré dans `translationLoaders`. Chaque loader doit utiliser un chemin d’import littéral afin que Bazel et le bundler sous-jacent puissent détecter chaque fichier de traduction au build. Les entrées `fr` et `zh` ci-dessous correspondent à la configuration d’exemple de ce guide ; utilisez à la place les paramètres régionaux cibles réellement configurés dans le projet. ```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. Mettre à jour l’initialiseur Mettez à jour l’initialiseur pour utiliser la nouvelle fonction loader. Préservez la forme d’amorçage async et l’importation du point d’entrée de l’application d’origine. ```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(); ``` Exécutez à nouveau la cible de build ou de test Bazel après avoir ajouté les traductions incluses. ## 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.