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";// Конфигурация Intlayerconst config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};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 { t, type Dictionary } from "intlayer";// Объявляем контент для компонента клиентаconst clientComponentContent = {  key: "client-component",  content: {    myTranslatedContent: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola Mundo",      ru: "Привет, мир",    }),    numberOfCar: enu({      "<-1": "Меньше минус одной машины",      "-1": "Минус одна машина",      "0": "Нет машин",      "1": "Одна машина",      ">5": "Несколько машин",      ">19": "Много машин",    }),  },} satisfies Dictionary;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  # Содержит автоматически сгенерированные определения типов словаря        ├── intlayer.d.ts  # Определения типов Intlayer        ├── client-component.d.ts        └── server-component.d.ts

...