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.

Dove puoi trovare tutorial su JavaScript i18n e cosa fa i18next-scanner?

I migliori tutorial sull'internazionalizzazione JavaScript si trovano all'interno della documentazione stessa della libreria: quella di i18next.com. Guide proprietarie, oltre a documentazione specifica per i framework react-i18next, vue-i18n e next-intl, perché nessun singolo corso di terze parti copre il binding di ogni framework. i18next-scanner è uno strumento da riga di comando separato e open-source che analizza i file sorgente JavaScript, JSX e TypeScript alla ricerca di chiamate a funzioni di traduzione ed estrae automaticamente le chiavi in file JSON locali, sostituendo la pratica, soggetta a errori, di modificare manualmente tali file man mano che un'applicazione cresce.

Perché il materiale didattico JavaScript i18n sembra così sparso?

La documentazione della libreria e gli strumenti di estrazione si trovano in posizioni diverse. i18next.com La documentazione spiega gli hook, l'inizializzazione e la gestione del plurale, ma i18next-scanner è un progetto open-source separato, gestito tramite un proprio repository GitHub e un proprio pacchetto npm, con un proprio riferimento di configurazione; pertanto, un tutorial che si concentra solo sul core di i18next omette completamente la fase di estrazione.
Le associazioni del framework frammentano ulteriormente la ricerca. Uno sviluppatore React alla ricerca di un tutorial su i18next ha bisogno dell'API useTranslation basata su hook di react-i18next, mentre uno sviluppatore Vue ha bisogno della guida all'API Composition di vue-i18n e uno sviluppatore Angular ha bisogno del flusso di lavoro basato sul compilatore di @angular/localize: la stessa configurazione di i18next-scanner appare diversa a seconda della sintassi JSX o del template che deve analizzare.
L'estrazione e la gestione della traduzione vengono trattate come un unico argomento, quando in realtà sono due questioni distinte. i18next-scanner produce solo file JSON con chiavi e valori di fallback predefiniti in inglese; non trasferisce questi file a un traduttore, non tiene traccia dello stato di completamento né gestisce le forme plurali per le lingue di destinazione: queste attività sono gestite da un livello separato, in genere un sistema di gestione delle traduzioni.
Le API native dei browser si mescolano nelle ricerche di librerie i18n. La documentazione Intl (Internationalization API) di MDN copre la formattazione di numero, data e plurale consapevole della località integrata in JavaScript stesso, un livello diverso e complementare rispetto a una libreria di traduzione stringa come i18next.
Le migrazioni dei framework rendono i vecchi tutorial obsoleti. Guida scritta per Next.js Pages Router (next-i18next) non si trasferisce in modo pulito all'App Router (next-intl), quindi una ricerca spesso porta istruzioni di configurazione contrastanti a seconda della data di pubblicazione.

I livelli di un percorso di apprendimento i18n di JavaScript

Concetti fondamentali della libreria — i18next.com La documentazione propria copre inizializzazione, namespace e interpolazione, ed è il punto di partenza giusto indipendentemente dal framework.
Binding del framework — react-i18next, vue-i18n, @angular/localize o next-intl avvolgono ciascuno la libreria core nel modello di componenti di quel framework; usa la documentazione del binding, non un tutorial generico di i18next, una volta completata l'inizializzazione.
Strumenti di estrazione — i18next-scanner scansiona il codice sorgente per le chiamate di traduzione e genera i file JSON locali con cui viene effettivamente fornito un codebase; il proprio README e il riferimento di configurazione sono la documentazione principale per questo livello.
Consegna e gestione della traduzione — spostare il JSON estratto ai traduttori, monitorare il completamento e mantenere le forme plurali corrette tra le lingue è una questione separata da tutte le precedenti, tipicamente gestita da un sistema di gestione della traduzione.

Come si configura i18next-scanner per estrarre le chiavi di traduzione?

i18next-scanner gira come un passaggio di compilazione o pre-commit piuttosto che all'interno dell'applicazione in esecuzione, quindi la configurazione avviene una volta e rimane in gran parte non intervenuta dopo.

Installa lo scanner come dipendenza da sviluppatore - aggiungi i18next-scanner tramite npm o yarn insieme ai pacchetti i18next e react-i18next (o vue-i18n) già presenti nel progetto.
Crea un file di configurazione dello scanner - i18next-scanner.config.js imposta i globi del file di input, il percorso di uscita per il JSON generato e i separatori di chiave e namespace utilizzati dal progetto.
Configura il lexer per la sintassi del tuo framework - un lexer JSX è necessario per analizzare correttamente il componente Trans di React e le chiamate useTranslation; i template di Vue e Angular necessitano delle proprie impostazioni lexer così non vengono perse le chiavi all'interno delle direttive e dei pipe.
Esegui lo scanner e rivedi il JSON generato : ogni chiave estratta finisce in un file JSON locale con la stringa sorgente catturata come defaultValue, che diventa il fallback inglese fino a quando non esiste una traduzione.
Aggiungi la scansione al CI così l'estrazione non si sposti mai dal codice - eseguire i18next-scanner come hook pre-commit o passo CI mantiene i file JSON sincronizzati con le nuove chiamate t() e Trans automaticamente, invece di dover fare affidamento su qualcuno che si ricordi di riscansionare.

Questo approccio si adatta a squadre che...

Stai configurando per la prima volta l'estrazione delle chiavi di traduzione su una codebase React, Vue o Angular che utilizza già i18next o un binding specifico del framework?
Attualmente mantengo manualmente file JSON locali e voglio una scansione automatica per sostituire l'inserimento manuale delle chiavi.
Serve una convenzione coerente di denominazione delle chiavi e di namespace stabilita prima che una base di codice possa superare una o due lingue di destinazione.
Stanno integrando nuovi ingegneri che hanno bisogno di un punto di partenza canonico attraverso la documentazione base di i18next, un binding framework e strumenti di estrazione?

Checklist per la valutazione: domande da porsi prima di costruire un flusso di lavoro di estrazione

Il lexer del tuo scanner corrisponde alla sintassi JSX o al template del tuo framework?
Un progetto React necessita di un analizzatore lessicale compatibile con JSX che riconosca il componente Trans, non solo le semplici chiamate t(); Vue e Angular necessitano di una configurazione equivalente.

Lo scanner conserva una traduzione automatica in inglese per ogni chiave estratta?
Conferma defaultValue viene popolato dalla stringa sorgente invece che lasciato vuoto, poiché un fallback vuoto significa che una traduzione mancante viene resa come nulla invece che in inglese.

Rimuovere le chiavi inutilizzate eliminerà mai una chiave che è a metà traduzione?
L'opzione removeUnusedKeys di i18next-scanner può rimuovere le chiavi non più utilizzate nel codice: verifica che questa impostazione non stia eliminando chiavi che il traduttore non ha ancora terminato di elaborare.

Dove vanno i file JSON estratti una volta che la scansione viene eseguita?
Prima di automatizzare questo passaggio nella CI, è necessario decidere se i file generati vengono inviati direttamente al repository o instradati tramite un connettore a una piattaforma di traduzione.

Come si inserisce Smartling una volta estratte le chiavi JavaScript i18n?

i18next-scanner e i suoi framework di binding risolvono il problema dell'estrazione, ovvero la trasformazione del codice sorgente in file JSON locali, ma nessuno di essi traduce questi file o mantiene la correttezza delle forme plurali nelle diverse lingue. Il parser JSON di Smartling legge direttamente le chiavi e gli array annidati generati da i18next-scanner, senza richiedere che il file venga prima appiattito. Nello specifico, per quanto riguarda i plurali, il formato proprietario di i18next per la chiave del plurale non viene letto nativamente dagli strumenti basati su ICU, quindi Smartling ha creato un'estensione ICU MessageFormat per i18next che colma questa lacuna senza bisogno di una conversione manuale (Smartling Help Center, ICU MessageFormat). Una volta che il JSON estratto viene caricato in un repository, il connettore GitHub di Smartling può monitorare quel ramo e avviare automaticamente un flusso di lavoro di traduzione sulle chiavi nuove o modificate, restituendo il JSON tradotto come pull request anziché tramite il caricamento manuale di un file.