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.RUSSIAN, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.RUSSIAN,  },};export default config;

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

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

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

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

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

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

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

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

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

Постройте свои словари

Вы можете построить свои словари, используя intlayer-cli.

npx intlayer build

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

Типичный вывод может выглядеть так:

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

Построить ресурсы 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        ├── ru        │   ├── client-component.json        │   └── server-component.json        ├── es        │   ├── client-component.json        │   └── server-component.json        └── fr            ├── client-component.json            └── server-component.json

Например, ru/client-component.json может выглядеть следующим образом:

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

Построить словари для i18next или 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        ├── ru        │   ├── client-component.json        │   └── server-component.json        ├── es        │   ├── client-component.json        │   └── server-component.json        └── fr            ├── client-component.json            └── server-component.json

Например, ru/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()
• getTranslationContent()
• getEnumerationContent()
• getLocaleName()
• getLocaleLang()
• getHTMLTextDir()
• getPathWithoutLocale()
• getMultilingualUrls()
• getLocalizedUrl()
• getPathWithoutLocale()