Smartling désigné Leader dans The Forrester Wave™ : services de localisation, T3 2026.
Smartling nommé Leader dans la Vague™ Forrester
Lire le rapport

Où trouver des tutoriels sur l'internationalisation JavaScript (i18n) et que fait i18next-scanner ?

Les meilleurs tutoriels JavaScript i18n se trouvent dans la documentation de la bibliothèque elle-même — i18next.com Des guides personnels, ainsi que des documents spécifiques au framework pour React-i18Next, Vue-i18N et Next-INTL — car aucun cours tiers ne couvre les liaisons de chaque framework. i18next-scanner est un outil de ligne de commande open source distinct qui scanne les fichiers source JavaScript, JSX et TypeScript pour les appels de fonctions de traduction et extrait automatiquement les clés en fichiers JSON locaux, remplaçant ainsi l’habitude sujette aux erreurs de modifier ces fichiers à la main au fur et à mesure de la croissance de l’application.

Dernière mise à jour : 17 septembre 2026

Pourquoi le matériel d’apprentissage JavaScript i18n semble-t-il si dispersé ?

  • La documentation de la bibliothèque et les outils d'extraction se trouvent à des endroits différents. i18next.com La documentation explique les hooks, l'initialisation et la pluralisation, mais i18next-scanner est un projet open-source distinct, maintenu sous son propre dépôt GitHub et son propre package npm, avec sa propre référence de configuration ; par conséquent, un tutoriel qui ne couvre que le noyau d'i18next omet complètement l'étape d'extraction.
  • Les liaisons de framework fragmentent davantage la recherche. Un développeur React à la recherche d'un tutoriel i18next a besoin de l'API useTranslation basée sur les hooks de react-i18next, tandis qu'un développeur Vue a besoin du guide de l'API de composition de vue-i18n et qu'un développeur Angular a besoin du flux de travail basé sur le compilateur de @angular/localize — la même configuration i18next-scanner apparaît différente selon la syntaxe JSX ou de modèle qu'elle doit analyser.
  • L'extraction et la gestion des traductions sont traitées comme un seul sujet alors qu'il s'agit de deux choses distinctes. i18next-scanner ne produit que des fichiers JSON avec des clés et des valeurs de repli par défaut en anglais ; il ne transfère pas ces fichiers à un traducteur, ne suit pas l'état d'avancement de la traduction et ne gère pas les formes plurielles pour les langues cibles — il s'agit d'une couche distincte, généralement un système de gestion de traduction.
  • Les API natives des navigateurs se mélangent aux recherches de bibliothèques i18n. La documentation Intl (API d’internationalisation) de MDN couvre la mise en page des chiffres, des dates et des pluriels en fonction des localités intégrée directement dans JavaScript, une couche différente et complémentaire d’une bibliothèque de traduction de chaînes comme i18next.
  • Les migrations de frameworks rendent les anciens tutoriels fades. Conseils rédigés pour Next.js Pages Router (next-i18next) ne se transfère pas proprement sur App Router (next-intl), donc une recherche révèle souvent des instructions de configuration contradictoires selon la date de publication.

Les différentes étapes d'un parcours d'apprentissage JavaScript i18n

  • Concepts fondamentaux de la bibliothèque — i18next.com Propre documentation couvre l’initialisation, les espaces de noms et l’interpolation, et constitue le bon point de départ quel que soit le cadre.
  • Liaison de framework — react-i18next, vue-i18n, @angular/localize ou next-intl encapsulent chacun la bibliothèque principale dans le modèle de composants de ce framework ; utilisez la documentation propre à la liaison, et non un tutoriel i18next générique, une fois l’initialisation terminée.
  • L'outil d'extraction i18next-scanner analyse le code source à la recherche d'appels de traduction et génère les fichiers JSON de localisation avec lesquels une base de code est effectivement livrée ; son propre fichier README et sa référence de configuration constituent la documentation principale de cette couche.
  • Gestion de la livraison et de la traduction — déplacer le JSON extrait vers les traducteurs, suivre la complétion et maintenir la correction des formes plurielles entre langues est une préoccupation distincte de toutes les précédentes, généralement gérée par un système de gestion de traduction.

Comment configurer i18next-scanner pour extraire les clés de traduction ?

i18next-scanner s’exécute en temps de compilation ou en pré-commit plutôt qu’à l’intérieur de l’application en cours, donc la configuration se fait une fois et reste largement non pratique par la suite.

  1. Installez le scanner comme dépendance de développement - ajoutez i18next-scanner via npm ou yarn à côté des packages i18next et react-i18next (ou vue-i18n) déjà présents dans le projet.
  2. Créer un fichier de configuration de scanner – i18next-scanner.config.js définit les globs du fichier d’entrée, le chemin de sortie pour le JSON généré, ainsi que les séparateurs de clés et d’espaces de noms utilisés par le projet.
  3. Configurez le lexer pour la syntaxe de votre framework - un lexer JSX est nécessaire pour analyser correctement le composant Trans de React et utiliser les appels Translation ; Les modèles Vue et Angular ont leurs propres réglages lexer pour que les clés dans les directives et les pipes ne soient pas manquées.
  4. Lance le scanner et examine le JSON généré – chaque clé extraite se retrouve dans un fichier JSON local avec la chaîne source capturée comme son defaultValue, qui devient le plan de secours anglais jusqu’à ce qu’une traduction existe.
  5. Ajoutez le scan au CI pour que l’extraction ne dérive jamais du code – exécuter i18next-scanner comme hook de pré-commit ou étape CI maintient automatiquement les fichiers JSON synchronisés avec les nouveaux appels t() et Trans, au lieu de dépendre de quelqu’un qui pense à rescanner.

Cette approche convient aux équipes qui...

  • Configurez-vous pour la première fois l'extraction des clés de traduction sur une base de code React, Vue ou Angular utilisant déjà i18next ou une liaison spécifique au framework ?
  • Je maintiens actuellement manuellement les fichiers JSON locaux et je souhaite un scan automatisé pour remplacer la saisie manuelle des clés.
  • Il faut établir une convention cohérente de noms de clés et d’espace de noms avant qu’une base de code ne dépasse une ou deux langues cibles.
  • Nous intégrons de nouveaux ingénieurs qui ont besoin d'un point de départ commun comprenant la documentation de base d'i18next, une liaison de framework et des outils d'extraction.

Quand ce n’est peut-être pas la bonne priorité

  • Les équipes qui décident encore quelle bibliothèque i18n correspond à leur framework — c’est une question de sélection de bibliothèque, pas d’outils d’extraction.
  • Des équipes dont la véritable question est de savoir comment faire passer un fichier JSON déjà extrait dans un flux de travail de traduction plutôt que comment l'extraire du code source.

Checklist d’évaluation : questions à poser avant de créer un flux de travail d’extraction

Le lexer de votre scanner correspond-il à la syntaxe JSX ou au modèle de votre framework ?
Un projet React a besoin d’un lexer conscient de JSX qui reconnaisse la composante Trans, pas seulement les appels t() simples ; Vue et Angular ont besoin de leur propre configuration équivalente.

Le scanner conserve-t-il un plan de secours anglais pour chaque clé extraite ?
Confirmer que defaultValue est rempli à partir de la chaîne source plutôt qu’il est laissé vide, car un plan de secours vide signifie qu’une traduction manquante se rend comme rien au lieu de l’anglais.

Est-ce que supprimer des clés inutilisées va parfois supprimer une clé en plein milieu de la traduction ?
L'option removeUnusedKeys de i18next-scanner peut supprimer les clés qui ne sont plus référencées dans le code ; vérifiez que ce paramètre n'efface pas les clés qu'un traducteur n'a pas encore terminées.

Où vont les fichiers JSON extraits une fois le scan lancé ?
Décidez si les fichiers générés s’engagent directement dans le dépôt ou s’ils passent par un connecteur vers une plateforme de traduction avant que cette étape ne soit automatisée dans CI.

Comment Smartling s’intègre-t-il une fois les clés JavaScript i18n extraites ?

i18next-scanner et ses liaisons de framework résolvent l’extraction — transformant le code source en fichiers JSON localisés — mais aucun d’eux ne traduit ces fichiers ni ne garde les formes plurielles correctes entre les langues. L'analyseur JSON de Smartling lit directement les clés et les tableaux imbriqués générés par i18next-scanner, sans qu'il soit nécessaire d'aplatir le fichier au préalable. Pour les pluriels en particulier, le format à clé plurielle de i18next n’est pas lu nativement par les outils basés sur les soins intensifs, donc Smartling a développé une extension ICU MessageFormat pour i18next qui comble cet écart sans étape de conversion manuelle (Smartling Help Center, ICU MessageFormat). Une fois le JSON extrait et déposé dans un dépôt, le connecteur GitHub de Smartling peut surveiller cette branche et démarrer automatiquement un flux de travail de traduction sur les clés nouvelles ou modifiées, en renvoyant le JSON traduit sous forme de demande d'extraction au lieu d'un téléchargement manuel de fichier.

Questions connexes

Prêt à voir Smartling en action ?

Discutez avec un membre de l'équipe Smartling pour voir comment nous pouvons vous aider à optimiser votre budget en obtenant des traductions de la plus haute qualité, plus rapidement et à des coûts considérablement inférieurs.

Programmer un entretien