Как работает Intlayer

Обзор

Роль Intlayer заключается в интерпретации файлов декларации контента JavaScript в словари.

Для этого Intlayer проходит через несколько этапов:

1. Декларация файлов контента

   • Файлы контента могут быть определены в различных форматах, таких как TypeScript, ECMAScript, CommonJS или JSON.
   • Файлы контента могут быть определены в любом месте проекта, что позволяет улучшить обслуживание и масштабируемость. Важно соблюдать соглашения о расширениях файлов для файлов контента. Это расширение по умолчанию *.content.{js|cjs|mjs|ts|tsx|json}, но оно может быть изменено в файле конфигурации.

2. Генерация словарей

   • Словари генерируются из файлов контента. По умолчанию словари Intlayer генерируются в директории .intlayer/dictionary проекта.
   • Могут быть сгенерированы два типа словарей: словари Intlayer и словари i18n (бета).

3. Генерация типов словарей

   • Типы словарей генерируются из словарей Intlayer. По умолчанию типы словарей Intlayer генерируются в директории types проекта.

4. Генерация расширения модуля Intlayer

   • Расширение модуля Intlayer (module augmentation) — это функция TypeScript, которая позволяет определять дополнительные типы для Intlayer. Это упрощает процесс разработки, предлагая доступные или обязательные аргументы. Среди сгенерированных типов добавляются типы словарей Intlayer или даже типы конфигурации языка в файл types/intlayer.d.ts и используются другими пакетами. Для этого необходимо, чтобы файл tsconfig.json был настроен на включение директории types проекта.

5. Мониторинг файлов контента

   • Файлы контента отслеживаются для их регенерации при каждом изменении.

6. Интерпретация словарей

   • Словари, наконец, интерпретируются для использования в приложениях.

Пакеты

Intlayer состоит из нескольких пакетов, каждый из которых выполняет определенную роль в процессе перевода. Вот графическое представление структуры этого пакета:

intlayer

Пакет intlayer используется в приложениях для декларации контента в файлах контента.

react-intlayer

Пакет react-intlayer используется для интерпретации словарей Intlayer и их использования в React-приложениях.

next-intlayer

Пакет next-intlayer используется как слой поверх react-intlayer, чтобы сделать словари Intlayer пригодными для использования в приложениях Next.js. Он интегрирует основные функции для работы Intlayer в среде Next.js, такие как промежуточное ПО для перевода, маршрутизация или настройка файла next.config.js.

vite-intlayer

Включает плагин Vite для интеграции Intlayer с сборщиком Vite, а также промежуточное ПО для определения предпочтительного языка пользователя, управления cookies и обработки перенаправления URL.

react-scripts-intlayer

Включает команды и плагины react-scripts-intlayer для интеграции Intlayer с приложением, основанным на Create React App. Эти плагины основаны на craco и включают дополнительную конфигурацию для сборщика Webpack.

intlayer-editor

Пакет intlayer-editor используется для обеспечения использования визуального редактора. Этот пакет, опциональный, может быть установлен в приложениях и будет использоваться пакетом react-intlayer. Он состоит из двух частей: сервера и клиента.

Клиент содержит элементы пользовательского интерфейса, которые будут использоваться react-intlayer.

Сервер, основанный на Express, используется для получения запросов визуального редактора и управления или изменения файлов контента.

intlayer-cli

Пакет intlayer-cli может быть использован для генерации словарей с помощью команды npx intlayer build. Если intlayer уже установлен, CLI автоматически устанавливается, и этот пакет не требуется.

@intlayer/core

Пакет @intlayer/core является основным пакетом Intlayer. Он содержит функции управления переводами и словарями. @intlayer/core является мультиплатформенным и используется другими пакетами для интерпретации словарей.

@intlayer/config

Пакет @intlayer/config используется для настройки параметров Intlayer, таких как доступные языки, параметры промежуточного ПО Next.js или настройки встроенного редактора.

@intlayer/webpack

Пакет @intlayer/webpack используется для предоставления конфигурации Webpack, чтобы приложение на основе Webpack работало с Intlayer. Пакет также предоставляет плагин для добавления в существующее приложение Webpack.

@intlayer/cli

Пакет @intlayer/cli — это пакет NPM, который используется для декларации скриптов, связанных с интерфейсами командной строки Intlayer. Он обеспечивает единообразие всех команд CLI Intlayer. Этот пакет, в частности, используется пакетами intlayer-cli и intlayer.

@intlayer/dictionaries-entry

Пакет @intlayer/dictionaries-entry — это пакет, который только возвращает путь к словарям Intlayer. Поскольку поиск в файловой системе невозможен из браузера, использование сборщиков, таких как Webpack или Rollup, для получения пути к словарям невозможно. Этот пакет предназначен для алиасов.

@intlayer/chokidar

Пакет @intlayer/chokidar используется для мониторинга файлов контента и регенерации измененного словаря при каждом изменении.

@intlayer/editor

Пакет @intlayer/editor предоставляет утилиты, связанные с редактором словарей. Он включает API для интерфейса приложения с редактором Intlayer и утилиты для работы со словарями. Этот пакет является кроссплатформенным.

@intlayer/editor-react

Пакет @intlayer/editor-react предоставляет состояния, контексты, хуки и компоненты для интерфейса React-приложения с редактором Intlayer.

Чат с нашей умной документацией

• Задайте свои вопросы нашей умной документации