intlayer Vite Plugin Dokumentation

Das intlayer Vite-Plugin integriert die Intlayer-Konfiguration in den Build-Prozess. Es verwaltet Dictionary-Aliase, startet im Entwicklungsmodus den Dictionary-Watcher und bereitet Dictionaries für den Build vor.

Verwendung

// vite.config.ts
import { defineConfig } from "vite";
import { intlayer } from "vite-intlayer";

export default defineConfig({
  plugins: [intlayer()],
});

Optionen

import type { IntlayerPluginOptions } from "vite-intlayer";

IntlayerPluginOptions erweitert GetConfigurationOptions (siehe @intlayer/config) mit den folgenden zusätzlichen Feldern:

Alle anderen Optionen (override, configFile, …) werden direkt an getConfiguration() weitergeleitet.

Beispiele

API-Routen von der Locale-Routing ignorieren

// vite.config.ts
import { defineConfig } from "vite";
import { intlayer } from "vite-intlayer";

export default defineConfig({
  plugins: [
    intlayer({
      proxy: {
        ignore: (req) => req.url?.startsWith("/api"),
      },
    }),
  ],
});

Mit einem benutzerdefinierten Konfigurationsdateipfad

export default defineConfig({
  plugins: [
    intlayer({
      configFile: "./config/intlayer.config.ts",
    }),
  ],
});

Mit compat-adapter Aufrufern

import { intlayer } from "vite-intlayer";
import { reactI18nextCallerConfig } from "@intlayer/react-i18next/plugin";

export default defineConfig({
  plugins: [
    intlayer({
      compatCallers: [reactI18nextCallerConfig],
    }),
  ],
});

Was das Plugin macht

1. Dictionary preparation

Vor dem Start des Builds (und einmal pro Stunde in der Entwicklung) ruft intlayer prepareIntlayer auf, um alle .content.ts Dateien in optimierte JSON-Wörterbücher zu kompilieren, die in .intlayer/ gespeichert werden.

2. Module aliases

Das Plugin fügt Vite-Resolve-Aliase hinzu, damit import { myDict } from 'intlayer/dictionaries/my-dict' zur kompilierten JSON-Datei auf der Festplatte aufgelöst wird. SSR-Builds verwenden ssr.noExternal, um sicherzustellen, dass alle @intlayer/*-Packages mit angewendeten Aliasen gebündelt werden.

3. Dev-server watcher

Im Entwicklungsmodus wird ein chokidar Watcher gestartet. Wenn sich eine .content.ts Datei ändert, werden die Wörterbücher neu kompiliert und Vites HMR propagiert das Update zum Browser.

4. Bundled locale-routing proxy (v9+)

Seit Intlayer v9 wird die intlayerProxy Middleware automatisch innerhalb von intlayer() registriert. Sie verwaltet:

• Locale-Erkennung anhand des URL-Präfix, Cookies und Accept-Language-Header.
• 301-Weiterleitungen, wenn die erkannte Locale nicht mit der aktuellen URL übereinstimmt.
• Interne URL-Umschreibungen, damit das Framework den korrekten [locale]-Routenparameter sieht.

Der Proxy wird durch routing.enableProxy (Standard true) in deiner Intlayer-Konfiguration gesteuert. Um ihn vollständig zu deaktivieren:

// intlayer.config.ts
import { defineConfig } from "intlayer";

export default defineConfig({
  routing: { enableProxy: false },
});

Um das Proxy-Verhalten ohne einen separaten intlayerProxy()-Aufruf anzupassen, übergebe proxy-Optionen an das Haupt-Plugin:

intlayer({ proxy: { ignore: (req) => req.url?.startsWith("/api") } });

Siehe die intlayerProxy-Dokumentation für die vollständige Routing-Verhaltenreferenz.

5. Bundled compiler (v9+)

Wenn compiler.enabled auf true gesetzt ist und compiler.output in Ihrer Intlayer-Konfiguration definiert ist, registriert intlayer() intlayerCompiler automatisch. Der Compiler extrahiert Inline-Content-Deklarationen, die direkt in Komponentendateien geschrieben sind, und schreibt sie zur Transform-Zeit in Dictionaries. Siehe intlayerCompiler-Dokumentation.

6. Build-Optimierungen

Während eines Production-Builds fügt das Plugin folgende Komponenten hinzu:

• intlayerOptimize – Babel-Transformation, die useIntlayer('key') → useDictionary(hash) umschreibt und direkte JSON-Importe einfügt.
• intlayerPrune – entfernt ungenutzte Content-Felder aus dem Dictionary-JSON.
• intlayerMinify – komprimiert Dictionary-JSON und mangelt optional Feldnamen.

Diese sind im Development-Modus inaktiv.

Veraltete Aliase