Как автоматизировать ваши JSON-переводы i18next с помощью Intlayer

Что такое Intlayer?

Intlayer, это инновационная, открытая библиотека интернационализации, созданная для устранения недостатков традиционных решений i18n. Она предлагает современный подход к управлению контентом в JavaScript-приложениях.

Смотрите конкретное сравнение с i18next в нашем блоге next-i18next vs. next-intl vs. Intlayer.

Почему стоит сочетать Intlayer с i18next?

Хотя Intlayer предоставляет отличное самостоятельное решение для i18n (см. наше руководство по интеграции с Next.js), вы можете захотеть объединить его с i18next по нескольким причинам:

1. Существующая кодовая база: У вас уже есть реализованная система i18next, и вы хотите постепенно перейти на улучшенный опыт разработчика с Intlayer.
2. Требования наследия: Ваш проект требует совместимости с существующими плагинами или рабочими процессами i18next.
3. Знакомство команды: Ваша команда привыкла к i18next, но хочет улучшить управление контентом.
4. Использование возможностей Intlayer: Вы хотите использовать функции Intlayer, такие как декларация контента, управление ключами переводов, статус переводов и многое другое.

Для этого Intlayer может быть реализован как адаптер для i18next, чтобы помочь автоматизировать ваши JSON-переводы в CLI или CI/CD пайплайнах, тестировать переводы и многое другое.

Это руководство показывает, как использовать превосходную систему декларации контента Intlayer, сохраняя при этом совместимость с i18next.

Содержание

Пошаговое руководство по настройке Intlayer с i18next

Шаг 1: Установка зависимостей

Установите необходимые пакеты:

npm install intlayer @intlayer/sync-json-plugin --save-dev
npx intlayer init

pnpm add intlayer @intlayer/sync-json-plugin --save-dev
pnpm intlayer init

yarn add intlayer @intlayer/sync-json-plugin --dev
yarn intlayer init

bun add intlayer @intlayer/sync-json-plugin --dev
bun x intlayer init

Описание пакетов:

• intlayer: Основная библиотека для управления интернационализацией, декларации контента и сборки
• @intlayer/sync-json-plugin: Плагин для экспорта деклараций контента Intlayer в JSON-формат, совместимый с i18next

Шаг 2: Реализация плагина Intlayer для обертки JSON

Создайте файл конфигурации Intlayer для определения поддерживаемых локалей:

Если вы также хотите экспортировать JSON-словари для i18next, добавьте плагин syncJSON:

import { Locales, type IntlayerConfig } from "intlayer";
import { syncJSON } from "@intlayer/sync-json-plugin";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
    defaultLocale: Locales.ENGLISH,
  },
  plugins: [
    syncJSON({
      source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
    }),
  ],
};

export default config;

Плагин syncJSON автоматически обернет JSON. Он будет читать и записывать JSON-файлы без изменения архитектуры содержимого.

Если вы хотите, чтобы JSON сосуществовал с файлами деклараций контента Intlayer (.content файлы), Intlayer будет работать следующим образом:

1. загрузит как JSON, так и файлы деклараций контента и преобразует их в словарь Intlayer.
2. если возникнут конфликты между JSON и файлами деклараций контента, Intlayer выполнит слияние всех этих словарей. В зависимости от приоритета плагинов и приоритета файла декларации контента (все настраивается).

Если изменения вносятся с помощью CLI для перевода JSON или с помощью CMS, Intlayer обновит JSON-файл с новыми переводами.

Чтобы узнать больше подробностей о плагине syncJSON, пожалуйста, обратитесь к документации плагина syncJSON.

Конфигурация Git

Рекомендуется игнорировать автоматически сгенерированные файлы Intlayer:

# Игнорировать файлы, сгенерированные Intlayer
.intlayer

Эти файлы могут быть воссозданы в процессе сборки и не требуют добавления в систему контроля версий.

Расширение VS Code

Для улучшения опыта разработчика установите официальное расширение Intlayer для VS Code:

Установить из VS Code Marketplace