Cách Thức Hoạt Động của Intlayer

Mục Lục

Tổng Quan

Ý tưởng chính đằng sau Intlayer là áp dụng quản lý nội dung theo từng thành phần. Vì vậy, ý tưởng của Intlayer là cho phép bạn khai báo nội dung ở bất cứ đâu trong codebase của bạn, ví dụ như trong cùng thư mục với thành phần của bạn.

.└── Components    └── MyComponent        ├── index.content.ts        └── index.tsx

Để làm được điều đó, vai trò của Intlayer là tìm tất cả các file khai báo nội dung của bạn, ở tất cả các định dạng khác nhau có trong dự án của bạn, sau đó nó sẽ tạo ra các từ điển từ chúng.

Vì vậy, có hai bước chính:

• Bước xây dựng
• Bước diễn giải

Bước xây dựng từ điển

Bước xây dựng có thể được thực hiện theo ba cách:

• sử dụng CLI với lệnh npx intlayer build
• sử dụng extension vscode
• sử dụng các plugin của ứng dụng như gói vite-intlayer, hoặc các plugin tương đương cho Next.js. Khi bạn sử dụng một trong những plugin này, Intlayer sẽ tự động xây dựng các từ điển của bạn khi bạn khởi động (dev) hoặc xây dựng (prod) ứng dụng của mình.

1. Khai báo các file nội dung

   • Các file nội dung có thể được định nghĩa dưới nhiều định dạng khác nhau, chẳng hạn như TypeScript, ECMAScript, CommonJS hoặc JSON.
   • Các file nội dung có thể được định nghĩa ở bất cứ đâu trong dự án, điều này cho phép bảo trì và mở rộng tốt hơn. Việc tuân thủ quy ước phần mở rộng file cho các file nội dung là rất quan trọng. Phần mở rộng mặc định là *.content.{js|cjs|mjs|ts|tsx|json}, nhưng có thể được thay đổi trong file cấu hình.

2. Tạo dictionaries

   • Các từ điển được tạo ra từ các file nội dung. Theo mặc định, các từ điển Intlayer được tạo trong thư mục .intlayer/dictionaries của dự án.
   • Các từ điển này được tạo ra ở nhiều định dạng khác nhau để đáp ứng mọi nhu cầu và tối ưu hiệu suất của ứng dụng.

3. Tạo các kiểu cho từ điển

Dựa trên các dictionaries của bạn, Intlayer sẽ tạo các kiểu để có thể sử dụng chúng trong ứng dụng của bạn.

• Các kiểu từ điển được tạo từ các file khai báo nội dung của Intlayer. Theo mặc định, các kiểu từ điển Intlayer được tạo trong thư mục .intlayer/types của dự án.

• Intlayer mở rộng module là một tính năng của TypeScript cho phép bạn định nghĩa các kiểu bổ sung cho Intlayer. Điều này giúp trải nghiệm phát triển dễ dàng hơn bằng cách gợi ý các đối số có sẵn hoặc các đối số bắt buộc. Trong số các kiểu được tạo ra, các kiểu từ điển Intlayer hoặc thậm chí các kiểu cấu hình ngôn ngữ được thêm vào file types/intlayer.d.ts, và được sử dụng bởi các package khác. Để làm được điều này, cần phải cấu hình file tsconfig.json để bao gồm thư mục types của dự án.

Bước diễn giải từ điển

Sử dụng Intlayer, bạn sẽ truy cập nội dung trong ứng dụng của mình bằng cách sử dụng hook useIntlayer.

const MyComponent = () => {  const content = useIntlayer("my-component");  return <div>{content.title}</div>;};

Hook này sẽ quản lý việc phát hiện locale cho bạn và trả về nội dung cho locale hiện tại. Sử dụng hook này, bạn cũng có thể diễn giải markdown, quản lý số nhiều, và nhiều hơn nữa.

Để xem tất cả các tính năng của Intlayer, bạn có thể đọc tài liệu từ điển.

Nội dung từ xa

Intlayer cho phép bạn khai báo nội dung cục bộ, sau đó xuất chúng sang CMS để đội ngũ không chuyên về kỹ thuật của bạn có thể chỉnh sửa.

Vì vậy, bạn sẽ có thể đẩy và kéo nội dung từ CMS về ứng dụng của mình, tương tự như cách bạn làm với Git cho mã nguồn của mình.

Đối với các từ điển được externalize sử dụng CMS, Intlayer thực hiện một thao tác fetch cơ bản để lấy các từ điển từ xa và hợp nhất chúng với các từ điển cục bộ của bạn. Nếu được cấu hình trong dự án, Intlayer sẽ tự động quản lý việc lấy nội dung từ CMS khi ứng dụng khởi động (dev) / build (prod).

Trình chỉnh sửa trực quan

Intlayer cũng cung cấp một trình soạn thảo trực quan để cho phép bạn chỉnh sửa nội dung một cách trực quan. Trình soạn thảo trực quan này có trong gói bên ngoài intlayer-editor.

• Server là một ứng dụng Express đơn giản lắng nghe các yêu cầu từ client và lấy nội dung của ứng dụng của bạn, chẳng hạn như dictionaries và cấu hình để làm cho nó có thể truy cập được trên phía client.
• Mặt khác, client là một ứng dụng React được sử dụng để tương tác với nội dung của bạn thông qua giao diện trực quan.

Khi bạn gọi nội dung của mình bằng cách sử dụng useIntlayer và trình soạn thảo được bật, nó sẽ tự động bao bọc các chuỗi của bạn bằng một đối tượng Proxy có tên là IntlayerNode. Node này sử dụng window.postMessage để giao tiếp với một iframe được bao bọc chứa giao diện trình soạn thảo trực quan. Ở phía trình soạn thảo, trình soạn thảo lắng nghe các thông điệp này và mô phỏng tương tác thực với nội dung của bạn, cho phép bạn chỉnh sửa văn bản trực tiếp trong ngữ cảnh ứng dụng của bạn.

Tối ưu hóa build ứng dụng

Để tối ưu kích thước gói của ứng dụng của bạn, Intlayer cung cấp hai plugin để tối ưu quá trình build ứng dụng của bạn: các plugin @intlayer/babel và @intlayer/swc.

Các plugin Babel và SWC hoạt động bằng cách phân tích Cây Cú Pháp Trừu Tượng (AST) của ứng dụng của bạn để thay thế các lời gọi hàm Intlayer bằng mã được tối ưu hóa. Quá trình này giúp gói cuối cùng của bạn nhẹ hơn trong môi trường production bằng cách đảm bảo chỉ những từ điển thực sự được sử dụng mới được nhập khẩu, tối ưu hóa việc chia nhỏ gói và giảm kích thước gói.

Trong chế độ phát triển, Intlayer sử dụng việc nhập khẩu tĩnh tập trung cho các từ điển nhằm đơn giản hóa trải nghiệm phát triển.

Bằng cách kích hoạt tùy chọn importMode = "dynamic" trong cấu hình, Intlayer sẽ sử dụng import động để tải các từ điển. Tùy chọn này mặc định bị tắt để tránh xử lý bất đồng bộ khi render ứng dụng.

@intlayer/babel có sẵn theo mặc định trong gói vite-intlayer,

@intlayer/swc không được cài đặt theo mặc định trong gói next-intlayer vì các plugin SWC vẫn đang trong giai đoạn thử nghiệm trên Next.js.

Để xem cách cấu hình quá trình build ứng dụng của bạn, bạn có thể đọc tài liệu cấu hình.

Các gói

Intlayer bao gồm nhiều gói, mỗi gói có một vai trò cụ thể trong quá trình dịch thuật. Dưới đây là biểu đồ thể hiện cấu trúc của các gói này:

intlayer

Gói intlayer được sử dụng trong các ứng dụng để khai báo nội dung trong các tệp nội dung.

react-intlayer

Gói react-intlayer được sử dụng để diễn giải các từ điển Intlayer và làm cho chúng có thể sử dụng trong các ứng dụng React.

next-intlayer

Gói next-intlayer được sử dụng như một lớp trên react-intlayer để làm cho các từ điển Intlayer có thể sử dụng trong các ứng dụng Next.js. Nó tích hợp các tính năng thiết yếu để làm cho Intlayer hoạt động trong môi trường Next.js, chẳng hạn như middleware dịch thuật, định tuyến, hoặc cấu hình tệp next.config.js.

vue-intlayer

Gói vue-intlayer được sử dụng để diễn giải các từ điển Intlayer và làm cho chúng có thể sử dụng trong các ứng dụng Vue.

nuxt-intlayer

Gói nuxt-intlayer là một module Nuxt để làm cho các từ điển Intlayer có thể sử dụng trong các ứng dụng Nuxt. Nó tích hợp các tính năng thiết yếu để làm cho Intlayer hoạt động trong môi trường Nuxt, chẳng hạn như middleware dịch thuật, định tuyến, hoặc cấu hình tệp nuxt.config.js.

svelte-intlayer (Đang phát triển)

Gói svelte-intlayer được sử dụng để diễn giải các từ điển Intlayer và làm cho chúng có thể sử dụng trong các ứng dụng Svelte.

solid-intlayer (Đang phát triển)

Gói solid-intlayer được sử dụng để diễn giải các từ điển Intlayer và làm cho chúng có thể sử dụng trong các ứng dụng Solid.js.

preact-intlayer

Gói preact-intlayer được sử dụng để diễn giải các từ điển Intlayer và làm cho chúng có thể sử dụng trong các ứng dụng Preact.

angular-intlayer (Đang phát triển)

Gói angular-intlayer được sử dụng để diễn giải các từ điển Intlayer và làm cho chúng có thể sử dụng trong các ứng dụng Angular.

express-intlayer

Gói express-intlayer được sử dụng để dùng Intlayer trên backend Express.js.

react-native-intlayer

Gói react-native-intlayer cung cấp các công cụ tích hợp plugin để Intlayer hoạt động với Metro bundler.

lynx-intlayer

Gói lynx-intlayer cung cấp các công cụ tích hợp plugin để Intlayer hoạt động với Lynx bundler.

vite-intlayer

Bao gồm plugin Vite để tích hợp Intlayer với Vite bundler, cũng như middleware để phát hiện ngôn ngữ ưu tiên của người dùng, quản lý cookie và xử lý chuyển hướng URL.

react-scripts-intlayer

Bao gồm các lệnh và plugin react-scripts-intlayer để tích hợp Intlayer với ứng dụng dựa trên Create React App. Các plugin này dựa trên craco và bao gồm cấu hình bổ sung cho bundler Webpack.

intlayer-editor

Gói intlayer-editor được sử dụng để cho phép sử dụng trình soạn thảo trực quan. Gói này là tùy chọn, có thể được cài đặt trong các ứng dụng và sẽ được gói react-intlayer sử dụng. Nó bao gồm hai phần: server và client.

Client chứa các thành phần giao diện người dùng sẽ được react-intlayer sử dụng.

Server, dựa trên Express, được sử dụng để nhận các yêu cầu từ trình soạn thảo trực quan và quản lý hoặc chỉnh sửa các tệp nội dung.

intlayer-cli

Gói intlayer-cli có thể được sử dụng để tạo từ điển bằng lệnh npx intlayer dictionaries build. Nếu intlayer đã được cài đặt, CLI sẽ tự động được cài đặt và gói này không cần thiết.

@intlayer/core

Gói @intlayer/core là gói chính của Intlayer. Nó chứa các chức năng quản lý dịch thuật và từ điển. @intlayer/core đa nền tảng và được các gói khác sử dụng để thực hiện việc diễn giải từ điển.

@intlayer/config

Gói @intlayer/config được sử dụng để cấu hình các thiết lập của Intlayer, chẳng hạn như các ngôn ngữ có sẵn, các tham số middleware của Next.js, hoặc các thiết lập của trình soạn thảo tích hợp.

@intlayer/webpack

Gói @intlayer/webpack được sử dụng để cung cấp cấu hình Webpack nhằm giúp một ứng dụng dựa trên Webpack hoạt động với Intlayer. Gói này cũng cung cấp một plugin để thêm vào một ứng dụng Webpack hiện có.

@intlayer/cli

Gói @intlayer/cli là một gói NPM được sử dụng để khai báo các script liên quan đến giao diện dòng lệnh Intlayer. Nó đảm bảo tính đồng nhất của tất cả các lệnh CLI của Intlayer. Gói này đặc biệt được sử dụng bởi các gói intlayer-cli và intlayer.

@intlayer/mcp

Gói @intlayer/mcp cung cấp một server MCP (Model Context Protocol) mang đến sự hỗ trợ IDE được trang bị AI, được tùy chỉnh cho hệ sinh thái Intlayer. Nó tự động tải tài liệu và tích hợp với CLI của Intlayer.

@intlayer/dictionaries-entry & @intlayer/unmerged-dictionaries-entry & @intlayer/dynamic-dictionaries-entry

Gói @intlayer/dictionaries-entry, @intlayer/unmerged-dictionaries-entry và @intlayer/dynamic-dictionaries-entry trả về đường dẫn entry của các từ điển Intlayer. Vì việc tìm kiếm hệ thống tập tin từ trình duyệt là không thể, nên việc sử dụng các bundler như Webpack hoặc Rollup để lấy đường dẫn entry của các từ điển cũng không khả thi. Các gói này được thiết kế để được alias, cho phép tối ưu hóa bundling trên nhiều bundler khác nhau như Vite, Webpack và Turbopack.

@intlayer/chokidar

Gói @intlayer/chokidar được sử dụng để giám sát các tập tin nội dung và tái tạo lại từ điển đã chỉnh sửa mỗi khi có thay đổi.

@intlayer/editor

Gói @intlayer/editor cung cấp các tiện ích liên quan đến trình chỉnh sửa từ điển. Nó đặc biệt bao gồm API để kết nối một ứng dụng với trình chỉnh sửa Intlayer, và các tiện ích để thao tác với các từ điển. Gói này hỗ trợ đa nền tảng.

@intlayer/editor-react

Gói @intlayer/editor-react cung cấp các state, context, hook và component để kết nối một ứng dụng React với trình chỉnh sửa Intlayer.

@intlayer/babel

Gói @intlayer/babel cung cấp các công cụ tối ưu hóa việc bundling các từ điển cho các ứng dụng dựa trên Vite và Webpack.

@intlayer/swc

Gói @intlayer/swc cung cấp các công cụ tối ưu hóa việc bundling các từ điển cho các ứng dụng Next.js.

@intlayer/api

Gói @intlayer/api là một SDK API để tương tác với backend.

@intlayer/design-system

Gói @intlayer/design-system được sử dụng để chia sẻ các yếu tố thiết kế giữa CMS và trình chỉnh sửa Visual.

@intlayer/backend

Gói @intlayer/backend xuất các kiểu backend và sẽ sớm cung cấp backend như một gói độc lập trong tương lai.

Trò chuyện với tài liệu thông minh của chúng tôi

• Đặt câu hỏi của bạn với tài liệu thông minh của chúng tôi