Intlayer Compiler | Zautomatyzowane wydobywanie treści dla i18n

Czym jest Intlayer Compiler?

Intlayer Compiler to potężne narzędzie zaprojektowane w celu automatyzacji procesu internacjonalizacji (i18n) w Twoich aplikacjach. Przeszukuje Twój kod źródłowy (JSX, TSX, Vue, Svelte) w poszukiwaniu deklaracji treści, wydobywa je i automatycznie generuje niezbędne pliki słowników. Pozwala to na utrzymanie treści współlokalnie z komponentami, podczas gdy Intlayer zajmuje się zarządzaniem i synchronizacją Twoich słowników.

Dlaczego warto używać Intlayer Compiler?

• Automatyzacja: Eliminuje ręczne kopiowanie i wklejanie treści do słowników.
• Szybkość: Optymalizowane wydobywanie treści zapewnia szybki proces budowania.
• Doświadczenie programisty: Zachowaj deklaracje treści dokładnie tam, gdzie są używane, co poprawia utrzymanie kodu.
• Aktualizacje na żywo: Obsługuje Hot Module Replacement (HMR) dla natychmiastowej informacji zwrotnej podczas tworzenia aplikacji.

Zobacz wpis na blogu Compiler vs. Declarative i18n dla głębszego porównania.

Dlaczego nie używać Intlayer Compiler?

Chociaż kompilator oferuje doskonałe doświadczenie "działa od razu", wprowadza również pewne kompromisy, o których powinieneś wiedzieć:

• Niejednoznaczność heurystyczna: Kompilator musi zgadywać, co jest treścią skierowaną do użytkownika, a co logiką aplikacji (np. className="active", kody statusu, ID produktów). W złożonych bazach kodu może to prowadzić do fałszywych pozytywów lub pominiętych ciągów znaków, które wymagają ręcznych adnotacji i wyjątków.
• Tylko statyczna ekstrakcja: Ekstrakcja oparta na kompilatorze opiera się na analizie statycznej. Ciągi znaków, które istnieją tylko w czasie wykonywania (kody błędów API, pola CMS itp.), nie mogą być odkryte ani przetłumaczone przez sam kompilator, więc nadal potrzebujesz uzupełniającej strategii i18n czasu wykonywania.

Aby uzyskać głębsze porównanie architektoniczne, zobacz wpis na blogu Compiler vs. Declarative i18n.

Jako alternatywę, aby zautomatyzować proces i18n przy zachowaniu pełnej kontroli nad treścią, Intlayer zapewnia również polecenie auto-ekstrakcji intlayer transform (zobacz dokumentację CLI) lub polecenie Intlayer: extract content to Dictionary z rozszerzenia Intlayer VS Code (zobacz dokumentację rozszerzenia VS Code).

Użycie

Vite

Dla aplikacji opartych na Vite (React, Vue, Svelte itp.) najprostszym sposobem użycia kompilatora jest wtyczka vite-intlayer.

Instalacja

npm install vite-intlayer

Konfiguracja

Zaktualizuj swój plik vite.config.ts, aby dołączyć wtyczkę intlayerCompiler:

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({  plugins: [    intlayer(),    intlayerCompiler(), // Dodaje wtyczkę kompilatora  ],});

Wsparcie dla frameworków

Wtyczka Vite automatycznie wykrywa i obsługuje różne typy plików:

• React / JSX / TSX: Obsługiwane natywnie.
• Vue: Wymaga @intlayer/vue-compiler.
• Svelte: Wymaga @intlayer/svelte-compiler.

Upewnij się, że zainstalowałeś odpowiedni pakiet kompilatora dla swojego frameworka:

# Dla Vuenpm install @intlayer/vue-compiler# Dla Sveltenpm install @intlayer/svelte-compiler

Next.js (Babel)

Dla Next.js lub innych aplikacji opartych na Webpack z użyciem Babel, możesz skonfigurować kompilator za pomocą wtyczki @intlayer/babel.

Instalacja

npm install @intlayer/babel

Konfiguracja

Zaktualizuj swój plik babel.config.js (lub babel.config.json), aby uwzględnić wtyczkę ekstrakcji. Udostępniamy pomocniczą funkcję getExtractPluginOptions, która automatycznie ładuje Twoją konfigurację Intlayer.

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()],  ],};

Ta konfiguracja zapewnia, że zawartość zadeklarowana w Twoich komponentach jest automatycznie wyodrębniana i używana do generowania słowników podczas procesu budowania.