Intlayer Compiler | Extraction Automatisée de Contenu pour i18n

Qu'est-ce que l'Intlayer Compiler ?

Le Intlayer Compiler est un outil puissant conçu pour automatiser le processus d'internationalisation (i18n) dans vos applications. Il analyse votre code source (JSX, TSX, Vue, Svelte) à la recherche de déclarations de contenu, les extrait, et génère automatiquement les fichiers de dictionnaire nécessaires. Cela vous permet de garder votre contenu localisé avec vos composants tandis qu'Intlayer gère la gestion et la synchronisation de vos dictionnaires.

Pourquoi utiliser le Intlayer Compiler ?

• Automatisation : Élimine le copier-coller manuel du contenu dans les dictionnaires.
• Rapidité : Extraction de contenu optimisée garantissant que votre processus de build reste rapide.
• Expérience développeur : Gardez les déclarations de contenu là où elles sont utilisées, améliorant ainsi la maintenabilité.
• Mises à jour en direct : Prend en charge le Hot Module Replacement (HMR) pour un retour instantané pendant le développement.

Consultez l'article de blog Compiler vs. Declarative i18n pour une comparaison plus approfondie.

Pourquoi ne pas utiliser l'Intlayer Compiler ?

Bien que le compilateur offre une excellente expérience "fonctionne tout seul", il introduit également certains compromis dont vous devez être conscient :

• Ambiguïté heuristique : Le compilateur doit deviner ce qui est du contenu destiné aux utilisateurs par rapport à la logique de l'application (par exemple, className="active", codes de statut, identifiants de produits). Dans des bases de code complexes, cela peut conduire à de faux positifs ou à des chaînes manquées qui nécessitent des annotations manuelles et des exceptions.
• Extraction statique uniquement : L'extraction basée sur le compilateur repose sur l'analyse statique. Les chaînes qui n'existent qu'à l'exécution (codes d'erreur API, champs CMS, etc.) ne peuvent pas être découvertes ou traduites par le compilateur seul, vous avez donc toujours besoin d'une stratégie i18n d'exécution complémentaire.

Pour une comparaison architecturale plus approfondie, consultez l'article de blog Compiler vs. Declarative i18n.

Comme alternative, pour automatiser votre processus i18n tout en gardant un contrôle total de votre contenu, Intlayer fournit également une commande d'auto-extraction intlayer transform (voir la documentation CLI), ou la commande Intlayer: extract content to Dictionary de l'extension Intlayer VS Code (voir la documentation de l'extension VS Code).

Utilisation

Vite

Pour les applications basées sur Vite (React, Vue, Svelte, etc.), la manière la plus simple d'utiliser le compilateur est via le plugin vite-intlayer.

Installation

npm install vite-intlayer

Configuration

Mettez à jour votre vite.config.ts pour inclure le plugin intlayerCompiler :

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({  plugins: [    intlayer(),    intlayerCompiler(), // Ajoute le plugin du compilateur  ],});

Support des frameworks

Le plugin Vite détecte et gère automatiquement différents types de fichiers :

• React / JSX / TSX : Pris en charge nativement.
• Vue : Nécessite @intlayer/vue-compiler.
• Svelte : Nécessite @intlayer/svelte-compiler.

Assurez-vous d'installer le paquet compilateur approprié pour votre framework :

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

Next.js (Babel)

Pour Next.js ou d'autres applications basées sur Webpack utilisant Babel, vous pouvez configurer le compilateur en utilisant le plugin @intlayer/babel.

Installation

npm install @intlayer/babel

Configuration

Mettez à jour votre fichier babel.config.js (ou babel.config.json) pour inclure le plugin d'extraction. Nous fournissons un helper getExtractPluginOptions pour charger automatiquement votre configuration 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()],  ],};

Cette configuration garantit que le contenu déclaré dans vos composants est automatiquement extrait et utilisé pour générer les dictionnaires lors de votre processus de build.