Autor:
    Creación:2026-06-25Última actualización:2026-06-25

    intlayerCompiler

    intlayerCompiler es un plugin de Vite que escanea los archivos de código fuente de los componentes en busca de declaraciones de contenido inline de Intlayer — contenido definido directamente dentro de un componente en lugar de en un archivo .content.ts separado — y las escribe en archivos JSON de diccionario durante la fase de transformación.

    Desde Intlayer v9, intlayerCompiler se incluye automáticamente dentro del plugin principal intlayer() cuando tanto compiler.enabled es true como compiler.output están configurados en su configuración de Intlayer. Solo necesita registrarlo por separado cuando desee tener un control total sobre la configuración específica del compilador.

    Uso

    Como parte de intlayer() (recomendado, v9+)

    Habilite el compilador a través de su configuración de Intlayer:

    ts
    // intlayer.config.tsimport { defineConfig } from "intlayer";export default defineConfig({  compiler: {    enabled: true,    output: "./src/dictionaries", // donde se escriben los diccionarios extraídos  },});

    Luego use el plugin estándar sin registro adicional:

    ts
    // vite.config.tsimport { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer()],});

    Autónomo (cuando sea necesario)

    ts
    // vite.config.tsimport { defineConfig } from "vite";import { intlayerCompiler } from "vite-intlayer";export default defineConfig({  plugins: [intlayerCompiler()],});

    Opciones

    ts
    import type { IntlayerCompilerOptions } from "vite-intlayer";
    Opción Tipo Descripción
    configOptions GetConfigurationOptions Anulaciones de configuración de Intlayer reenviadas a getConfiguration().
    compilerConfig Partial<CompilerConfig> Anulaciones para la sección de configuración específica del compilador (por ejemplo, enabled, output, filesList).

    Ejemplo

    ts
    intlayerCompiler({  configOptions: { configFile: "./config/intlayer.config.ts" },  compilerConfig: { enabled: true, output: "./src/dictionaries" },});

    Cómo funciona

    Fase de transformación

    Para cada archivo fuente que coincida con compiler.filesList, el plugin del compilador:

    1. Pasa el contenido del archivo a través de extractContent de @intlayer/babel.
    2. Llama a onExtract para cada declaración encontrada, lo que escribe el JSON del diccionario resultante en compiler.output.
    3. Devuelve el código fuente transformado con las declaraciones en línea reemplazadas por llamadas estándar useIntlayer('key') / getIntlayer('key').

    Tipos de archivos admitidos: .ts, .tsx, .js, .jsx, .vue, .svelte, .astro.

    HMR (Hot Module Replacement)

    Cuando se guarda un archivo de componente en modo de desarrollo, el compilador:

    1. Detecta el cambio de archivo a través del hook handleHotUpdate de Vite.
    2. Vuelve a extraer el contenido del archivo actualizado.
    3. Escribe el JSON del diccionario actualizado.
    4. Activa una recarga completa de la página (server.ws.send({ type: 'full-reload' })).

    Un retraso (debounce) de 500 ms evita que la propia escritura del diccionario (que también activa un evento de cambio de archivo) cause un bucle de re-extracción infinito.

    Deduplicación

    intlayerCompiler utiliza el mismo mecanismo de deduplicación createPrimaryInstanceGuard que los otros plugins incluidos. Cuando están presentes tanto intlayer() (que incluye el compilador) como una llamada manual a intlayerCompiler(), solo se ejecuta la primera instancia registrada; no se escribe ningún diccionario dos veces.

    ¿Por qué Intlayer?