Tác giả:
    Ngày tạo:2026-06-25Cập nhật lần cuối:2026-06-25

    intlayerCompiler

    intlayerCompiler là một plugin Vite quét các tệp nguồn component để tìm các khai báo nội dung Intlayer trực tiếp (inline) — nội dung được định nghĩa trực tiếp bên trong một component thay vì trong một tệp .content.ts riêng biệt — và ghi chúng vào các tệp JSON từ điển trong giai đoạn transform (chuyển đổi).

    Từ phiên bản Intlayer v9, intlayerCompiler được tự động bao gồm bên trong plugin chính intlayer() khi cả hai cấu hình compiler.enabled là true và compiler.output được thiết lập trong cấu hình Intlayer của bạn. Bạn chỉ cần đăng ký riêng khi muốn kiểm soát hoàn toàn cấu hình dành riêng cho trình biên dịch.

    Cách sử dụng

    Như một phần của intlayer() (khuyên dùng, v9+)

    Bật trình biên dịch thông qua cấu hình Intlayer của bạn:

    ts
    // intlayer.config.tsimport { defineConfig } from "intlayer";export default defineConfig({  compiler: {    enabled: true,    output: "./src/dictionaries", // nơi ghi các từ điển đã được trích xuất  },});

    Sau đó sử dụng plugin tiêu chuẩn mà không cần đăng ký thêm:

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

    Độc lập (khi cần thiết)

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

    Các tùy chọn

    ts
    import type { IntlayerCompilerOptions } from "vite-intlayer";
    Tùy chọn Kiểu dữ liệu Mô tả
    configOptions GetConfigurationOptions Các giá trị ghi đè cấu hình Intlayer được chuyển tiếp đến getConfiguration().
    compilerConfig Partial<CompilerConfig> Các ghi đè cho phần cấu hình dành riêng cho trình biên dịch (ví dụ: enabled, output, filesList).

    Ví dụ

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

    Cách thức hoạt động

    Giai đoạn Transform (Chuyển đổi)

    Đối với mỗi tệp nguồn khớp với compiler.filesList, plugin trình biên dịch sẽ:

    1. Chuyển nội dung tệp qua hàm extractContent từ thư viện @intlayer/babel.
    2. Gọi hàm onExtract cho mỗi khai báo được tìm thấy, thao tác này sẽ ghi JSON từ điển kết quả vào đường dẫn compiler.output.
    3. Trả về mã nguồn đã chuyển đổi với các khai báo inline được thay thế bằng các lệnh gọi tiêu chuẩn useIntlayer('key') / getIntlayer('key').

    Các loại tệp được hỗ trợ: .ts, .tsx, .js, .jsx, .vue, .svelte, .astro.

    HMR (Hot Module Replacement - Thay thế mô-đun nóng)

    Khi một tệp component được lưu ở chế độ phát triển (development mode), trình biên dịch sẽ:

    1. Phát hiện tệp thay đổi thông qua hook handleHotUpdate của Vite.
    2. Trích xuất lại nội dung từ tệp đã cập nhật.
    3. Ghi tệp JSON từ điển đã cập nhật.
    4. Kích hoạt tải lại toàn bộ trang (server.ws.send({ type: 'full-reload' })).

    Một khoảng thời gian debounce (chống rung) 500 ms ngăn việc ghi từ điển (cũng kích hoạt sự kiện thay đổi tệp) tạo ra một vòng lặp trích xuất vô hạn.

    Khử trùng lặp (Deduplication)

    intlayerCompiler sử dụng cùng một cơ chế khử trùng lặp createPrimaryInstanceGuard giống như các plugin đi kèm khác. Khi cả intlayer() (gộp cả trình biên dịch) và lệnh gọi intlayerCompiler() thủ công đều xuất hiện, chỉ có phiên bản đã đăng ký đầu tiên chạy — không có từ điển nào bị ghi đè hai lần.

    Tại sao Intlayer?