Intlayer Compiler | Automatisierte Inhaltsextraktion für i18n

Was ist der Intlayer Compiler?

Der Intlayer Compiler ist ein leistungsstarkes Werkzeug, das entwickelt wurde, um den Prozess der Internationalisierung (i18n) in Ihren Anwendungen zu automatisieren. Er durchsucht Ihren Quellcode (JSX, TSX, Vue, Svelte) nach Inhaltsdeklarationen, extrahiert diese und generiert automatisch die notwendigen Wörterbuchdateien. Dadurch können Sie Ihre Inhalte direkt bei den Komponenten belassen, während Intlayer die Verwaltung und Synchronisierung Ihrer Wörterbücher übernimmt.

Warum den Intlayer Compiler verwenden?

• Automatisierung: Beseitigt das manuelle Kopieren und Einfügen von Inhalten in Wörterbücher.
• Geschwindigkeit: Optimierte Inhaltsextraktion, die sicherstellt, dass Ihr Build-Prozess schnell bleibt.
• Entwicklererfahrung: Behalten Sie Inhaltsdeklarationen genau dort, wo sie verwendet werden, und verbessern Sie so die Wartbarkeit.
• Live-Updates: Unterstützt Hot Module Replacement (HMR) für sofortiges Feedback während der Entwicklung.

Siehe den Blogbeitrag Compiler vs. Declarative i18n für einen tieferen Vergleich.

Warum den Intlayer Compiler nicht verwenden?

Während der Compiler eine ausgezeichnete "funktioniert einfach so"-Erfahrung bietet, führt er auch einige Kompromisse ein, die Sie beachten sollten:

• Heuristische Mehrdeutigkeit: Der Compiler muss erraten, was benutzerorientierter Inhalt im Gegensatz zur Anwendungslogik ist (z. B. className="active", Statuscodes, Produkt-IDs). In komplexen Codebasen kann dies zu falschen Positiven oder übersehenen Zeichenketten führen, die manuelle Anmerkungen und Ausnahmen erfordern.
• Nur statische Extraktion: Die compilerbasierte Extraktion basiert auf statischer Analyse. Zeichenketten, die nur zur Laufzeit existieren (API-Fehlercodes, CMS-Felder usw.), können vom Compiler allein nicht entdeckt oder übersetzt werden, daher benötigen Sie immer noch eine ergänzende Laufzeit-i18n-Strategie.

Für einen tieferen architektonischen Vergleich siehe den Blogbeitrag Compiler vs. Declarative i18n.

Als Alternative, um Ihren i18n-Prozess zu automatisieren und gleichzeitig die volle Kontrolle über Ihren Inhalt zu behalten, bietet Intlayer auch einen Auto-Extraktionsbefehl intlayer transform (siehe CLI-Dokumentation) oder den Befehl Intlayer: extract content to Dictionary aus der Intlayer VS Code-Erweiterung (siehe VS Code-Erweiterungsdokumentation).

Verwendung

Vite

Für Vite-basierte Anwendungen (React, Vue, Svelte usw.) ist der einfachste Weg, den Compiler zu verwenden, das vite-intlayer Plugin.

Installation

npm install vite-intlayer

Konfiguration

Aktualisieren Sie Ihre vite.config.ts, um das intlayerCompiler Plugin einzubinden:

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({  plugins: [    intlayer(),    intlayerCompiler(), // Fügt das Compiler-Plugin hinzu  ],});

Framework-Unterstützung

Das Vite-Plugin erkennt und verarbeitet automatisch verschiedene Dateitypen:

• React / JSX / TSX: Wird nativ unterstützt.
• Vue: Erfordert @intlayer/vue-compiler.
• Svelte: Erfordert @intlayer/svelte-compiler.

Stellen Sie sicher, dass Sie das passende Compiler-Paket für Ihr Framework installieren:

# Für Vuenpm install @intlayer/vue-compiler# Für Sveltenpm install @intlayer/svelte-compiler

Next.js (Babel)

Für Next.js oder andere Webpack-basierte Anwendungen, die Babel verwenden, können Sie den Compiler mit dem @intlayer/babel Plugin konfigurieren.

Installation

npm install @intlayer/babel

Konfiguration

Aktualisieren Sie Ihre babel.config.js (oder babel.config.json), um das Extraktions-Plugin einzubinden. Wir stellen einen Helfer getExtractPluginOptions bereit, der Ihre Intlayer-Konfiguration automatisch lädt.

const {  intlayerExtractBabelPlugin,  intlayerOptimizeBabelPlugin,  getExtractPluginOptions,  getOptimizePluginOptions,} = require("@intlayer/babel");module.exports = {  presets: ["next/babel"],  plugins: [    // Extract content from components into dictionaries    [intlayerExtractBabelPlugin, getExtractPluginOptions()],    // Optimize imports by replacing useIntlayer with direct dictionary imports    [intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],  ],};

Diese Konfiguration stellt sicher, dass Inhalte, die in Ihren Komponenten deklariert sind, automatisch extrahiert und während Ihres Build-Prozesses zur Generierung von Wörterbüchern verwendet werden.