intlayer: NPM-Paket zur Verwaltung mehrsprachiger Wörterbücher (i18n)

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

Das intlayer-Paket ermöglicht es Ihnen, Ihre Inhalte überall in Ihrem Code zu deklarieren. Es wandelt mehrsprachige Inhaltsdeklarationen in strukturierte Wörterbücher um, die sich nahtlos in Ihre Anwendung integrieren lassen. Mit TypeScript verbessert Intlayer Ihre Entwicklung, indem es stärkere und effizientere Werkzeuge bereitstellt.

Warum Intlayer integrieren?

• JavaScript-gesteuertes Content-Management: Nutzen Sie die Flexibilität von JavaScript, um Ihre Inhalte effizient zu definieren und zu verwalten.
• Typensichere Umgebung: Verwenden Sie TypeScript, um sicherzustellen, dass alle Ihre Inhaltsdefinitionen präzise und fehlerfrei sind.
• Integrierte Inhaltsdateien: Halten Sie Ihre Übersetzungen nahe bei den jeweiligen Komponenten, um Wartbarkeit und Übersichtlichkeit zu verbessern.

Installation

Installieren Sie das erforderliche Paket mit Ihrem bevorzugten Paketmanager:

npm install intlayer

Intlayer konfigurieren

Intlayer stellt eine Konfigurationsdatei zur Verfügung, 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 der verfügbaren Parameter verweisen wir auf die Konfigurationsdokumentation.

Anwendungsbeispiel

Mit Intlayer können Sie Ihre Inhalte an beliebiger Stelle in Ihrem Codebase strukturiert deklarieren.

Standardmäßig durchsucht Intlayer Dateien mit der Erweiterung .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}.

Die Standarderweiterung kann durch Setzen der Eigenschaft contentDir in der Konfigurationsdatei geändert werden.

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

Deklarieren Sie Ihre Inhalte

Hier ist ein Beispiel für die Inhaltsdeklaration:

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": "Weniger als minus ein Auto",      "-1": "Minus ein Auto",      "0": "Keine Autos",      "1": "Ein Auto",      ">5": "Einige Autos",      ">19": "Viele Autos",    }),  },} satisfies Dictionary;export default clientComponentContent;

Erstellen Sie Ihre Wörterbücher

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

npx intlayer dictionaries build

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

Eine typische Ausgabe könnte wie folgt aussehen:

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

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 hinzufügen:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  /* ... */  content: {    // Teilt Intlayer mit, Nachrichtendateien für i18next zu generieren    dictionaryOutput: ["i18next"],    // Das Verzeichnis, in das Intlayer Ihre JSON-Nachrichtendateien schreibt    i18nextResourcesDir: "./i18next/resources",  },};

Für eine vollständige Liste der verfügbaren 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 wie folgt aussehen:

{  "myTranslatedContent": "Hello World",  "zero_numberOfCar": "No cars",  "one_numberOfCar": "One car",  "two_numberOfCar": "Two cars",  "other_numberOfCar": "Einige Autos"}

Erstellen von next-intl-Wörterbüchern

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 das Intlayer Ihre Nachrichten-JSON-Dateien schreibt    nextIntlMessagesDir: "./i18next/messages",  },};

Für eine vollständige Liste der verfügbaren 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 Datei en/client-component.json so aussehen:

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

CLI-Werkzeuge

Intlayer stellt ein CLI-Werkzeug bereit, um:

• Ihre Inhaltsdeklarationen zu prüfen und fehlende Übersetzungen zu ergänzen
• Wörterbücher aus Ihren Inhaltsdeklarationen zu erstellen
• entfernte Wörterbücher von Ihrem CMS in Ihr Lokalisierungsprojekt zu übertragen und abzurufen

Weitere Informationen finden Sie unter intlayer-cli.

Verwendung von Intlayer in Ihrer Anwendung

Nachdem Ihre Inhalte deklariert sind, können Sie Ihre Intlayer-Wörterbücher in Ihrer Anwendung verwenden.

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 nutzen.

Next.js-Anwendung

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

Express-Anwendung

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

Vom intlayer-Paket bereitgestellte Funktionen

Das intlayer-Paket stellt außerdem einige Funktionen bereit, die Ihnen helfen, Ihre Anwendung zu internationalisieren.

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

Dokumentationshistorie

• 5.5.10 - 2025-06-29: Historie initialisiert