# General Translation React SDKs (gt-react, gt-next, gt-react-native): Configuration d’une SPA avec webpack URL: https://generaltranslation.com/fr/docs/react/guides/spa/configuring-webpack-spa.mdx Docs index: https://generaltranslation.com/llms.txt Description: Comment configurer gt-react dans une application React monopage basée sur webpack. Configurez l’environnement d’exécution de l’application et, si vous le souhaitez, incluez les catalogues de traductions générés dans votre build webpack. Ce guide prépare l’environnement d’exécution de l’application. Marquez séparément le contenu destiné aux utilisateurs à traduire. ## Configuration d’une SPA React avec webpack [#setup] Initialisez `gt-react` avant l’exécution du point d’entrée de l’application. ### 1. Installez 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à présents dans le projet ou fournis à la tâche de configuration font foi. Préservez les valeurs existantes de `locales` et de `defaultLocale`. Les valeurs ci-dessous sont fournies uniquement à titre d'exemple. 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) désigne les fichiers sources que GT analyse afin d’y détecter le contenu inline ; s’il est omis, il utilise par défaut les motifs glob JavaScript et TypeScript suivants 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 Initialisez la bibliothèque avec [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) avant que l’application ne s’affiche ou n’importe des modules utilisant des fonctions de traduction au niveau du module. Créez un fichier d’amorçage à côté du fichier d’entrée existant de l’application. Dans cet exemple, le fichier d’entrée d’origine est `src/main.tsx` et le nouveau fichier d’amorçage est `src/index.ts`. Faites pointer la configuration `entry` existante de webpack vers le fichier d’amorçage. Préservez tous les autres paramètres de build ainsi que toute structure existante de l’objet `entry`. ```js title="webpack.config.mjs" export default { // ...les options existantes du projet entry: './src/index.ts', }; ``` webpack injecte généralement le point d’entrée généré dans le HTML via `HtmlWebpackPlugin`. N’ajoutez donc pas une seconde balise `script` lorsque le projet utilise déjà un plugin HTML. Si le HTML fait plutôt directement référence au point d’entrée source d’origine, mettez cette référence à jour afin d’utiliser le fichier d’amorçage. Initialisez ensuite GT, puis importez dynamiquement le point d’entrée d’origine uniquement une fois l’initialisation terminée. L’application de référence webpack prend en charge `await` au niveau supérieur : ```ts title="src/index.ts" import { initializeGTSPA } from 'gt-react'; import gtConfig from '../gt.config.json'; await initializeGTSPA(gtConfig); await import('./main'); // n'affiche l'application qu'une fois GT prêt ``` Si la cible de compilation webpack existante ne prend pas en charge `top-level await`, ne la modifiez pas uniquement pour cette configuration. Utilisez plutôt une fonction d’amorçage `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(); ``` ## Chargement des traductions [#translations] Lorsque [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) est appelé sans fonction [`loadTranslations`](/docs/react/reference/functions/load-translations), l’environnement d’exécution 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ù le 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 ne sont que des exemples et ne doivent pas remplacer les paramètres régionaux configurés du projet. En règle générale, dans une application basée sur webpack, les traductions sont stockées dans le répertoire `src/_gt`. Cela permet à webpack d’inclure les modules de traduction dans le bundle 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’exception du paramètre régional par défaut. Ces fichiers vides permettent de résoudre les imports avant que les bundles de traduction n’existent. Les fichiers `fr` et `zh` ci-dessous illustrent la configuration utilisée dans ce guide ; créez plutôt des fichiers correspondant aux paramètres régionaux cibles réellement configurés dans le projet. Si aucun paramètre régional cible n’est configuré, n’en inventez pas et ne créez pas de fichiers placeholder. ```json title="src/_gt/fr.json" {} ``` ```json title="src/_gt/zh.json" {} ``` ### 3. Ajoutez le loader Créez `src/loadTranslations.ts` pour charger les traductions. Il doit pointer vers le même emplacement de sortie configuré dans `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. Mettez à jour l’initialiseur Mettez à jour l’initialiseur pour utiliser la nouvelle fonction `loader`. Préservez la forme d’amorçage avec top-level await ou fonction async utilisée par l’application. ```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.