vite-plugin-i18n-json-md

🇬🇧 English | 🇪🇸 Español | ru Русский

Обзор

vite-plugin-i18n-json-md — это плагин для Vite, который значительно упрощает интернационализацию вашего приложения. Он позволяет переводить текст из JSON5 и Markdown форматов в стандартный JSON для i18n файлов.

Это делает процесс перевода более удобным и улучшает взаимодействие между разработчиками и переводчиками.

Использование ИИ для перевода этих текстовых файлов ускоряет процесс и повышает качество переводов, избавляя от необходимости использовать дополнительные инструменты.

Возможности

• Поддержка JSON5: Используйте JSON5 для файлов перевода, что позволяет добавлять комментарии и делает синтаксис более понятным.
• Интеграция Markdown: Пишите переводы в Markdown, что упрощает работу со сложным форматированием текста.
• Автоматическая компиляция: Автоматически компилируйте ваши JSON5 и Markdown файлы в стандартные JSON файлы для использования в приложении.
• Интеграция с Vite: Легко интегрируется с Vite, обеспечивая быструю и эффективную сборку.

Установка

Чтобы установить плагин, используйте npm, yarn или pnpm:

npm install vite-plugin-i18n-json-md --save-dev

yarn add vite-plugin-i18n-json-md --dev

pnpm add vite-plugin-i18n-json-md --dev

Параметры конфигурации

Плагин предлагает следующие параметры конфигурации:

sourceDir (Обязательный)

• Тип: string
• Описание: Директория, где находятся исходные файлы переводов. Плагин также соберет все файлы из поддиректорий соответствующей локали.
• Пример: 'src/locales'

outputDir (Обязательный)

• Тип: string
• Описание: Директория, где будут генерироваться скомпилированные файлы переводов.
• Пример: 'src/assets/i18n'

locales (Обязательный)

• Тип: string[]
• Описание: Массив строк локалей для обработки. Они рассматриваются как поддиректории внутри sourceDir.
• Пример: ['en', 'es', 'zh-CN']

mode (Необязательный)

• Тип: "dev" | "prod" | "both" | "off"
• По умолчанию: "both"
• Описание: Определяет, в какой среде работает плагин.
  • "dev": Активен только во время разработки
  • "prod": Активен только во время production сборки
  • "both": Активен в разработке и production
  • "off": Плагин отключен

minify (Необязательный)

• Тип: boolean
• По умолчанию: false
• Описание: Минифицировать ли выходные файлы переводов.

outputFormat (Необязательный)

• Тип: "json" | "json5" | "js"
• По умолчанию: "json"
• Описание: Формат генерируемых файлов переводов.

externalLinks (Необязательный)

• Тип: boolean
• По умолчанию: false
• Описание: Добавляет target="_blank" к ссылкам.

Пример конфигурации

Вот пример конфигурации:

import { defineConfig } from 'vite';
import { jsonMdPlugin } from 'vite-plugin-i18n-json-md';

export default defineConfig({
  plugins: [
    jsonMdPlugin({
      sourceDir: 'src/locales',
      outputDir: 'src/assets/i18n',
      locales: ['en', 'fr', 'es'],
      mode: 'both',
      minify: true,
      outputFormat: 'json',
      externalLinks: true
    })
  ]
});

Параметры обработки Markdown

Плагин поддерживает два основных способа обработки markdown:

1. Встроенный Markdown

Используйте префикс md: для обработки встроенного markdown непосредственно в JSON5 файлах:

{
  "welcome": {
    "title": "md:# Добро пожаловать на нашу платформу",
    "description": "md:Мы предлагаем:\n\n- Функция Один\n- Функция Два\n- Функция Три"
  }
}

2. Внешние Markdown файлы

Используйте префикс md:@ для включения внешних markdown файлов. Можно использовать поддиректории:

{
  "welcome": {
    // Будет искать `src/locales/en/legal/privacy-policy.md`, если sourceDir - `src/locales`, а локаль - `en`
    "privacyPolicy": "md:@legal/privacy-policy.md"
  }
}

Пример: От JSON5 файлов с внешним Markdown к форматированному JSON

Входные файлы

src/locales/en/welcome.json5

{
  // Раздел приветствия с markdown форматированием и внешним markdown
  "title": "md:# Добро пожаловать на **Нашу Платформу**",
  "subtitle": "md:Откройте для себя *удивительные* возможности",
  "features": "md:@md/features.md",
  "description": "Комплексная платформа для современных разработчиков",
  "callToAction": {
    "text": "md:**[Начать прямо сейчас →](https://example.com/signup)**",
    "style": "primary"
  }
}

src/locales/en/user.json5

{
  // Сообщения, связанные с пользователем
  "greeting": "Привет, {name}!",
  "profile": {
    "complete_profile": "md:*Завершите профиль* для разблокировки **всех функций**"
  }
}

Внешний Markdown файл: src/locales/en/md/features.md

## Наши ключевые функции

- 🚀 Высокоэффективный рендеринг
- 💡 Инновационные шаблоны проектирования
- 🔒 Передовые протоколы безопасности
- 🌐 Поддержка многоязычности
- ⚡ Молниеносная компиляция

Выход: en.json

{
  "title": "<h1>Добро пожаловать на <strong>Нашу Платформу</strong></h1>",
  "subtitle": "<p>Откройте для себя <em>удивительные</em> возможности</p>",
  "features": "<h2>Наши ключевые функции</h2>\n<ul>\n<li>🚀 Высокоэффективный рендеринг</li>\n<li>💡 Инновационные шаблоны проектирования</li>\n<li>🔒 Передовые протоколы безопасности</li>\n<li>🌐 Поддержка многоязычности</li>\n<li>⚡ Молниеносная компиляция</li>\n</ul>",
  "description": "Комплексная платформа для современных разработчиков",
  "callToAction": {
    "text": "<p><strong><a href=\"https://example.com/signup\">Начать прямо сейчас →</a></strong></p>",
    "style": "primary"
  },
  "greeting": "Привет, {name}!",
  "profile": {
    "complete_profile": "<p><em>Завершите профиль</em> для разблокировки <strong>всех функций</strong></p>"
  }
}

Преимущества внешнего Markdown

• Отделение сложного контента в отдельные markdown файлы
• Легкий перевод markdown файлов с помощью ИИ-инструментов
• Организация и модульность переводов

Лучшие практики

1. Используйте префикс md: для markdown-контента
2. Комбинируйте обычный текст и markdown
3. Используйте MD / HTML-форматирование для текстов с большим количеством форматирования
4. Поддерживайте читаемость и удобство сопровождения переводов

Лицензия

MIT License