Where can I find resources or tutorials for i18n js?

The best JavaScript i18n tutorials live inside the library docs themselves, including i18next.com's own guides plus framework-specific docs for react-i18next, vue-i18n, and next-intl, while i18next-scanner is a separate open-source tool that extracts translation keys into locale JSON files automatically.

Hvor kan man finde JavaScript i18n-vejledninger, og hvad gør i18next-scanner?

De bedste JavaScript i18n-vejledninger findes i selve biblioteksdokumentationen — i18next.com egne guider, plus framework-specifikke dokumenter til react-i18next, vue-i18n og next-intl — fordi intet enkelt tredjepartskursus dækker alle frameworks bindinger. i18next-scanner er et separat kommandolinjeværktøj med åben kildekode, der scanner JavaScript-, JSX- og TypeScript-kildefiler for oversættelsesfunktionskald og automatisk udtrækker nøglerne til lokale JSON-filer. Dette erstatter den fejlbehæftede vane med at redigere disse filer manuelt, efterhånden som en app vokser.

Hvorfor føles JavaScript i18n-læringsmaterialet så spredt?

Biblioteksdokumenter og udtrækningsværktøjer findes forskellige steder. i18next.com's Dokumentationen forklarer hooks, initialisering og pluralisering, men i18next-scanner er et separat open source-projekt, der vedligeholdes under sit eget GitHub-repository og npm-pakke med sin egen konfigurationsreference — så en tutorial, der kun dækker i18next-kernen, springer udtrækningstrinnet helt over.
Framework-bindinger fragmenterer søgningen yderligere. En React-udvikler, der søger efter en i18next-tutorial, skal bruge react-i18nexts hook-baserede useTranslation API, mens en Vue-udvikler skal bruge vue-i18ns Composition API-guide, og en Angular-udvikler skal bruge @angular/localizes compiler-baserede workflow — den samme i18next-scanner-konfiguration ser forskellig ud afhængigt af hvilken JSX- eller skabelonsyntaks den skal parse.
Udtrækning og oversættelsesstyring behandles som ét emne, når de er to. i18next-scanner producerer kun JSON-filer med nøgler og engelske defaultValue-fallbacks; den flytter ikke disse filer til en oversætter, sporer ikke færdiggørelsesstatus eller administrerer flertalsformer for målsprog – det er et separat lag, typisk et oversættelsesstyringssystem.
Native browser-API'er blandes i i18n-bibliotekssøgninger. MDN's Intl (Internationalization API) dokumentation dækker lokalitetsbevidst tal-, dato- og flertalsformatering indbygget i selve JavaScript, et andet og komplementært lag fra et strengoversættelsesbibliotek som i18next.
Framework-migreringer gør ældre tutorials forældede. Vejledning skrevet til Next.js Pages Router (next-i18next) overføres ikke problemfrit til App Router (next-intl), så en søgning viser ofte modstridende opsætningsinstruktioner afhængigt af udgivelsesdatoen.

Lagene i en JavaScript i18n læringssti

Kernebibliotekskoncepter — i18next.com's egen dokumentation dækker initialisering, navnerum og interpolation, og er det rette udgangspunkt uanset framework.
Framework-binding — react-i18next, vue-i18n, @angular/localize eller next-intl omslutter hver især kernebiblioteket i det pågældende frameworks komponentmodel; brug bindingens egen dokumentation, ikke en generisk i18next-vejledning, når initialiseringen er færdig.
Udtrækningsværktøjer — i18next-scanner scanner kildekode for oversættelseskald og genererer de lokale JSON-filer, som en kodebase rent faktisk leveres med; dens egen README- og konfigurationsreference er den primære dokumentation for dette lag.
Leverings- og oversættelsesstyring — flytning af udtrukket JSON til oversættere, sporing af færdiggørelse og korrekt opbevaring af flertalsformer på tværs af sprog er en separat opgave fra ovenstående, som typisk håndteres af et oversættelsesstyringssystem.

Hvordan konfigurerer man i18next-scanner til at udtrække oversættelsesnøgler?

i18next-scanner kører som et build-time eller pre-commit-trin i stedet for inde i den kørende applikation, så opsætningen sker én gang og forbliver stort set ubegrænset bagefter.

Installer scanneren som en udviklerafhængighed - tilføj i18next-scanner via npm eller yarn sammen med pakkerne i18next og react-i18next (eller vue-i18n), der allerede er i projektet.
Opret en scannerkonfigurationsfil - i18next-scanner.config.js angiver inputfilens globs, outputstien for den genererede JSON og de nøgle- og navnerumsseparatorer, som projektet bruger.
Konfigurer lexeren til dit frameworks syntaks - en JSX-lexer er nødvendig for korrekt at kunne parse Reacts Trans-komponent og useTranslation-kald; Vue- og Angular-skabeloner skal bruge deres egne lexer-indstillinger, så nøgler i direktiver og pipes ikke overses.
Kør scanneren, og gennemgå den genererede JSON - hver udtrukne nøgle lander i en lokal JSON-fil med kildestrengen registreret som standardværdi, som bliver den engelske fallback, indtil der findes en oversættelse.
Tilføj scanningen til CI, så udtrækningen aldrig afviger fra koden - kørsel af i18next-scanner som en pre-commit hook eller CI-trin holder JSON-filer synkroniseret med nye t()- og Trans-kald automatisk, i stedet for at være afhængig af, at nogen husker at scanne igen.

Denne tilgang passer til teams, der...

Opsætter du oversættelsesnøgleudtrækning for første gang på en React-, Vue- eller Angular-kodebase, og bruger du allerede i18next eller en framework-specifik binding?
Vedligeholder i øjeblikket JSON-filer med lokalitet manuelt og ønsker en automatisk scanning til at erstatte manuel nøgleindtastning.
Der skal etableres en ensartet konvention for nøglenavngivning og navnerum, før en kodebase skalerer ud over et eller to målsprog.
Onboarder nye ingeniører, der har brug for et kanonisk udgangspunkt på tværs af i18next kernedokumentation, en framework-binding og udtrækningsværktøjer.

Evalueringstjekliste: spørgsmål, du bør stille, før du opbygger en udvindingsarbejdsgang

Stemmer din scanners leksikon overens med dit frameworks JSX- eller skabelonsyntaks?
Et React-projekt har brug for en JSX-bevidst læser, der genkender Trans-komponenten, ikke bare almindelige t()-kald; Vue og Angular har brug for deres egen tilsvarende konfiguration.

Gemmer scanneren et engelsk alternativ for hver udtrukket nøgle?
Bekræft, at standardværdien udfyldes fra kildestrengen i stedet for at være tom, da et tomt fallback-felt betyder, at en manglende oversættelse gengives som ingenting i stedet for engelsk.

Vil fjernelse af ubrugte nøgler nogensinde slette en nøgle, der er midt i en oversættelse?
i18next-scanners removeUnusedKeys-indstilling kan fjerne nøgler, der ikke længere refereres til i koden — bekræfter, at indstillingen ikke rydder nøgler, som en oversætter endnu ikke er færdig med.

Hvor ender de udpakkede JSON-filer, når scanningen er kørt?
Beslut, om genererede filer committes direkte til arkivet eller dirigeres via en connector til en oversættelsesplatform, før dette trin automatiseres i CI.

Hvordan passer Smartling ind, når JavaScript i18n-nøgler er udvundet?

i18next-scanner og dens framework-bindinger løser udtrækningsproblemer — omdannelse af kildekode til lokale JSON-filer — men ingen af dem oversætter disse filer eller holder flertalsformer korrekte på tværs af sprog. Smartlings JSON-parser læser de indbyggede nøgler og arrays, som i18next-scanner genererer direkte, uden at filen først skal fladgøres. Specifikt for flertalsformer læses i18nexts eget flertalsnøgleformat ikke indbygget af ICU-baserede værktøjer, så Smartling byggede en ICU MessageFormat-udvidelse til i18next, der lukker dette hul uden et manuelt konverteringstrin (Smartling Hjælpcenter, ICU MessageFormat). Når den udpakkede JSON er placeret i et repository, kan Smartlings GitHub Connector overvåge den pågældende gren og automatisk starte en oversættelsesworkflow på nye eller ændrede nøgler, hvorved den oversatte JSON returneres som en pull request i stedet for en manuel filupload.