intlayer: NPM-Paket zur Verwaltung der mehrsprachigen Inhaltsdeklaration (i18n)

Intlayer ist eine Suite von Paketen, die speziell für JavaScript-Entwickler entwickelt wurde. Es ist mit Frameworks wie React, Next.js und Express.js kompatibel.

Das intlayer-Pakets ermöglicht es Ihnen, Ihren Inhalt überall in Ihrem Code zu deklarieren. Es konvertiert mehrsprachige Inhaltsdeklarationen in strukturierte Wörterbücher, die nahtlos in Ihre Anwendung integriert werden. Mit TypeScript verbessert Intlayer Ihre Entwicklung, indem es leistungsstärkere, effizientere Werkzeuge bereitstellt.

Warum Intlayer integrieren?

• JavaScript-basiertes Inhaltsmanagement: Nutzen Sie die Flexibilität von JavaScript, um Ihre Inhalte effizient zu definieren und zu verwalten.
• Typensichere Umgebung: Nutzen Sie TypeScript, um sicherzustellen, dass alle Ihre Inhaltsdefinitionen präzise und fehlerfrei sind.
• Integrierte Inhaltsdateien: Halten Sie Ihre Übersetzungen in der Nähe ihrer jeweiligen Komponenten, was die Wartbarkeit und Klarheit erhöht.

Installation

Installieren Sie das erforderliche Paket mit Ihrem bevorzugten Paketmanager:

npm install intlayer

Konfigurieren Sie Intlayer

Intlayer bietet eine Konfigurationsdatei, um Ihr Projekt einzurichten. Platzieren Sie diese Datei im Stammverzeichnis Ihres Projekts.

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

Für eine vollständige Liste verfügbarer Parameter, siehe die Konfigurationsdokumentation.

Beispiel für die Verwendung

Mit Intlayer können Sie Ihren Inhalt überall in Ihrem Code strukturiert deklarieren.

Standardmäßig scannt Intlayer nach Dateien mit der Erweiterung .content.{ts,tsx,js,jsx,mjs,cjs}.

Sie können die Standarderweiterung ändern, indem Sie die contentDir-Eigenschaft in der Konfigurationsdatei festlegen.

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

Deklarieren Sie Ihren Inhalt

Hier ist ein Beispiel für die Inhaltsdeklaration:

import { type DeclarationContent, t } from "intlayer";const clientComponentContent = {  key: "client-component",  content: {    myTranslatedContent: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola Mundo",    }),    numberOfCar: enu({      "<-1": "Weniger als minus ein Auto",      "-1": "Minus ein Auto",      "0": "Keine Autos",      "1": "Ein Auto",      ">5": "Einige Autos",      ">19": "Viele Autos",    }),  },} satisfies DeclarationContent;export default clientComponentContent;

Erstellen Sie Ihre Wörterbücher

Sie können Ihre Wörterbücher mit dem intlayer-cli erstellen.

npx intlayer build

Dieser Befehl scannt alle *.content.*-Dateien, kompiliert sie und schreibt die Ergebnisse in das Verzeichnis, das in Ihrer intlayer.config.ts angegeben ist (standardmäßig ./.intlayer).

Eine typische Ausgabe kann folgendermaßen aussehen:

.├── .intlayer│   ├── dictionary  # Enthält das Wörterbuch Ihres Inhalts│   │   ├── client-component.json│   │   └── server-component.json│   ├── main  # Enthält den Einstiegspunkt Ihres Wörterbuchs für die Verwendung in Ihrer Anwendung│   │   ├── dictionary.cjs│   │   └── dictionary.mjs│   └── types  # Enthält die automatisch generierten Typdefinitionen Ihres Wörterbuchs│       ├── client-component.d.ts│       └── server-component.d.ts└── types    └── intlayer.d.ts  # Enthält die automatisch generierten Typdefinitionen von Intlayer

i18next-Ressourcen erstellen

Intlayer kann so konfiguriert werden, dass Wörterbücher für i18next erstellt werden. Dazu müssen Sie die folgende Konfiguration in Ihre intlayer.config.ts-Datei einfügen:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  /* ... */  content: {    // Weist Intlayer an, Nachrichten Dateien für i18next zu generieren    dictionaryOutput: ["i18next"],    // Das Verzeichnis, in dem Intlayer Ihre Nachrichten-JSON-Dateien schreiben wird    i18nextResourcesDir: "./i18next/resources",  },};

Für eine vollständige Liste verfügbarer Parameter, siehe die Konfigurationsdokumentation.

Ausgabe:

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

Zum Beispiel könnte die en/client-component.json folgendermaßen aussehen:

{  "myTranslatedContent": "Hello World",  "zero_numberOfCar": "Keine Autos",  "one_numberOfCar": "Ein Auto",  "two_numberOfCar": "Zwei Autos",  "other_numberOfCar": "Einige Autos"}

i18next oder next-intl Wörterbücher erstellen

Intlayer kann so konfiguriert werden, dass Wörterbücher für i18next oder next-intl erstellt werden. Dazu müssen Sie die folgende Konfiguration in Ihre intlayer.config.ts-Datei einfügen:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  /* ... */  content: {    // Weist Intlayer an, Nachrichten Dateien für i18next zu generieren    dictionaryOutput: ["next-intl"],    // Das Verzeichnis, in dem Intlayer Ihre Nachrichten-JSON-Dateien schreiben wird    nextIntlMessagesDir: "./i18next/messages",  },};

Für eine vollständige Liste verfügbarer Parameter, siehe die Konfigurationsdokumentation.

Ausgabe:

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

Zum Beispiel könnte die en/client-component.json folgendermaßen aussehen:

{  "myTranslatedContent": "Hello World",  "zero_numberOfCar": "Keine Autos",  "one_numberOfCar": "Ein Auto",  "two_numberOfCar": "Zwei Autos",  "other_numberOfCar": "Einige Autos"}

CLI-Tools

Intlayer bietet ein CLI-Tool, um:

• Ihre Inhaltsdeklarationen zu überprüfen und fehlende Übersetzungen zu vervollständigen
• Wörterbücher aus Ihren Inhaltsdeklarationen zu erstellen
• entfernte Wörterbücher von Ihrem CMS in Ihr lokales Projekt zu pushen und zu pullen

Konsultieren Sie intlayer-cli für weitere Informationen.

Verwenden Sie Intlayer in Ihrer Anwendung

Sobald Ihr Inhalt deklariert ist, können Sie Ihre Intlayer-Wörterbücher in Ihrer Anwendung konsumieren.

Intlayer ist als Paket für Ihre Anwendung verfügbar.

React-Anwendung

Um Intlayer in Ihrer React-Anwendung zu verwenden, können Sie react-intlayer verwenden.

Next.js-Anwendung

Um Intlayer in Ihrer Next.js-Anwendung zu verwenden, können Sie next-intlayer verwenden.

Express-Anwendung

Um Intlayer in Ihrer Express-Anwendung zu verwenden, können Sie express-intlayer verwenden.

Funktionen, die vom intlayer-Paket bereitgestellt werden

Das intlayer-Paket bietet auch einige Funktionen, um Ihnen zu helfen, Ihre Anwendung zu internationalisieren.

• getConfiguration()
• getTranslationContent()
• getEnumerationContent()
• getLocaleName()
• getLocaleLang()
• getHTMLTextDir()
• getPathWithoutLocale()
• getMultilingualUrls()
• getLocalizedUrl()
• getPathWithoutLocale()