intlayer: NPM-Paket zur Verwaltung eines mehrsprachigen Wörterbuchs (i18n)

Intlayer ist eine Suite von Paketen, die speziell für JavaScript-Entwickler entwickelt wurde. 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 konvertiert mehrsprachige Inhaltsdeklarationen in strukturierte Wörterbücher, die nahtlos in Ihre Anwendung integriert werden können. 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.
• Typensicheres Umfeld: 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, um Wartbarkeit und Klarheit zu verbessern.

Installation

Installieren Sie das erforderliche Paket mit Ihrem bevorzugten Paketmanager:

npm install intlayer

Intlayer konfigurieren

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 der verfügbaren Parameter lesen Sie die Konfigurationsdokumentation.

Beispiel für die Verwendung

Mit Intlayer können Sie Ihre Inhalte strukturiert überall in Ihrem Code 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 Eigenschaft contentDir in der Konfigurationsdatei festlegen.

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

Inhalte deklarieren

Hier ist ein Beispiel für eine Inhaltsdeklaration:

// Importieren von Funktionen und Typen aus Intlayerimport { t, type Dictionary } from "intlayer";// Deklaration der Inhalte für die Client-Komponenteconst 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 Dictionary;export default clientComponentContent;

Wörterbücher erstellen

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

Ein typisches Ergebnis könnte so aussehen:

.└── .intlayer    ├── dictionary  # Enthält das Wörterbuch Ihrer Inhalte    │   ├── client-component.json    │   └── server-component.json    ├── main  # Enthält den Einstiegspunkt Ihres Wörterbuchs zur Verwendung in Ihrer Anwendung    │   ├── 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. Dafür müssen Sie die folgende Konfiguration zu Ihrer intlayer.config.ts-Datei hinzufügen:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  /* ... */  content: {    // Sagt Intlayer, dass Nachrichten-Dateien für i18next generiert werden sollen    dictionaryOutput: ["i18next"],    // Das Verzeichnis, in das Intlayer Ihre Nachrichten-JSON-Dateien schreibt    i18nextResourcesDir: "./i18next/resources",  },};

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

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

next-intl-Wörterbücher erstellen

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

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  /* ... */  content: {    // Sagt Intlayer, dass Nachrichten-Dateien für next-intl generiert werden sollen    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 lesen Sie 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": "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 prü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 übertragen und umgekehrt

Lesen Sie intlayer-cli für weitere Informationen.

Intlayer in Ihrer Anwendung verwenden

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

Von intlayer bereitgestellte Funktionen

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

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