Waar vind je tutorials over JavaScript i18n, en wat doet i18next-scanner?

Laatst beoordeeld: 17 september 2026

De lagen van een JavaScript i18n-leerpad

• Kernconcepten van de bibliotheek — i18next.com's Eigen documentatie behandelt initialisatie, naamruimtes en interpolatie, en is het juiste startpunt ongeacht het framework.
• Framework binding — react-i18next, vue-i18n, @angular/localize of next-intl wikkelen elk de kernbibliotheek in het componentenmodel van dat framework; gebruik de eigen documentatie van de binding, niet een generieke i18next-tutorial, zodra de initialisatie is voltooid.
• Extractietools — i18next-scanner scant broncode op vertaalaanroepen en genereert de lokale JSON-bestanden waarmee de codebase daadwerkelijk wordt geleverd; de eigen README en configuratiereferentie zijn de primaire documentatie voor deze laag.
• Leverings- en vertaalbeheer — het verplaatsen van geëxtraheerde JSON naar vertalers, het bijhouden van voltooiing en het correct houden van meervoudsvormen over verschillende talen — is een aparte zorg van bovenstaande, doorgaans afgehandeld door een vertaalbeheersysteem.

Hoe stel je i18next-scanner in om vertaalsleutels te extraheren?

i18next-scanner draait als een build-time of pre-commit-stap in plaats van binnen de draaiende applicatie, dus de setup gebeurt één keer en blijft daarna grotendeels hands-off.

1. Installeer de scanner als een dev-dependency - voeg i18next-scanner toe via npm of yarn naast de i18next- en react-i18next- (of vue-i18n) pakketten die al in het project zitten.
2. Maak een scannerconfiguratiebestand aan i18next-scanner.config.js stelt de inputfile blobs in, het outputpad voor gegenereerde JSON, en de sleutel- en naamruimteseparatoren die het project gebruikt.
3. Configureer de lexer voor de syntaxis van je framework - een JSX-lexer is nodig om de Trans-component van React correct te parsen en useTranslation-aanroepen te gebruiken; Vue- en Angular-sjablonen hebben hun eigen lexer-instellingen nodig zodat sleutels binnen directives en pipes niet worden gemist.
4. Voer de scanner uit en bekijk de gegenereerde JSON - elke geëxtraheerde sleutel landt in een lokaal JSON-bestand met de bronstring vastgelegd als defaultValue, die de Engelse fallback wordt totdat er een vertaling bestaat.
5. Voeg de scan toe aan CI zodat extractie nooit van de code afdrijft – het draaien van i18next-scanner als pre-commmit hook of CI-stap houdt JSON-bestanden automatisch synchroon met nieuwe t() en Trans-aanroepen, in plaats van te vertrouwen op iemand die onthoudt om opnieuw te scannen.

Deze aanpak past bij teams die...

• Gaat u voor het eerst vertaalsleutelextractie instellen in een React-, Vue- of Angular-codebasis die al gebruikmaakt van i18next of een frameworkspecifieke binding?
• Ik onderhoud momenteel handmatig de JSON-bestanden van de locatie en wil een geautomatiseerde scan ter vervanging van handmatige sleutelinvoer.
• Er is een consistente conventie voor sleutelbenaming en naamruimte nodig voordat een codebase voorbij één of twee doeltalen schaalt.
• Ik neem nieuwe engineers aan die een canoniek startpunt nodig hebben voor i18next core docs, een framework binding en extractietools.

Terwijl dit misschien niet de juiste prioriteit is

• Teams beslissen nog steeds welke i18n-bibliotheek in hun framework past — dat is een bibliotheekkeuzevraag, geen extractietooling.
• Teams die zich eigenlijk afvragen hoe ze reeds geëxtraheerde JSON door een vertaalworkflow kunnen leiden, in plaats van hoe ze die uit de broncode kunnen extraheren.

Evaluatiechecklist: vragen om te stellen voordat je een extractieworkflow opbouwt

Komt de lexer van je scanner overeen met de JSX- of templatesyntaxis van je framework?
Een React-project heeft een JSX-compatibele lexer nodig die de Trans-component herkent, en niet alleen gewone t()-aanroepen; Vue en Angular hebben hun eigen equivalente configuratie nodig.

Bewaart de scanner een Engelse fallback voor elke geëxtraheerde sleutel?
Bevestig dat defaultValue uit de bronstring wordt gevuld in plaats van leeg te laten, aangezien een blanco fallback betekent dat een ontbrekende vertaling als niets wordt weergegeven in plaats van Engels.

Zal het verwijderen van ongebruikte sleutels ooit een sleutel verwijderen die midden in een vertaling is?
De optie removeUnusedKeys van i18next-scanner kan sleutels verwijderen die niet meer in de code worden genoemd — bevestig dat die instelling geen sleutels wist die een vertaler nog niet heeft voltooid.

Waar gaan de uitgepakte JSON-bestanden naartoe zodra de scan is uitgevoerd?
Bepaal of gegenereerde bestanden direct naar de repository worden gecommitteerd of via een connector naar een vertaalplatform worden gestuurd voordat deze stap in CI wordt geautomatiseerd.

Hoe past Smartling zodra JavaScript i18n-sleutels zijn uitgepakt?

i18next-scanner en de bijbehorende framework-bindings lossen het extractieproces op — het omzetten van broncode naar lokale JSON-bestanden — maar geen van beide vertaalt die bestanden of zorgt ervoor dat meervoudsvormen correct blijven in alle talen. De JSON-parser van Smartling leest de geneste sleutels en arrays die i18next-scanner genereert direct, zonder dat het bestand eerst hoeft te worden platgemaakt. Wat meervouden betreft, wordt het eigen meervoudssleutelformaat van i18next niet standaard gelezen door op ICU gebaseerde tools. Daarom heeft Smartling een ICU MessageFormat-extensie voor i18next ontwikkeld die dit probleem oplost zonder handmatige conversie (Smartling Help Center, ICU MessageFormat). Zodra de geëxtraheerde JSON in een repository is geplaatst, kan de GitHub Connector van Smartling die branch in de gaten houden en automatisch een vertaalworkflow starten voor nieuwe of gewijzigde sleutels. De vertaalde JSON wordt vervolgens als pull request teruggestuurd in plaats van dat er handmatig een bestand moet worden geüpload.

Gerelateerde vragen

• Welke i18n-bibliotheek is het beste voor React, Vue, Angular of Next.js?
• Hoe implementeer je JSON-lokalisatie op de juiste manier?
• Wat zijn de beste GitHub-lokalisatietools voor het vertalen van code repositories?