intlayer: NPM пакет для управления многоязычным словарём (i18n)

Intlayer - это набор пакетов, разработанных специально для JavaScript-разработчиков. Он совместим с такими фреймворками, как React, Next.js и Express.js.

Пакет intlayer позволяет объявлять ваш контент в любом месте вашего кода. Он преобразует многоязычные объявления контента в структурированные словари, которые бесшовно интегрируются в ваше приложение. С TypeScript Intlayer улучшает процесс разработки, предоставляя более мощные и эффективные инструменты.

Зачем интегрировать Intlayer?

• Управление контентом на базе JavaScript: Используйте гибкость JavaScript для эффективного определения и управления вашим контентом.
• Типобезопасная среда: Используйте TypeScript, чтобы все определения контента были точными и безошибочными.
• Интегрированные файлы контента: Держите переводы рядом с соответствующими компонентами, что повышает удобство поддержки и ясность.

Установка

Установите необходимый пакет, используя предпочитаемый менеджер пакетов:

npm install intlayer

Настройка Intlayer

Intlayer предоставляет файл конфигурации для настройки вашего проекта. Поместите этот файл в корень вашего проекта.

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH], // доступные локали    defaultLocale: Locales.ENGLISH, // локаль по умолчанию  },};export default config;

Для полного списка доступных параметров обратитесь к документации по конфигурации.

Пример использования

С помощью Intlayer вы можете объявлять свой контент структурированным образом в любом месте вашего кода.

По умолчанию Intlayer сканирует файлы с расширениями .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}.

Вы можете изменить расширение по умолчанию, установив свойство contentDir в файле конфигурации.

.├── intlayer.config.ts└── src    ├── ClientComponent    │   ├── index.content.ts    │   └── index.tsx    └── ServerComponent        ├── index.content.ts        └── index.tsx

Объявление вашего контента

Вот пример объявления контента:

import { t, type Dictionary } from "intlayer";const clientComponentContent = {  key: "client-component",  content: {    myTranslatedContent: t({      en: "Hello World",      es: "Hola Mundo",      fr: "Bonjour le monde",    }),    numberOfCar: enu({      "<-1": "Меньше чем минус одна машина",      "-1": "Минус одна машина",      "0": "Нет машин",      "1": "Одна машина",      ">5": "Несколько машин",      ">19": "Много машин",    }),  },} satisfies Dictionary;export default clientComponentContent;

Создайте свои словари

Вы можете создавать свои словари с помощью intlayer-cli.

npx intlayer dictionaries build

Эта команда сканирует все файлы с расширением *.content.*, компилирует их и записывает результаты в каталог, указанный в вашем файле intlayer.config.ts (по умолчанию, ./.intlayer).

Типичный результат может выглядеть следующим образом:

.└── .intlayer    ├── dictionary  # Содержит словарь вашего контента    │   ├── client-component.json    │   └── server-component.json    ├── main  # Содержит точку входа вашего словаря для использования в приложении    │   ├── dictionary.cjs    │   └── dictionary.mjs    └── types  # Содержит автоматически сгенерированные определения типов вашего словаря        ├── intlayer.d.ts  # Содержит автоматически сгенерированные определения типов Intlayer        ├── client-component.d.ts        └── server-component.d.ts

Создание ресурсов i18next

Intlayer можно настроить для создания словарей для i18next. Для этого необходимо добавить следующую конфигурацию в ваш файл intlayer.config.ts:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  /* ... */  content: {    // Указывает Intlayer генерировать файлы сообщений для i18next    dictionaryOutput: ["i18next"],    // Каталог, в который Intlayer будет записывать JSON-файлы сообщений    i18nextResourcesDir: "./i18next/resources",  },};

Для полного списка доступных параметров обратитесь к документации по конфигурации.

Вывод:

.└── i18next    └── resources        ├── en        │   ├── client-component.json        │   └── server-component.json        ├── es        │   ├── client-component.json        │   └── server-component.json        └── fr            ├── client-component.json            └── server-component.json

Например, файл en/client-component.json может выглядеть так:

{  "myTranslatedContent": "Hello World",  "zero_numberOfCar": "No cars",  "one_numberOfCar": "One car",  "two_numberOfCar": "Two cars",  "other_numberOfCar": "Некоторые машины"}

Создание словарей next-intl

Intlayer можно настроить для создания словарей для i18next или next-intl. Для этого необходимо добавить следующую конфигурацию в ваш файл intlayer.config.ts:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  /* ... */  content: {    // Указывает Intlayer генерировать файлы сообщений для i18next    dictionaryOutput: ["next-intl"],    // Каталог, в который Intlayer будет записывать ваши JSON-файлы сообщений    nextIntlMessagesDir: "./i18next/messages",  },};

Для полного списка доступных параметров обратитесь к документации по конфигурации.

Вывод:

.└── intl    └── messages        ├── en        │   ├── client-component.json        │   └── server-component.json        ├── es        │   ├── client-component.json        │   └── server-component.json        └── fr            ├── client-component.json            └── server-component.json

Например, файл en/client-component.json может выглядеть так:

{  "myTranslatedContent": "Привет, мир",  "zero_numberOfCar": "Нет машин",  "one_numberOfCar": "Одна машина",  "two_numberOfCar": "Две машины",  "other_numberOfCar": "Несколько машин"}

CLI инструменты

Intlayer предоставляет CLI-инструмент для:

• аудита ваших объявлений контента и дополнения отсутствующих переводов
• создания словарей из ваших объявлений контента
• загрузки и выгрузки удалённых словарей из вашей CMS в локальный проект

Подробнее смотрите в intlayer-cli.

Использование Intlayer в вашем приложении

После объявления вашего контента вы можете использовать словари Intlayer в вашем приложении.

Intlayer доступен как пакет для вашего приложения.

React-приложение

Чтобы использовать Intlayer в вашем React-приложении, вы можете использовать react-intlayer.

Next.js приложение

Чтобы использовать Intlayer в вашем Next.js-приложении, вы можете использовать next-intlayer.

Express приложение

Чтобы использовать Intlayer в вашем Express-приложении, вы можете использовать express-intlayer.

Функции, предоставляемые пакетом intlayer

Пакет intlayer также предоставляет некоторые функции, которые помогут вам интернационализировать ваше приложение.

• getConfiguration()
• getTranslation()
• getEnumeration()
• getLocaleName()
• getLocaleLang()
• getHTMLTextDir()
• getPathWithoutLocale()
• getMultilingualUrls()
• getLocalizedUrl()
• getPathWithoutLocale()

История документации

• 5.5.10 - 2025-06-29: Инициализация истории