Wie Intlayer funktioniert

Übersicht

Die Hauptidee hinter Intlayer ist die komponentenbasierte Inhaltsverwaltung. Die Idee ist, dass Sie Ihre Inhalte überall in Ihrem Code deklarieren können, z. B. im selben Verzeichnis wie Ihre Komponente.

.└── Komponenten    └── MeineKomponente        ├── index.content.cjs        └── index.mjs

Dazu hat Intlayer die Aufgabe, alle Ihre Inhaltsdeklarationsdateien in allen verschiedenen Formaten, die in Ihrem Projekt vorhanden sind, zu finden und daraus die Wörterbücher zu generieren.

Es gibt also zwei Hauptschritte:

• Build-Schritt
• Interpretationsschritt

Build-Schritt der Wörterbücher

Der Build-Schritt kann auf drei Arten durchgeführt werden:

• Verwendung der CLI mit npx intlayer build
• Verwendung der VSCode-Erweiterung
• Verwendung von App-Plugins wie dem vite-intlayer-Paket oder deren Äquivalenten für Next.js. Wenn Sie eines dieser Plugins verwenden, wird Intlayer Ihre Wörterbücher automatisch erstellen, wenn Sie Ihre Anwendung starten (dev) oder bauen (prod).

1. Deklaration von Inhaltsdateien

   • Inhaltsdateien können in verschiedenen Formaten definiert werden, wie TypeScript, ECMAScript, CommonJS oder JSON.
   • Inhaltsdateien können überall im Projekt definiert werden, was eine bessere Wartung und Skalierbarkeit ermöglicht. Es ist wichtig, die Dateierweiterungskonventionen für Inhaltsdateien zu beachten. Diese Erweiterung ist standardmäßig *.content.{js|cjs|mjs|ts|tsx|json}, kann jedoch in der Konfigurationsdatei geändert werden.

2. Generierung von Wörterbüchern

   • Wörterbücher werden aus Inhaltsdateien generiert. Standardmäßig werden Intlayer-Wörterbücher im Verzeichnis .intlayer/dictionaries des Projekts generiert.
   • Diese Wörterbücher werden in verschiedenen Formaten generiert, um alle Anforderungen zu erfüllen und die Leistung der Anwendung zu optimieren.

3. Generierung von Wörterbuchtypen Basierend auf Ihren Wörterbüchern generiert Intlayer Typen, um sie in Ihrer Anwendung nutzbar zu machen.

• Wörterbuchtypen werden aus Intlayer-Content-Deklarationsdateien generiert. Standardmäßig werden Intlayer-Wörterbuchtypen im Verzeichnis .intlayer/types des Projekts generiert.

• Intlayer Modulerweiterung ist eine TypeScript-Funktion, die es Ihnen ermöglicht, zusätzliche Typen für Intlayer zu definieren. Dies erleichtert die Entwicklungserfahrung, indem verfügbare oder erforderliche Argumente vorgeschlagen werden. Unter den generierten Typen werden Intlayer-Wörterbuchtypen oder sogar Sprachkonfigurationstypen zur Datei types/intlayer.d.ts hinzugefügt und von anderen Paketen verwendet. Dazu muss die Datei tsconfig.json so konfiguriert sein, dass sie das types-Verzeichnis des Projekts einbezieht.

Interpretationsschritt der Wörterbücher

Mit Intlayer greifen Sie über den useIntlayer-Hook auf Ihre Inhalte in Ihrer Anwendung zu.

const MeineKomponente = () => {  const content = useIntlayer("meine-komponente");  return <div>{content.title}</div>;};

Dieser Hook übernimmt die Lokalisierungserkennung für Sie und gibt die Inhalte für die aktuelle Sprache zurück. Mit diesem Hook können Sie auch Markdown interpretieren, Pluralisierung verwalten und mehr.

Um alle Funktionen von Intlayer zu sehen, können Sie die Wörterbuchdokumentation lesen.

Entfernte Inhalte

Intlayer ermöglicht es Ihnen, Inhalte lokal zu deklarieren und sie dann in das CMS zu exportieren, damit sie von Ihrem nicht-technischen Team bearbeitet werden können.

So können Sie Inhalte ähnlich wie bei Git für Ihren Code vom CMS in Ihre Anwendung pushen und pullen.

Für externalisierte Wörterbücher, die das CMS verwenden, führt Intlayer eine einfache Abrufoperation durch, um entfernte Wörterbücher abzurufen und mit Ihren lokalen zu verschmelzen. Wenn in Ihrem Projekt konfiguriert, verwaltet Intlayer automatisch das Abrufen der Inhalte aus dem CMS, wenn die Anwendung startet (dev) oder gebaut wird (prod).

Visueller Editor

Intlayer bietet auch einen visuellen Editor, mit dem Sie Ihre Inhalte visuell bearbeiten können. Dieser visuelle Editor ist im externen Paket intlayer-editor verfügbar.

• Der Server ist eine einfache Express-Anwendung, die Anfragen vom Client entgegennimmt und den Inhalt Ihrer Anwendung, wie die dictionaries und die Konfiguration, abruft, um sie auf der Client-Seite zugänglich zu machen.
• Der Client hingegen ist eine React-Anwendung, die verwendet wird, um mit Ihren Inhalten über eine visuelle Oberfläche zu interagieren. Wenn Sie Ihre Inhalte mit useIntlayer aufrufen und der Editor aktiviert ist, werden Ihre Strings automatisch mit einem Proxy-Objekt namens IntlayerNode umschlossen. Dieses Node verwendet window.sendMessage, um mit einem eingebetteten iframe zu kommunizieren, das die Oberfläche des visuellen Editors enthält.
  Auf der Editor-Seite hört der Editor auf diese Nachrichten und simuliert eine echte Interaktion mit Ihren Inhalten, sodass Sie den Text direkt im Kontext Ihrer Anwendung bearbeiten können.

Optimierung des App-Builds

Um die Bundle-Größe Ihrer Anwendung zu optimieren, bietet Intlayer zwei Plugins zur Optimierung des Builds Ihrer Anwendung: @intlayer/babel und @intlayer/swc Plugins. Die Babel- und SWC-Plugins funktionieren, indem sie den Abstract Syntax Tree (AST) Ihrer Anwendung analysieren, um Aufrufe von Intlayer-Funktionen durch optimierten Code zu ersetzen. Dieser Prozess macht Ihr endgültiges Bundle in der Produktion leichter, indem sichergestellt wird, dass nur die tatsächlich verwendeten Wörterbücher importiert werden, das Chunking optimiert und die Bundle-Größe reduziert wird.

Im Entwicklungsmodus verwendet Intlayer einen zentralisierten statischen Import für Wörterbücher, um die Entwicklungserfahrung zu vereinfachen.

Durch Aktivieren der Option activateDynamicImport in der Konfiguration verwendet Intlayer den dynamischen Import, um die Wörterbücher zu laden. Diese Option ist standardmäßig deaktiviert, um asynchrone Verarbeitung beim Rendern der Anwendung zu vermeiden.

@intlayer/babel ist standardmäßig im vite-intlayer-Paket enthalten,

@intlayer/swc ist standardmäßig nicht im next-intlayer-Paket installiert, da SWC-Plugins in Next.js noch experimentell sind.

Um zu sehen, wie Sie den Build Ihrer Anwendung konfigurieren können, lesen Sie die Konfigurationsdokumentation.

Pakete

Intlayer besteht aus mehreren Paketen, die jeweils eine spezifische Rolle im Übersetzungsprozess spielen. Hier ist eine grafische Darstellung der Struktur dieses Pakets:

intlayer

Das intlayer-Paket wird in Anwendungen verwendet, um Inhalte in Inhaltsdateien zu deklarieren.

react-intlayer

Das react-intlayer-Paket wird verwendet, um Intlayer-Wörterbücher zu interpretieren und in React-Anwendungen nutzbar zu machen.

next-intlayer

Das next-intlayer-Paket wird als Schicht über react-intlayer verwendet, um Intlayer-Wörterbücher in Next.js-Anwendungen nutzbar zu machen. Es integriert wesentliche Funktionen, um Intlayer in einer Next.js-Umgebung zum Laufen zu bringen, wie Übersetzungsmiddleware, Routing oder die Konfiguration der Datei next.config.js.

vue-intlayer

Das vue-intlayer-Paket wird verwendet, um Intlayer-Wörterbücher zu interpretieren und in Vue-Anwendungen nutzbar zu machen.

nuxt-intlayer

Das nuxt-intlayer-Paket ist ein Nuxt-Modul, um Intlayer-Wörterbücher in Nuxt-Anwendungen nutzbar zu machen. Es integriert wesentliche Funktionen, damit Intlayer in einer Nuxt-Umgebung funktioniert, wie z. B. Übersetzungs-Middleware, Routing oder die Konfiguration der nuxt.config.js-Datei.

svelte-intlayer (WIP)

Das svelte-intlayer-Paket wird verwendet, um Intlayer-Wörterbücher zu interpretieren und in Svelte-Anwendungen nutzbar zu machen.

solid-intlayer (WIP)

Das solid-intlayer-Paket wird verwendet, um Intlayer-Wörterbücher zu interpretieren und in Solid.js-Anwendungen nutzbar zu machen.

preact-intlayer

Das preact-intlayer-Paket wird verwendet, um Intlayer-Wörterbücher zu interpretieren und in Preact-Anwendungen nutzbar zu machen.

angular-intlayer (WIP)

Das angular-intlayer-Paket wird verwendet, um Intlayer-Wörterbücher zu interpretieren und in Angular-Anwendungen nutzbar zu machen.

express-intlayer

Das express-intlayer-Paket wird verwendet, um Intlayer auf einem Express.js-Backend zu nutzen.

react-native-intlayer

Das react-native-intlayer-Paket bietet Tools, die Plugins für Intlayer integrieren, um mit dem Metro-Bundler zu arbeiten.

lynx-intlayer

Das lynx-intlayer-Paket bietet Tools, die Plugins für Intlayer integrieren, um mit dem Lynx-Bundler zu arbeiten.

vite-intlayer

Beinhaltet das Vite-Plugin zur Integration von Intlayer mit dem Vite-Bundler sowie Middleware zur Erkennung der bevorzugten Sprache des Benutzers, Verwaltung von Cookies und Handhabung von URL-Weiterleitungen.

react-scripts-intlayer

Beinhaltet die react-scripts-intlayer Befehle und Plugins zur Integration von Intlayer in Anwendungen, die auf Create React App basieren. Diese Plugins basieren auf craco und enthalten zusätzliche Konfigurationen für den Webpack Bundler.

intlayer-editor

Das intlayer-editor Paket wird verwendet, um die Nutzung des visuellen Editors zu ermöglichen. Dieses optionale Paket kann in Anwendungen installiert werden und wird vom react-intlayer Paket verwendet.
Es besteht aus zwei Teilen: dem Server und dem Client.

Der Client enthält UI-Elemente, die von react-intlayer verwendet werden.

Der Server, basierend auf Express, wird verwendet, um Anfragen des visuellen Editors zu empfangen und Inhaltsdateien zu verwalten oder zu ändern.

intlayer-cli

Das intlayer-cli Paket kann verwendet werden, um Wörterbücher mit dem Befehl npx intlayer dictionaries build zu generieren. Wenn intlayer bereits installiert ist, wird die CLI automatisch installiert und dieses Paket ist nicht erforderlich.

@intlayer/core

Das @intlayer/core Paket ist das Hauptpaket von Intlayer. Es enthält Funktionen zur Übersetzung und Wörterbuchverwaltung. @intlayer/core ist plattformübergreifend und wird von anderen Paketen verwendet, um Wörterbücher zu interpretieren.

@intlayer/config

Das @intlayer/config Paket wird verwendet, um Intlayer-Einstellungen zu konfigurieren, wie z. B. verfügbare Sprachen, Next.js Middleware-Parameter oder die integrierten Editor-Einstellungen.

@intlayer/webpack

Das @intlayer/webpack Paket wird verwendet, um eine Webpack-Konfiguration bereitzustellen, die eine auf Webpack basierende Anwendung mit Intlayer kompatibel macht. Das Paket stellt außerdem ein Plugin bereit, das zu einer bestehenden Webpack-Anwendung hinzugefügt werden kann.

@intlayer/cli

Das @intlayer/cli Paket ist ein NPM-Paket, das verwendet wird, um Skripte im Zusammenhang mit den Intlayer-Befehlszeilenschnittstellen zu deklarieren. Es stellt die Einheitlichkeit aller Intlayer-CLI-Befehle sicher. Dieses Paket wird insbesondere von den Paketen intlayer-cli und intlayer verwendet.

@intlayer/mcp

Das @intlayer/mcp Paket stellt einen MCP (Model Context Protocol) Server bereit, der KI-gestützte IDE-Unterstützung speziell für das Intlayer-Ökosystem liefert. Es lädt automatisch die Dokumentation und integriert sich in die Intlayer CLI.

@intlayer/dictionaries-entry & @intlayer/unmerged-dictionaries-entry & @intlayer/dynamic-dictionaries-entry

Die Pakete @intlayer/dictionaries-entry, @intlayer/unmerged-dictionaries-entry und @intlayer/dynamic-dictionaries-entry geben den Einstiegspfad der Intlayer-Wörterbücher zurück. Da eine Suche im Dateisystem vom Browser aus nicht möglich ist, kann der Einstiegspfad der Wörterbücher mit Bundlern wie Webpack oder Rollup nicht ermittelt werden. Diese Pakete sind so konzipiert, dass sie als Aliase verwendet werden können, um eine Optimierung des Bundlings über verschiedene Bundler wie Vite, Webpack und Turbopack zu ermöglichen.

@intlayer/chokidar

Das @intlayer/chokidar Paket wird verwendet, um Inhaltsdateien zu überwachen und das geänderte Wörterbuch bei jeder Änderung neu zu generieren.

@intlayer/editor

Das @intlayer/editor Paket stellt die Dienstprogramme im Zusammenhang mit dem Wörterbuch-Editor bereit. Es enthält insbesondere die API, um eine Anwendung mit dem Intlayer-Editor zu verbinden, sowie Dienstprogramme zur Manipulation von Wörterbüchern. Dieses Paket ist plattformübergreifend.

@intlayer/editor-react

Das @intlayer/editor-react Paket stellt Zustände, Kontexte, Hooks und Komponenten bereit, um eine React-Anwendung mit dem Intlayer-Editor zu verbinden.

@intlayer/babel

Das @intlayer/babel Paket stellt Werkzeuge bereit, die das Bundling von Wörterbüchern für Vite- und Webpack-basierte Anwendungen optimieren.

@intlayer/swc

Das @intlayer/swc Paket stellt Werkzeuge bereit, die das Bundling von Wörterbüchern für Next.js-Anwendungen optimieren.

@intlayer/api

Das @intlayer/api Paket ist ein API-SDK, um mit dem Backend zu interagieren.

@intlayer/design-system

Das @intlayer/design-system Paket wird verwendet, um Designelemente zwischen dem CMS und dem visuellen Editor zu teilen.

@intlayer/backend

Das @intlayer/backend Paket exportiert Backend-Typen und wird in Zukunft das Backend als eigenständiges Paket anbieten.

Chat mit unserer intelligenten Dokumentation

• Stellen Sie Ihre Fragen an unsere intelligente Dokumentation

Dokumentationsverlauf

• 5.5.10 - 2025-06-29: Initialer Verlauf