Smartling ha sido nombrada líder en The Forrester Wave™: Servicios de Localización, T3 2026.
Smartling nombrado líder en The Forrester Wave™
Lea el informe

¿Dónde puedes encontrar tutoriales de JavaScript i18n y qué hace i18next-scanner?

Los mejores tutoriales de JavaScript i18n están en los propios documentos de la biblioteca, de i18next.com guías propias y documentos específicos del marco para react-i18next, vue-i18n y next-intl, porque ningún curso de terceros cubre todos los enlaces del marco. i18next-scanner es una herramienta de línea de comandos independiente y de código abierto que analiza los archivos fuente de JavaScript, JSX y TypeScript en busca de llamadas a funciones de traducción y extrae automáticamente las claves en archivos JSON de configuración regional, sustituyendo la costumbre, propensa a errores, de editar a mano esos archivos a medida que la aplicación crece.

Última revisión: 17 de septiembre de 2026

¿Por qué el material de aprendizaje de JavaScript i18n parece tan disperso?

  • Los documentos de la biblioteca y las herramientas de extracción están en diferentes lugares. de i18next.com La documentación explica los ganchos, 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 que un tutorial que solo cubre el núcleo de i18next se salta por completo el paso de extracción.
  • Los enlaces marco fragmentan aún más la búsqueda. Un desarrollador de React que busca un tutorial de i18next necesita la API UseTranslation basada en ganchos de react-i18next, mientras que un desarrollador de Vue necesita la guía de API de composición 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 tiene un aspecto diferente según la sintaxis de JSX o plantilla que tenga que analizar.
  • La gestión de la extracción y la traducción se trata como un solo tema cuando tienen dos años. El i18next-scanner solo produce archivos JSON con claves y opciones de DefaultValue en inglés; no mueve esos archivos a un traductor, ni hace un seguimiento del estado de finalización ni gestiona formularios en plural para los idiomas de destino, es una capa independiente, 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 en busca de llamadas de traducción y genera los archivos JSON locales con los que realmente viene incluida una base de código; su propia referencia de configuración y README son la documentación principal de 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 el 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.

  1. Instala el escáner como dependencia de desarrollo : añade i18next-scanner vía npm o yarn junto a los paquetes i18next y react-i18next (o vue-i18n) que ya están en el proyecto.
  2. 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 utiliza el proyecto.
  3. 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.
  4. Ejecute el escáner y revise el JSON generado. Cada clave extraída aparece en un archivo JSON de configuración regional con la cadena fuente capturada como DefaultValue, que se convierte en la alternativa en inglés hasta que exista una traducción.
  5. Añade 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.
  • Están incorporando nuevos ingenieros que necesitan un punto de partida canónico a través de la documentación central de i18next, un enlace de framework 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 el 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 React necesita un lexer consciente de JSX que reconozca el componente Trans, no solo llamadas t() simples; 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 ha terminado.

¿Dónde van los archivos JSON extraídos una vez que se ejecuta el escaneo?
Decide si los archivos generados se comprometen directamente en el repositorio o se enrutan a través de un conector a una plataforma de traducción antes de que este paso se automatice en CI.

¿Cómo encaja Smartling una vez extraídas las claves JavaScript i18n?

El i18next-scanner y sus enlaces de marco resuelven la extracción (convierten el código fuente en archivos JSON de configuración regional), pero ninguno de ellos traduce esos archivos ni mantiene el plural correcto en todos los idiomas. El analizador JSON de Smartling lee las claves y matrices anidadas que i18next-scanner genera directamente, sin necesidad de aplanar primero el archivo. Para los plurales específicamente, las herramientas basadas en la UCI no leen de forma nativa el formato de claves plurales de i18next, por lo que Smartling creó una extensión de formato de mensajes de la UCI para i18next que cierra ese vacío sin un paso de conversión manual (centro de ayuda de Smartling, formato de mensajes de la UCI). Una vez que el JSON extraído llegue a un repositorio, el GitHub Connector de Smartling puede ver esa sucursal e iniciar automáticamente un flujo de trabajo de traducción con claves nuevas o modificadas, devolviendo el JSON traducido como una solicitud de extracción en lugar de subir archivos manualmente.

Preguntas relacionadas

¿Listo para ver a Smartling en acción?

Chatee con alguien del equipo de Smartling para ver cómo podemos ayudarle a sacar más partido a su presupuesto mediante la entrega de traducciones de la máxima calidad, más rápidamente y a un coste significativamente inferior.

Programar una reunión