Intlayer v6 Mới - Có gì mới?

Chào mừng đến với Intlayer v6! Phiên bản này tập trung vào hiệu suất, trải nghiệm nhà phát triển và độ tin cậy. Dưới đây là những điểm nổi bật, kèm theo ghi chú di chuyển và ví dụ có thể sao chép-dán.

Những điểm nổi bật

• Lệnh mới: npx intlayer content test để phát hiện các bản dịch còn thiếu
• Tùy chọn toàn cục mới autoFill để tự động tạo các bản dịch còn thiếu
• Lệnh Fill mặc định bỏ qua các bản dịch đã tồn tại: npx intlayer fill
• Tiện ích mở rộng VS Code: Thanh hoạt động Intlayer mới (Tìm kiếm & Từ điển), các hành động trên thanh công cụ/bối cảnh, tự động hiển thị, các lệnh Fill/Test
• Tăng tốc độ build nhanh gấp 10 lần nhờ song song hóa promise
• Bộ nhớ đệm từ điển từ xa để tránh tải lại khi khởi động ứng dụng
• Cải tiến ghi log: đặt log.mode: 'verbose' để kiểm tra hành vi
• Xác thực mạnh mẽ hơn để ngăn ngừa sự cố ứng dụng do lỗi từ điển
• Cập nhật trực tiếp với CMS sử dụng build.importMode = 'live' và pnpm intlayer live
• Sửa lỗi: tích hợp Vue.js, adapter Lynx, Trình chỉnh sửa trực quan trên Windows

Mới: Kiểm tra các bản dịch còn thiếu

Kiểm tra nhanh dự án của bạn để tìm các khóa/ngôn ngữ còn thiếu.

npx intlayer content test

Output:

pnpm intlayer content testBản dịch còn thiếu: - blog-data       - Tiếng Nhật (ja), Tiếng Hàn (ko), Tiếng Trung (zh), Tiếng Đức (de), Tiếng Ý (it) - src/components/BlogPage/blogData.content.ts - demo-page       - Tiếng Pháp (fr), Tiếng Ý (it)                                         - src/components/DemoPage/demo.content.ts - locale-switcher - Tiếng Ý (it), Tiếng Bồ Đào Nha (pt)                                       - src/components/LocaleSwitcher/localeSwitcher.content.tsCác ngôn ngữ: Tiếng Anh (en), Tiếng Nga (ru), Tiếng Nhật (ja), Tiếng Pháp (fr), Tiếng Hàn (ko), Tiếng Trung (zh), Tiếng Tây Ban Nha (es), Tiếng Đức (de), Tiếng Ả Rập (ar), Tiếng Ý (it), Tiếng Anh Anh (en-GB), Tiếng Bồ Đào Nha (pt), Tiếng Hindi (hi)Các ngôn ngữ bắt buộc: Tiếng Anh (en)Bản dịch còn thiếu: Tiếng Nhật (ja), Tiếng Hàn (ko), Tiếng Trung (zh), Tiếng Đức (de), Tiếng Ý (it), Tiếng Pháp (fr), Tiếng Bồ Đào Nha (pt)Bản dịch bắt buộc còn thiếu: -Tổng số ngôn ngữ còn thiếu: 7Tổng số ngôn ngữ bắt buộc còn thiếu: 0

Xem thêm các tùy chọn trong tài liệu CLI: Tham khảo CLI → "Kiểm tra bản dịch còn thiếu". Cũng như hướng dẫn Testing.

Mới: Tính năng autoFill toàn cục để hoàn thành bản dịch còn thiếu

Bạn có thể bật auto-fill toàn cục để bất kỳ từ điển nào còn thiếu bản dịch sẽ được tự động hoàn thành.

import { type IntlayerConfig, Locales } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,    requiredLocales: [Locales.ENGLISH, Locales.FRENCH],  },  content: {    // Tự động tạo bản dịch còn thiếu cho tất cả các từ điển    autoFill: "./{{fileName}}Filled.content.ts",    //    // autoFill: "/messages/{{locale}}/{{key}}/{{fileName}}.content.json",    //    // autoFill: true, // tự động tạo bản dịch còn thiếu cho tất cả các từ điển như sử dụng "./{{fileName}}.content.json"    //    // autoFill: {    //   en: "./{{fileName}}.en.content.json",    //   fr: "./{{fileName}}.fr.content.json",    //   es: "./{{fileName}}.es.content.json",    // },  },};export default config;

Tự động điền các bản dịch còn thiếu của bạn bằng cách sử dụng lệnh npx intlayer fill.

Bạn vẫn có thể tinh chỉnh từng từ điển bằng cách sử dụng trường autoFill trong các tệp nội dung. Intlayer sẽ ưu tiên cấu hình theo từng từ điển trước, sau đó mới sử dụng cấu hình toàn cục. Xem tham khảo đầy đủ tại Tự động điền và Tham khảo tệp nội dung.

Lệnh Fill: mặc định an toàn hơn

Lệnh fill hiện tại, theo mặc định, chỉ điền các bản dịch còn thiếu và bỏ qua nội dung đã tồn tại.

npx intlayer fill

Các khóa từ điển bị ảnh hưởng để xử lý: access-key-creation-form-schema, doc-search-metadata, doc-search-page  - [access-key-creation-form-schema]      Từ điển không có đường dẫn tệp. Bỏ qua.  - [access-key-creation-form-schema]      Đang xử lý khai báo nội dung: src/components/Dashboard/ProjectForm/AccessKey/useAccessKeyCreationFormSchema.content.ts  - [access-key-creation-form-schema]      Không có ngôn ngữ để điền - Bỏ qua từ điển  - [doc-search-metadata]                  Từ điển không có đường dẫn tệp. Bỏ qua.  - [doc-search-metadata]                  Đang xử lý khai báo nội dung: src/app/[locale]/(docs)/doc/search/metadata.content.ts  - [doc-search-metadata]                  Không có ngôn ngữ để điền - Bỏ qua từ điển  - [doc-search-page]                      Từ điển không có đường dẫn tệp. Bỏ qua.  - [doc-search-page]                      Đang xử lý khai báo nội dung: src/app/[locale]/(docs)/doc/search/page.content.ts  - [doc-search-page]                     [Russian (ru)]                   Đang chuẩn bị bản dịch cho từ điển từ tiếng Anh (en) sang tiếng Nga (ru)[intlayer]  Đã áp dụng định dạng Prettier cho src/app/[locale]/(docs)/doc/search/page.content.ts  - [doc-search-page]                      Khai báo nội dung đã được ghi vào src/app/[locale]/(docs)/doc/search/page.content.ts

Các ví dụ CI có sẵn trong CI/CD.

Tiện ích mở rộng VS Code được cập nhật

Tiện ích mở rộng hiện bao gồm một tab Intlayer riêng biệt trong Thanh Hoạt Động và một số cải tiến quy trình làm việc:

• Thanh Hoạt Động Intlayer với hai chế độ xem:
  • Webview tìm kiếm để tìm kiếm từ điển/nội dung trực tiếp
  • Cây từ điển liệt kê các môi trường, từ điển và các tệp đóng góp
• Thanh công cụ trên chế độ xem Từ điển: Xây dựng, Kéo, Đẩy, Điền, Làm mới, Kiểm tra, Tạo tệp Từ điển
• Menu ngữ cảnh: Kéo/Đẩy trên từ điển; Điền trên các tệp
• Tự động hiển thị: tệp trình soạn thảo hiện tại được làm nổi bật trong cây Từ điển khi có thể
• Các lệnh mới có sẵn từ Bảng lệnh: Điền Từ điển và Kiểm tra Từ điển

Xem chi tiết trong tài liệu Tiện ích mở rộng VS Code chính thức.

Đã cập nhật máy chủ MCP để hỗ trợ các tính năng mới.

• Tự động điền
• Kiểm tra các bản dịch còn thiếu
• Cập nhật trực tiếp
• Ghi nhật ký
• Xác thực
• Ghi chú di chuyển
• Tài liệu

MCP server giúp tự động hóa dự án sử dụng Intlayer. Kiểm tra các bản dịch còn thiếu cho mã được tạo tự động. Nó giúp hiểu cấu hình của bạn và nhúng tài liệu của Intlayer vào IDE của bạn.

Hiệu năng: nhanh hơn 10 lần

• Giải quyết song song các từ điển cục bộ và từ điển từ xa
• Từ điển từ xa được lưu trong bộ nhớ đệm để tránh tải lại khi khởi động ứng dụng

npx intlayer build

Đầu ra:

[intlayer]  Chuẩn bị Intlayer (v6.0.1)[intlayer]  Từ điển:[intlayer]  ✓ Nội dung cục bộ: 163/163[intlayer]  ✓ Nội dung từ xa: 100/100[intlayer]   - access-key-creation-form             [local: ✔ built] [distant: ✔ imported][intlayer]   - access-key-form                      [local: ✔ built] [distant: ✔ imported][intlayer]   - ai-ab-testing-section                                 [distant: ✔ imported][intlayer]   - application-not-running-view         [local: ✔ built] [distant: ✔ imported][intlayer]   - available-techno-section             [local: ✔ built] [distant: ✔ imported][intlayer]   - blog-data                            [local: ✔ built][intlayer]   - blog-metadata                        [local: ✔ built][intlayer]   - blog-nav-list                        [local: ✔ built] [distant: ✔ imported][intlayer]   - blog-page                                             [distant: ✔ fetched][intlayer]   - blog-search-page                     [local: ✔ built] [distant: ✔ imported]...[intlayer]  Nội dung đã tải  (Tổng: 8401ms - Cục bộ: 4050ms - Từ xa: 4222ms)

Cải tiến hệ thống ghi log

Hệ thống ghi log đã được cải tiến để cung cấp thông tin chi tiết hơn về những gì xảy ra trong quá trình biến đổi khi build và runtime.

Bật chế độ ghi log chi tiết để hiểu rõ hơn những gì xảy ra trong quá trình biến đổi khi build và runtime.

export default {  log: {    mode: "verbose", // các tùy chọn: "default" | "verbose" | "disabled"  },};

Xem Cấu hình để biết tất cả các tùy chọn ghi log.

Xác thực mạnh mẽ hơn

Quá trình xử lý từ điển hiện thực hiện xác thực chắc chắn hơn. Khi một từ điển không thể xử lý, Intlayer tránh làm hỏng ứng dụng của bạn và hiển thị các lỗi có thể xử lý được.

Cập nhật trực tiếp với CMS (An toàn cho môi trường Production)

Phục vụ các cập nhật nội dung trực tiếp (ví dụ: cập nhật biên tập) trong môi trường production mà không cần xây dựng lại ứng dụng của bạn.

1. Bật chế độ nhập trực tiếp (live import mode):

import { type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  build: {    importMode: "live", // "static" | "dynamic" | "live"  },  editor: {    liveSync: true, // bật đồng bộ trực tiếp phía server  },};export default config;

2. Chạy ứng dụng và xử lý trực tiếp song song:

npx intlayer live --with 'vite preview'

Lưu ý:

• Chỉ những từ điển được đánh dấu sử dụng chế độ live mới được lấy trực tiếp. Các từ điển khác được tối ưu cho hiệu suất.
• Tự động chuyển sang nhập động (dynamic import) nếu API live không thể truy cập được.

Xem CMS và Live Sync và Cấu hình để có hướng dẫn đầy đủ.

Quá trình song song để theo dõi tệp trên turbopack

Khi sử dụng Turbopack trên Next.js 14 trở lên làm máy chủ phát triển của bạn với lệnh next dev --turbopack, các thay đổi trong từ điển sẽ không được phát hiện tự động theo mặc định.

Hạn chế này xảy ra vì Turbopack không thể chạy các plugin webpack song song để giám sát các thay đổi trong các tệp nội dung của bạn.

Để khắc phục điều này, chúng tôi đã loại bỏ lệnh intlayer watch, sử dụng tùy chọn --with để chạy đồng thời cả máy chủ phát triển và trình theo dõi build Intlayer.

{  "scripts": {    "dev": "npx intlayer watch --with 'next dev --turbopack'",  },}

Ghi chú di chuyển

• Đã loại bỏ: dictionaryOutput (trước đây là i18next hoặc next-intl). Tính năng này sẽ trở lại dưới dạng các adapter có thể cắm thêm trong các phiên bản tương lai. Hãy loại bỏ trường này khỏi cấu hình của bạn.
• Loại bỏ liên quan: i18nextResourcesDir (xem nhật ký thay đổi doc/configuration).
• Ưu tiên sử dụng tùy chọn toàn cục mới content.autoFill để tạo các bản dịch còn thiếu ở quy mô lớn.
• Sử dụng npx intlayer content test để kiểm tra các PR có bản dịch còn thiếu.
• Để có chẩn đoán chi tiết, đặt log.mode = 'verbose'.
• Sử dụng intlayer thay vì intlayerPlugin và intlayerProxy thay vì intlayerProxyPlugin trong cấu hình Vite của bạn.

Sửa lỗi

• Ổn định tích hợp Vue.js
• Cải tiến adapter Lynx
• Trình chỉnh sửa trực quan trên Windows

Ghi chú di chuyển từ v6 lên v7

Xem ghi chú di chuyển từ v6 lên v7 để biết thêm thông tin.

Liên kết hữu ích

• Tham khảo CLI
• Tự động điền
• Cấu hình
• Tham khảo file nội dung
• Tiện ích mở rộng chính thức cho VS Code
• CMS và Đồng bộ trực tiếp