.svg)
.svg)
.svg)
.svg)
.svg)
¿Dónde puedes encontrar tutoriales de JavaScript i18n y qué hace i18next-scanner?
Los mejores tutoriales de JavaScript i18n están dentro de la propia documentación de la biblioteca — i18next.com Guías propias, además de documentación específica para el framework de React-i18Next, Vue-i18N y Next-Intl — porque ningún curso de terceros cubre la asignación de todos los frameworks. i18next-scanner es una herramienta de línea de comandos independiente y de código abierto que escanea archivos fuente de JavaScript, JSX y TypeScript en busca de llamadas a funciones de traducción y extrae automáticamente las claves a archivos JSON locales, sustituyendo el hábito propenso a errores de editar esos archivos manualmente a medida que la aplicación crece.
Última revisión: 17 de septiembre de 2026
¿Por qué el material de aprendizaje de JavaScript i18n se siente tan disperso?
- La documentación de la biblioteca y las herramientas de extracción se encuentran en lugares diferentes. i18next.com La documentación explica los hooks, la inicialización y la pluralización, pero i18next-scanner es un proyecto de código abierto independiente que se mantiene en su propio repositorio de GitHub y paquete npm, con su propia referencia de configuración; por lo tanto, un tutorial que solo cubre el núcleo de i18next omite por completo el paso de extracción.
- Las vinculaciones del marco de trabajo fragmentan aún más la búsqueda. Un desarrollador de React que busca un tutorial de i18next necesita la API useTranslation basada en hooks de react-i18next, mientras que un desarrollador de Vue necesita la guía de la API Composition de vue-i18n y un desarrollador de Angular necesita el flujo de trabajo basado en el compilador de @angular/localize; la misma configuración de i18next-scanner se ve diferente dependiendo de la sintaxis JSX o de plantilla que tenga que analizar.
- La gestión de la extracción y la traducción se tratan como un solo tema cuando en realidad son dos. i18next-scanner solo produce archivos JSON con claves y valores predeterminados en inglés; no transfiere esos archivos a un traductor, no realiza un seguimiento del estado de finalización ni gestiona las formas plurales para los idiomas de destino; esa es una capa separada, normalmente un sistema de gestión de traducciones.
- Las APIs nativas de los navegadores se mezclan con búsquedas de bibliotecas i18n. La documentación de Intl (API de Internacionalización) de MDN cubre el formato de números, fechas y plurales según la localidad integrado en JavaScript, una capa diferente y complementaria de una biblioteca de traducción de cadenas como i18next.
- Las migraciones de frameworks hacen que los tutoriales antiguos queden aburridos. Orientación escrita para Next.js's Pages Router (next-i18next) no se traslada limpiamente al App Router (next-intl), por lo que una búsqueda suele mostrar instrucciones de configuración contradictorias según la fecha de publicación.
Las capas de una ruta de aprendizaje JavaScript i18n
- Conceptos básicos de la biblioteca — i18next.com's La documentación propia cubre la inicialización, los espacios de nombres y la interpolación, y es el punto de partida adecuado independientemente del marco.
- Binding de framework — react-i18next, vue-i18n, @angular/localize o next-intl envuelve cada uno la biblioteca central en el modelo de componentes de ese framework; usa la propia documentación del binding, no un tutorial genérico de i18next, una vez finalizada la inicialización.
- Herramientas de extracción — i18next-scanner escanea el código fuente para llamadas de traducción y genera los archivos JSON locales con los que realmente viene una base de código; su propio README y referencia de configuración son la documentación principal para esta capa.
- Gestión de entrega y traducción — mover JSON extraído a traductores, hacer seguimiento de la finalización y mantener las formas plurales correctas entre idiomas es una preocupación separada de cualquiera de las anteriores, normalmente gestionada por un sistema de gestión de traducciones.
¿Cómo se configura i18next-scanner para extraer las claves de traducción?
i18next-scanner funciona como un paso de compilación o pre-commit en lugar de dentro de la aplicación en ejecución, así que la configuración ocurre una vez y después se mantiene mayormente sin intervención.
- Instala el escáner como una dependencia de desarrollo : agrega i18next-scanner a través de npm o yarn junto con los paquetes i18next y react-i18next (o vue-i18n) que ya están en el proyecto.
- Crea un archivo de configuración de escáner : i18next-scanner.config.js establece los globos del archivo de entrada, la ruta de salida para el JSON generado y los separadores de claves y espacios de nombres que emplea el proyecto.
- Configura el lexer para la sintaxis de tu framework : se requiere un lexer JSX para analizar correctamente el componente Trans de React y las llamadas a useTranslation; las plantillas de Vue y Angular necesitan sus propios ajustes de lexer para que no se falten las claves dentro de directivas y pipes.
- Ejecute el escáner y revise el JSON generado : cada clave extraída se almacena en un archivo JSON de localización con la cadena de origen capturada como su valor predeterminado, que se convierte en la opción de reservación en inglés hasta que exista una traducción.
- Agrega el escaneo a CI para que la extracción nunca se desvíe del código : ejecutar i18next-scanner como gancho de pre-commit o paso CI mantiene los archivos JSON sincronizados con las nuevas llamadas t() y Trans automáticamente, en lugar de depender de que alguien recuerde volver a escanear.
Este enfoque se adapta a equipos que...
- ¿Estás configurando la extracción de claves de traducción por primera vez en una base de código de React, Vue o Angular ya usando i18next o un enlace específico del framework?
- Actualmente mantengo manualmente archivos JSON locales y quiero un escaneo automático para reemplazar la introducción manual de claves.
- Es necesario establecer una convención consistente de nombres de claves y espacios de nombres antes de que una base de código escale más allá de uno o dos lenguajes destino.
- Se están incorporando nuevos ingenieros que necesitan un punto de partida canónico que abarque la documentación principal de i18next, una vinculación con el marco de trabajo y herramientas de extracción.
Cuando esto puede no ser la prioridad adecuada
- Equipos que aún están decidiendo qué biblioteca i18n encaja en su framework en primer lugar — esa es una cuestión de selección de bibliotecas, no de herramientas de extracción.
- Equipos cuya verdadera pregunta es cómo mover JSON ya extraído a través de un flujo de trabajo de traducción, en lugar de cómo extraerlo del código fuente.
Lista de verificación de evaluación: preguntas que debes hacer antes de crear un flujo de trabajo de extracción
¿El lexer de tu escáner coincide con la sintaxis JSX o de la plantilla de tu framework?
Un proyecto de React necesita un analizador léxico compatible con JSX que reconozca el componente Trans, no solo las simples llamadas a t(); Vue y Angular necesitan su propia configuración equivalente.
¿El escáner conserva un respaldo en inglés para cada clave extraída?
Confirmar que defaultValue se rellena desde la cadena fuente en lugar de dejar en blanco, ya que un respaldo en blanco significa que una traducción ausente se renderiza como nada en lugar de en inglés.
¿Eliminar las teclas no usadas borrará alguna vez una clave que está en medio de una traducción?
La opción removeUnusedKeys de i18next-scanner puede eliminar claves que ya no están referenciadas en el código — confirmar que esa opción no está borrando teclas que un traductor aún no terminó.
¿Dónde van los archivos JSON extraídos una vez que se ejecuta el escaneo?
Antes de automatizar este paso en la integración continua (CI), decide si los archivos generados se envían directamente al repositorio o se enrutan a través de un conector a una plataforma de traducción.
¿Cómo encaja Smartling una vez extraídas las claves JavaScript i18n?
i18next-scanner y sus enlaces al framework resuelven la extracción —convirtiendo el código fuente en archivos JSON de localización— pero ninguno de ellos traduce esos archivos ni mantiene la forma plural correcta en todos los idiomas. El analizador JSON de Smartling lee directamente las claves y matrices anidadas que genera i18next-scanner, sin necesidad de aplanar el archivo previamente. En lo que respecta a los plurales, el formato de clave plural propio de i18next no es leído de forma nativa por las herramientas basadas en ICU, por lo que Smartling creó una extensión ICU MessageFormat para i18next que soluciona ese problema sin necesidad de una conversión manual (Centro de ayuda de Smartling, ICU MessageFormat). Una vez que el JSON extraído llega a un repositorio, el conector de GitHub de Smartling puede monitorear esa rama e iniciar automáticamente un flujo de trabajo de traducción para las claves nuevas o modificadas, devolviendo el JSON traducido como una solicitud de extracción en lugar de una carga manual de archivos.
¿Listo para ver a Smartling en acción?
Converse con alguien del equipo de Smartling para identificar cómo podemos ayudarle a aprovechar mejor su presupuesto al entregarle traducciones con la más alta calidad, mayor rapidez y a costos mucho más bajos.