Tłumacz swoją stronę Vite i Svelte za pomocą Intlayer | Internacjonalizacja (i18n)

Ten pakiet jest w trakcie rozwoju. Zobacz zgłoszenie po więcej informacji. Pokaż swoje zainteresowanie Intlayer dla Svelte, dając like temu zgłoszeniu

Spis treści

Czym jest Intlayer?

Intlayer to innowacyjna, open-source'owa biblioteka do internacjonalizacji (i18n), zaprojektowana, aby uprościć wsparcie wielojęzyczne w nowoczesnych aplikacjach webowych.

Dzięki Intlayer możesz:

• Łatwo zarządzać tłumaczeniami za pomocą deklaratywnych słowników na poziomie komponentów.
• Dynamicznie lokalizować metadane, trasy i zawartość.
• Zapewnić wsparcie dla TypeScript dzięki automatycznie generowanym typom, co poprawia autouzupełnianie i wykrywanie błędów.
• Skorzystaj z zaawansowanych funkcji, takich jak dynamiczne wykrywanie i przełączanie lokalizacji.

Przewodnik krok po kroku, jak skonfigurować Intlayer w aplikacji Vite i Svelte

Krok 1: Zainstaluj zależności

Zainstaluj niezbędne pakiety za pomocą npm:

npm install intlayer svelte-intlayernpm install vite-intlayer --save-dev

• intlayer

• intlayer

  Główny pakiet, który dostarcza narzędzia do internacjonalizacji do zarządzania konfiguracją, tłumaczeń, deklaracji treści, transpilecji oraz poleceń CLI.

• svelte-intlayer Pakiet integrujący Intlayer z aplikacją Svelte. Zapewnia dostawców kontekstu oraz hooki do internacjonalizacji w Svelte.

• vite-intlayer Zawiera wtyczkę Vite do integracji Intlayer z bundlerem Vite, a także middleware do wykrywania preferowanej lokalizacji użytkownika, zarządzania ciasteczkami oraz obsługi przekierowań URL.

Krok 2: Konfiguracja Twojego projektu

Utwórz plik konfiguracyjny, aby skonfigurować języki swojej aplikacji:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH,      // Twoje inne locale    ],    defaultLocale: Locales.ENGLISH,  },};export default config;

Za pomocą tego pliku konfiguracyjnego możesz ustawić zlokalizowane adresy URL, przekierowania w middleware, nazwy ciasteczek, lokalizację i rozszerzenie deklaracji treści, wyłączyć logi Intlayer w konsoli i wiele więcej. Aby uzyskać pełną listę dostępnych parametrów, zapoznaj się z dokumentacją konfiguracji.

Krok 3: Zintegruj Intlayer w swojej konfiguracji Vite

Dodaj wtyczkę intlayer do swojej konfiguracji.

import { defineConfig } from "vite";import react from "@vitejs/plugin-react-swc";import { intlayer } from "vite-intlayer";// https://vitejs.dev/config/export default defineConfig({  plugins: [react(), intlayer()],});

Wtyczka Vite intlayer() służy do integracji Intlayer z Vite. Zapewnia budowanie plików deklaracji treści oraz monitoruje je w trybie deweloperskim. Definiuje zmienne środowiskowe Intlayer w aplikacji Vite. Dodatkowo dostarcza aliasy w celu optymalizacji wydajności.

Krok 4: Zadeklaruj swoją treść

Twórz i zarządzaj deklaracjami treści, aby przechowywać tłumaczenia:

import { t, type Dictionary } from "intlayer";const appContent = {  key: "app",  content: {},} satisfies Dictionary;export default appContent;

Twoje deklaracje zawartości mogą być zdefiniowane w dowolnym miejscu w aplikacji, pod warunkiem, że znajdują się w katalogu contentDir (domyślnie ./src). Muszą również odpowiadać rozszerzeniu pliku deklaracji zawartości (domyślnie .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}).

Aby uzyskać więcej szczegółów, zapoznaj się z dokumentacją deklaracji zawartości.

Krok 5: Wykorzystaj Intlayer w swoim kodzie

[do uzupełnienia]

(Opcjonalnie) Krok 6: Zmień język swojej zawartości

[do uzupełnienia]

(Opcjonalnie) Krok 7: Dodaj lokalizowane routingi do swojej aplikacji

[do uzupełnienia]

(Opcjonalnie) Krok 8: Zmień URL podczas zmiany lokalizacji

[do uzupełnienia]

(Opcjonalnie) Krok 9: Zmień atrybuty języka i kierunku HTML

[do uzupełnienia]

(Opcjonalnie) Krok 10: Tworzenie lokalizowanego komponentu Link

[do uzupełnienia]

Konfiguracja Git

Zaleca się ignorowanie plików generowanych przez Intlayer. Pozwala to uniknąć ich zatwierdzania do repozytorium Git.

Aby to zrobić, możesz dodać następujące instrukcje do swojego pliku .gitignore:

# Ignoruj pliki generowane przez Intlayer.intlayer

Rozszerzenie VS Code

Aby poprawić swoje doświadczenie deweloperskie z Intlayer, możesz zainstalować oficjalne rozszerzenie Intlayer dla VS Code.

Zainstaluj z Marketplace VS Code

To rozszerzenie oferuje:

• Autouzupełnianie kluczy tłumaczeń.
• Wykrywanie błędów w czasie rzeczywistym dla brakujących tłumaczeń.
• Podglądy w linii przetłumaczonej zawartości.
• Szybkie akcje umożliwiające łatwe tworzenie i aktualizowanie tłumaczeń.

Aby uzyskać więcej szczegółów na temat korzystania z rozszerzenia, zapoznaj się z dokumentacją rozszerzenia Intlayer dla VS Code.

Idź dalej

Aby pójść dalej, możesz zaimplementować edytor wizualny lub wyeksportować swoją zawartość, korzystając z CMS.