@intlayer/docs 8.9.6-canary.0 → 8.9.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/blog/ar/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
- package/blog/de/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
- package/blog/en/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
- package/blog/en/react-i18next_vs_react-intl_vs_intlayer.md +1 -1
- package/blog/en-GB/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
- package/blog/es/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
- package/blog/fr/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
- package/blog/id/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
- package/blog/id/react-i18next_vs_react-intl_vs_intlayer.md +1 -1
- package/blog/it/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
- package/blog/ja/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
- package/blog/ko/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
- package/blog/pl/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
- package/blog/pl/react-i18next_vs_react-intl_vs_intlayer.md +1 -1
- package/blog/pt/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
- package/blog/ru/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
- package/blog/tr/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
- package/blog/tr/react-i18next_vs_react-intl_vs_intlayer.md +1 -1
- package/blog/uk/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
- package/blog/uk/react-i18next_vs_react-intl_vs_intlayer.md +1 -1
- package/blog/vi/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
- package/blog/vi/react-i18next_vs_react-intl_vs_intlayer.md +1 -1
- package/blog/zh/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
- package/docs/ar/benchmark/nextjs.md +8 -8
- package/docs/ar/benchmark/solid.md +8 -8
- package/docs/ar/benchmark/svelte.md +8 -8
- package/docs/ar/benchmark/tanstack.md +7 -7
- package/docs/ar/benchmark/vue.md +8 -8
- package/docs/ar/interest_of_intlayer.md +107 -80
- package/docs/bn/interest_of_intlayer.md +237 -0
- package/docs/cs/interest_of_intlayer.md +237 -0
- package/docs/de/benchmark/nextjs.md +8 -8
- package/docs/de/benchmark/solid.md +8 -8
- package/docs/de/benchmark/svelte.md +8 -8
- package/docs/de/benchmark/tanstack.md +7 -7
- package/docs/de/benchmark/vue.md +8 -8
- package/docs/de/interest_of_intlayer.md +98 -74
- package/docs/en/benchmark/___nextjs.md +8 -8
- package/docs/en/benchmark/___tanstack.md +6 -6
- package/docs/en/benchmark/nextjs.md +8 -8
- package/docs/en/benchmark/solid.md +8 -8
- package/docs/en/benchmark/svelte.md +8 -8
- package/docs/en/benchmark/tanstack.md +7 -7
- package/docs/en/benchmark/vue.md +8 -8
- package/docs/en/configuration.md +2 -1
- package/docs/en/interest_of_intlayer.md +1 -1
- package/docs/en-GB/benchmark/nextjs.md +8 -8
- package/docs/en-GB/benchmark/solid.md +8 -8
- package/docs/en-GB/benchmark/svelte.md +8 -8
- package/docs/en-GB/benchmark/tanstack.md +7 -7
- package/docs/en-GB/benchmark/vue.md +8 -8
- package/docs/en-GB/configuration.md +2 -1
- package/docs/en-GB/interest_of_intlayer.md +59 -33
- package/docs/es/benchmark/nextjs.md +8 -8
- package/docs/es/benchmark/solid.md +8 -8
- package/docs/es/benchmark/svelte.md +8 -8
- package/docs/es/benchmark/tanstack.md +7 -7
- package/docs/es/benchmark/vue.md +8 -8
- package/docs/es/interest_of_intlayer.md +28 -2
- package/docs/fr/benchmark/nextjs.md +8 -8
- package/docs/fr/benchmark/solid.md +8 -8
- package/docs/fr/benchmark/svelte.md +8 -8
- package/docs/fr/benchmark/tanstack.md +7 -7
- package/docs/fr/benchmark/vue.md +8 -8
- package/docs/fr/interest_of_intlayer.md +47 -21
- package/docs/hi/benchmark/nextjs.md +8 -8
- package/docs/hi/benchmark/solid.md +8 -8
- package/docs/hi/benchmark/svelte.md +8 -8
- package/docs/hi/benchmark/tanstack.md +7 -7
- package/docs/hi/benchmark/vue.md +8 -8
- package/docs/hi/interest_of_intlayer.md +114 -88
- package/docs/id/benchmark/nextjs.md +8 -8
- package/docs/id/benchmark/solid.md +8 -8
- package/docs/id/benchmark/svelte.md +8 -8
- package/docs/id/benchmark/tanstack.md +7 -7
- package/docs/id/benchmark/vue.md +8 -8
- package/docs/id/interest_of_intlayer.md +81 -81
- package/docs/it/benchmark/nextjs.md +8 -8
- package/docs/it/benchmark/solid.md +8 -8
- package/docs/it/benchmark/svelte.md +8 -8
- package/docs/it/benchmark/tanstack.md +7 -7
- package/docs/it/benchmark/vue.md +4 -4
- package/docs/it/interest_of_intlayer.md +96 -69
- package/docs/ja/benchmark/nextjs.md +8 -8
- package/docs/ja/benchmark/solid.md +8 -8
- package/docs/ja/benchmark/svelte.md +8 -8
- package/docs/ja/benchmark/tanstack.md +7 -7
- package/docs/ja/benchmark/vue.md +8 -8
- package/docs/ja/interest_of_intlayer.md +108 -81
- package/docs/ko/benchmark/nextjs.md +8 -8
- package/docs/ko/benchmark/solid.md +8 -8
- package/docs/ko/benchmark/svelte.md +8 -8
- package/docs/ko/benchmark/tanstack.md +7 -7
- package/docs/ko/benchmark/vue.md +8 -8
- package/docs/ko/interest_of_intlayer.md +101 -74
- package/docs/nl/interest_of_intlayer.md +237 -0
- package/docs/pl/benchmark/nextjs.md +8 -8
- package/docs/pl/benchmark/solid.md +8 -8
- package/docs/pl/benchmark/svelte.md +8 -8
- package/docs/pl/benchmark/tanstack.md +7 -7
- package/docs/pl/benchmark/vue.md +8 -8
- package/docs/pl/interest_of_intlayer.md +85 -83
- package/docs/pt/benchmark/nextjs.md +8 -8
- package/docs/pt/benchmark/solid.md +8 -8
- package/docs/pt/benchmark/svelte.md +8 -8
- package/docs/pt/benchmark/tanstack.md +7 -7
- package/docs/pt/benchmark/vue.md +8 -8
- package/docs/pt/interest_of_intlayer.md +91 -67
- package/docs/ru/benchmark/nextjs.md +8 -8
- package/docs/ru/benchmark/solid.md +6 -7
- package/docs/ru/benchmark/svelte.md +8 -8
- package/docs/ru/benchmark/tanstack.md +7 -7
- package/docs/ru/benchmark/vue.md +8 -8
- package/docs/ru/interest_of_intlayer.md +95 -69
- package/docs/tr/benchmark/nextjs.md +8 -8
- package/docs/tr/benchmark/solid.md +8 -8
- package/docs/tr/benchmark/svelte.md +8 -8
- package/docs/tr/benchmark/tanstack.md +7 -7
- package/docs/tr/benchmark/vue.md +8 -8
- package/docs/tr/interest_of_intlayer.md +94 -89
- package/docs/uk/benchmark/nextjs.md +8 -8
- package/docs/uk/benchmark/solid.md +8 -8
- package/docs/uk/benchmark/svelte.md +8 -8
- package/docs/uk/benchmark/tanstack.md +7 -7
- package/docs/uk/benchmark/vue.md +8 -8
- package/docs/uk/interest_of_intlayer.md +94 -96
- package/docs/ur/interest_of_intlayer.md +237 -0
- package/docs/vi/benchmark/nextjs.md +8 -8
- package/docs/vi/benchmark/solid.md +8 -8
- package/docs/vi/benchmark/svelte.md +8 -8
- package/docs/vi/benchmark/tanstack.md +7 -7
- package/docs/vi/benchmark/vue.md +8 -8
- package/docs/vi/interest_of_intlayer.md +82 -79
- package/docs/zh/benchmark/nextjs.md +8 -8
- package/docs/zh/benchmark/solid.md +6 -7
- package/docs/zh/benchmark/svelte.md +7 -7
- package/docs/zh/benchmark/tanstack.md +7 -7
- package/docs/zh/benchmark/vue.md +8 -8
- package/docs/zh/interest_of_intlayer.md +99 -72
- package/docs/zh-TW/interest_of_intlayer.md +237 -0
- package/package.json +6 -6
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2024-08-14
|
|
3
|
-
updatedAt: 2025-
|
|
3
|
+
updatedAt: 2025-09-27
|
|
4
4
|
title: Intlayer 的优势
|
|
5
|
-
description: 了解在项目中使用 Intlayer
|
|
5
|
+
description: 了解在项目中使用 Intlayer 的好处和优势。明白为什么 Intlayer 在其他框架中脱颖而出。
|
|
6
6
|
keywords:
|
|
7
7
|
- 好处
|
|
8
8
|
- 优势
|
|
@@ -13,32 +13,35 @@ slugs:
|
|
|
13
13
|
- doc
|
|
14
14
|
- why
|
|
15
15
|
history:
|
|
16
|
+
- version: 7.3.1
|
|
17
|
+
date: 2025-11-27
|
|
18
|
+
changes: "编译器发布"
|
|
16
19
|
- version: 5.8.0
|
|
17
20
|
date: 2025-08-19
|
|
18
|
-
changes: "
|
|
21
|
+
changes: "更新比较表"
|
|
19
22
|
- version: 5.5.10
|
|
20
23
|
date: 2025-06-29
|
|
21
|
-
changes: "
|
|
24
|
+
changes: "初始化历史"
|
|
22
25
|
---
|
|
23
26
|
|
|
24
27
|
# 为什么你应该考虑使用 Intlayer？
|
|
25
28
|
|
|
26
29
|
## 什么是 Intlayer？
|
|
27
30
|
|
|
28
|
-
**Intlayer**
|
|
31
|
+
**Intlayer** 是专门为 JavaScript 开发人员设计的国际化库。它允许在代码的任何地方声明你的内容。它将多语言内容的声明转换为结构化的字典，以便轻松集成到你的代码中。通过使用 TypeScript，**Intlayer** 使你的开发更加健壮和高效。
|
|
29
32
|
|
|
30
|
-
##
|
|
33
|
+
## 为什么要创建 Intlayer？
|
|
31
34
|
|
|
32
|
-
Intlayer
|
|
35
|
+
创建 Intlayer 是为了解决影响所有常用 i18n 库（如 `next-intl`、`react-i18next`、`react-intl`、`next-i18next` 和 `vue-i18n`）的共同问题。
|
|
33
36
|
|
|
34
|
-
|
|
37
|
+
所有这些解决方案都采用集中式方法来列出和管理你的内容。例如：
|
|
35
38
|
|
|
36
39
|
```bash
|
|
37
40
|
.
|
|
38
41
|
├── locales
|
|
39
42
|
│ ├── en.json
|
|
40
|
-
│ ├──
|
|
41
|
-
│ └──
|
|
43
|
+
│ ├── es.json
|
|
44
|
+
│ └── fr.json
|
|
42
45
|
├── i18n.ts
|
|
43
46
|
└── src
|
|
44
47
|
└── components
|
|
@@ -46,7 +49,7 @@ Intlayer 的创建是为了解决所有常见国际化库（如 `next-intl`、`r
|
|
|
46
49
|
└── index.tsx
|
|
47
50
|
```
|
|
48
51
|
|
|
49
|
-
|
|
52
|
+
或者使用命名空间：
|
|
50
53
|
|
|
51
54
|
```bash
|
|
52
55
|
.
|
|
@@ -67,23 +70,23 @@ Intlayer 的创建是为了解决所有常见国际化库（如 `next-intl`、`r
|
|
|
67
70
|
└── index.tsx
|
|
68
71
|
```
|
|
69
72
|
|
|
70
|
-
|
|
73
|
+
由于以下几个原因，这种类型的架构会减慢开发过程并使代码库的维护变得更加复杂：
|
|
71
74
|
|
|
72
|
-
1.
|
|
75
|
+
1. **对于创建的任何新组件，你应该：**
|
|
73
76
|
- 在 `locales` 文件夹中创建新的资源/命名空间
|
|
74
|
-
-
|
|
75
|
-
-
|
|
77
|
+
- 记住在页面中导入新的命名空间
|
|
78
|
+
- 翻译你的内容（通常通过从 AI 提供商处复制/粘贴手动完成）
|
|
76
79
|
|
|
77
|
-
2.
|
|
78
|
-
-
|
|
79
|
-
-
|
|
80
|
-
-
|
|
81
|
-
-
|
|
82
|
-
- 确保所有语言环境的 JSON
|
|
80
|
+
2. **对于对组件进行的任何更改，你应该：**
|
|
81
|
+
- 搜索相关的资源/命名空间（远离组件）
|
|
82
|
+
- 翻译你的内容
|
|
83
|
+
- 确保你的内容对于任何语言环境都是最新的
|
|
84
|
+
- 验证你的命名空间不包含未使用的键/值
|
|
85
|
+
- 确保所有语言环境的 JSON 文件结构相同
|
|
83
86
|
|
|
84
|
-
|
|
87
|
+
在使用这些解决方案的专业项目中，通常会使用本地化平台来帮助管理内容的翻译。然而，对于大型项目，这可能会迅速变得昂贵。
|
|
85
88
|
|
|
86
|
-
为了解决这个问题，Intlayer
|
|
89
|
+
为了解决这个问题，Intlayer 采用了一种将内容限定在每个组件范围内的方法，并将内容保持在组件附近，就像我们通常处理 CSS (`styled-components`)、类型、文档 (`storybook`) 或单元测试 (`jest`) 一样。
|
|
87
90
|
|
|
88
91
|
```bash codeFormat="typescript"
|
|
89
92
|
.
|
|
@@ -142,69 +145,93 @@ export const ComponentExample = () => {
|
|
|
142
145
|
};
|
|
143
146
|
```
|
|
144
147
|
|
|
145
|
-
|
|
148
|
+
这种方法允许你：
|
|
146
149
|
|
|
147
150
|
1. **提高开发速度**
|
|
148
151
|
- 可以使用 VSCode 扩展创建 `.content.{{ts|mjs|cjs|json}}` 文件
|
|
149
|
-
- IDE
|
|
152
|
+
- IDE 中的自动完成 AI 工具（如 GitHub Copilot）可以帮助你声明内容，减少复制/粘贴
|
|
150
153
|
|
|
151
|
-
2.
|
|
154
|
+
2. **清理你的代码库**
|
|
152
155
|
- 降低复杂性
|
|
153
156
|
- 提高可维护性
|
|
154
157
|
|
|
155
158
|
3. **更轻松地复制组件及其相关内容（例如：登录/注册组件等）**
|
|
156
|
-
-
|
|
157
|
-
-
|
|
159
|
+
- 通过限制影响其他组件内容的风险
|
|
160
|
+
- 通过将内容从一个应用程序复制/粘贴到另一个应用程序，无需外部依赖项
|
|
158
161
|
|
|
159
|
-
4.
|
|
160
|
-
-
|
|
161
|
-
-
|
|
162
|
+
4. **避免因未使用的组件而导致未使用的键/值污染代码库**
|
|
163
|
+
- 如果你不使用某个组件，Intlayer 将不会导入其相关内容
|
|
164
|
+
- 如果你删除一个组件，你将更容易记住删除其相关内容，因为它位于同一个文件夹中
|
|
162
165
|
|
|
163
166
|
5. **降低 AI 代理声明多语言内容的推理成本**
|
|
164
|
-
- AI
|
|
165
|
-
- 翻译可以通过 IDE
|
|
167
|
+
- AI 代理无需扫描整个代码库就知道在哪里实现你的内容
|
|
168
|
+
- 翻译可以通过 IDE 中的自动完成 AI 工具（如 GitHub Copilot）轻松完成
|
|
169
|
+
|
|
170
|
+
6. **优化加载性能**
|
|
171
|
+
- 如果一个组件是懒加载的，其相关内容将同时加载
|
|
166
172
|
|
|
167
173
|
## Intlayer 的附加功能
|
|
168
174
|
|
|
169
|
-
| 功能
|
|
170
|
-
|
|
|
171
|
-
| 
|
|
172
|
-
|  | **跨框架支持**<br><br>Intlayer 与所有主要框架和库兼容，包括 Next.js、React、Vite、Vue.js、Nuxt、Preact、Express 等。 |
|
|
178
|
+
|  | **JavaScript 驱动的内容管理**<br><br>利用 JavaScript 的灵活性高效地定义和管理内容。<br><br> - [内容声明](https://intlayer.org/doc/concept/content) |
|
|
179
|
+
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.jpg?raw=true" alt="功能" width="700"> | **编译器**<br><br>Intlayer 编译器自动从组件中提取内容并生成字典文件。<br><br> - [编译器](https://intlayer.org/doc/compiler) |
|
|
180
|
+
|  | **按语言环境的内容声明文件**<br><br>在自动生成之前，通过一次性声明内容来加速开发。<br><br> - [按语言环境的内容声明文件](https://intlayer.org/doc/concept/per-locale-file) |
|
|
181
|
+
|  | **类型安全环境**<br><br>利用 TypeScript 确保内容定义和代码无错误，同时受益于 IDE 自动完成。<br><br> - [TypeScript 配置](https://intlayer.org/doc/environment/vite-and-react#configure-typescript) |
|
|
182
|
+
|  | **简化设置**<br><br>通过最少的配置快速启动并运行。轻松调整国际化、路由、AI、构建和内容处理设置。<br><br> - [探索 Next.js 集成](https://intlayer.org/doc/environment/nextjs) |
|
|
183
|
+
|  | **简化内容检索**<br><br>无需为每条内容调用 `t` 函数。使用单个 hook 直接检索所有内容。<br><br> - [React 集成](https://intlayer.org/doc/environment/create-react-app) |
|
|
184
|
+
|  | **一致的服务器组件实现**<br><br>非常适合 Next.js 服务器组件，客户端和服务器组件使用相同的实现，无需在每个服务器组件中传递 `t` 函数。<br><br> - [服务器组件](https://intlayer.org/doc/environment/nextjs#step-7-utilize-content-in-your-code) |
|
|
185
|
+
|  | **有组织的代码库**<br><br>保持代码库更有组织性：1 个组件 = 1 个位于同一文件夹中的字典。靠近其各自组件的翻译增强了可维护性和清晰度。<br><br> - [Intlayer 工作原理](https://intlayer.org/doc/concept/how-works-intlayer) |
|
|
186
|
+
|  | **增强型路由**<br><br>全面支持应用路由，无缝适应复杂的应用结构，适用于 Next.js、React、Vite、Vue.js 等。<br><br> - [探索 Next.js 集成](https://intlayer.org/doc/environment/nextjs) |
|
|
187
|
+
|  | **Markdown 支持**<br><br>导入和解释本地文件和远程 Markdown 以获取多语言内容，如隐私政策、文档等。在代码中解释并使 Markdown 元数据可访问。<br><br> - [内容文件](https://intlayer.org/doc/concept/content/file) |
|
|
188
|
+
|  | **免费视觉编辑器和 CMS**<br><br>为内容作者提供免费的视觉编辑器和 CMS，无需本地化平台。使用 Git 保持内容同步，或者使用 CMS 完全或部分外部化内容。<br><br> - [Intlayer 编辑器](https://intlayer.org/doc/concept/editor) <br> - [Intlayer CMS](https://intlayer.org/doc/concept/cms) |
|
|
189
|
+
|  | **Tree-shakable 内容**<br><br>Tree-shakable 内容，减小最终包的大小。按组件加载内容，从包中排除任何未使用的内容。支持懒加载以提高应用加载效率。<br><br> - [应用构建优化](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization) |
|
|
190
|
+
|  | **静态渲染**<br><br>不阻塞静态渲染。<br><br> - [Next.js 集成](https://intlayer.org/doc/environment/nextjs) |
|
|
191
|
+
|  | **AI 驱动翻译**<br><br>只需单击一下，即可使用 Intlayer 先进的 AI 驱动翻译工具和自己的 AI 提供商/API 密钥，将网站转换为 231 种语言。<br><br> - [CI/CD 集成](https://intlayer.org/doc/concept/ci-cd) <br> - [Intlayer CLI](https://intlayer.org/doc/concept/cli) <br> - [自动填充](https://intlayer.org/doc/concept/auto-fill) |
|
|
192
|
+
|  | **MCP 服务器集成**<br><br>为 IDE 自动化提供 MCP (Model Context Protocol) 服务器，实现在开发环境中无缝的内容管理和 i18n 工作流。<br><br> - [MCP 服务器](https://github.com/aymericzip/intlayer/blob/main/docs/zh/mcp_server.md) |
|
|
193
|
+
|  | **VSCode 扩展**<br><br>Intlayer 提供 VSCode 扩展来帮助你管理内容和翻译、构建字典、翻译内容等。<br><br> - [VSCode 扩展](https://intlayer.org/doc/vs-code-extension) |
|
|
194
|
+
|  | **互操作性**<br><br>允许与 react-i18next、next-i18next、next-intl 和 react-intl 进行互操作。<br><br> - [Intlayer 和 react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer 和 next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer 和 next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next) |
|
|
195
|
+
| 测试缺失的翻译 (CLI/CI) | ✅ CLI: npx intlayer content test (CI 友好型审计) |
|
|
188
196
|
|
|
189
197
|
## Intlayer 与其他解决方案的比较
|
|
190
198
|
|
|
191
|
-
| 功能
|
|
192
|
-
|
|
|
193
|
-
| **组件附近的翻译**
|
|
194
|
-
| **TypeScript 集成**
|
|
195
|
-
| **缺失翻译检测**
|
|
196
|
-
|
|
|
197
|
-
| **AI
|
|
198
|
-
|
|
|
199
|
-
| **本地化路由**
|
|
200
|
-
| **动态路由生成**
|
|
201
|
-
| **复数形式**
|
|
202
|
-
|
|
|
203
|
-
| **内容格式**
|
|
204
|
-
| **ICU 支持**
|
|
205
|
-
| **SEO
|
|
206
|
-
| **生态系统 / 社区**
|
|
207
|
-
|
|
|
208
|
-
| **Tree-shaking
|
|
209
|
-
| **懒加载**
|
|
210
|
-
|
|
|
199
|
+
| 功能 | `intlayer` | `react-i18next` | `react-intl` (FormatJS) | `lingui` | `next-intl` | `next-i18next` | `vue-i18n` |
|
|
200
|
+
| ------------------------------------ | ---------------------------------------------------------------------------------- | ------------------------------------------------------------ | -------------------------------------------------------------------------- | ----------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ----------------------------------------------------- |
|
|
201
|
+
| **组件附近的翻译** | ✅ 是，内容与每个组件并存 | ❌ 否 | ❌ 否 | ❌ 否 | ❌ 否 | ❌ 否 | ✅ 是 - 使用 `Single File Components` (SFCs) |
|
|
202
|
+
| **TypeScript 集成** | ✅ 高级，自动生成严格类型 | ⚠️ 基础；为安全需额外配置 | ✅ 良好，但不够严格 | ⚠️ 类型，需要配置 | ✅ 良好 | ⚠️ 基础 | ✅ 良好 (提供类型；键安全需设置) |
|
|
203
|
+
| **缺失翻译检测** | ✅ TypeScript 错误高亮和构建时错误/警告 | ⚠️ 运行时主要是回退字符串 | ⚠️ 回退字符串 | ⚠️ 需要额外配置 | ⚠️ 运行时回退 | ⚠️ 运行时回退 | ⚠️ 运行时回退/警告 (可配置) |
|
|
204
|
+
| **丰富内容 (JSX/Markdown/组件)** | ✅ 直接支持 | ⚠️ 受限 / 仅插值 | ⚠️ ICU 语法，非真实 JSX | ⚠️ 受限 | ❌ 不为丰富节点设计 | ⚠️ 受限 | ⚠️ 受限 (通过 `<i18n-t>` 使用组件，Markdown 通过插件) |
|
|
205
|
+
| **AI 驱动翻译** | ✅ 是，支持多个 AI 提供商。可使用你自己的 API 密钥。考虑应用程序的上下文和内容范围 | ❌ 否 | ❌ 否 | ❌ 否 | ❌ 否 | ❌ 否 | ❌ 否 |
|
|
206
|
+
| **视觉编辑器** | ✅ 是，本地视觉编辑器 + 可选 CMS；可以外部化代码库内容；可嵌入 | ❌ 否 / 可通过外部本地化平台获取 | ❌ 否 / 可通过外部本地化平台获取 | ❌ 否 / 可通过外部本地化平台获取 | ❌ 否 / 可通过外部本地化平台获取 | ❌ 否 / 可通过外部本地化平台获取 | ❌ 否 / 可通过外部本地化平台获取 |
|
|
207
|
+
| **本地化路由** | ✅ 是，开箱即用支持本地化路径 (适用于 Next.js 和 Vite) | ⚠️ 无内置，需要插件 (例如 `next-i18next`) 或自定义路由配置 | ❌ 否，仅消息格式化，路由必须手动处理 | ⚠️ 无内置，需要插件或手动配置 | ✅ 内置，App Router 支持 `[locale]` 分段 | ✅ 内置 | ✅ 内置 |
|
|
208
|
+
| **动态路由生成** | ✅ 是 | ⚠️ 插件/生态系统或手动设置 | ❌ 不提供 | ⚠️ 插件/手动 | ✅ 是 | ✅ 是 | ❌ 不提供 (Nuxt i18n 提供) |
|
|
209
|
+
| **复数形式** | ✅ 基于枚举的模式 | ✅ 可配置 (插件如 i18next-icu) | ✅ (ICU) | ✅ (ICU/messageformat) | ✅ 良好 | ✅ 良好 | ✅ 内置复数规则 |
|
|
210
|
+
| **格式化 (日期、数字、货币)** | ✅ 优化的格式化程序 (底层为 Intl) | ⚠️ 通过插件或自定义 Intl 使用 | ✅ ICU 格式化程序 | ✅ ICU/CLI 辅助程序 | ✅ 良好 (Intl 辅助程序) | ✅ 良好 (Intl 辅助程序) | ✅ 内置日期/数字格式化程序 (Intl) |
|
|
211
|
+
| **内容格式** | ✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml 正在开发) | ⚠️ .json | ✅ .json, .js | ⚠️ .po, .json | ✅ .json, .js, .ts | ⚠️ .json | ✅ .json, .js |
|
|
212
|
+
| **ICU 支持** | ⚠️ 正在开发 | ⚠️ 通过插件 (i18next-icu) | ✅ 是 | ✅ 是 | ✅ 是 | ⚠️ 通过插件 (`i18next-icu`) | ⚠️ 通过自定义格式化程序/编译器 |
|
|
213
|
+
| **SEO 辅助程序 (hreflang, sitemap)** | ✅ 内置工具：sitemap、robots.txt、元数据的辅助程序 | ⚠️ 社区插件/手动 | ❌ 非核心 | ❌ 非核心 | ✅ 良好 | ✅ 良好 | ❌ 非核心 (Nuxt i18n 提供辅助程序) |
|
|
214
|
+
| **生态系统 / 社区** | ⚠️ 较小但增长迅速且反应灵敏 | ✅ 最大且成熟 | ✅ 大 | ⚠️ 较小 | ✅ 中等规模，专注于 Next.js | ✅ 中等规模，专注于 Next.js | ✅ Vue 生态系统中的大规模 |
|
|
215
|
+
| **服务器端渲染和服务器组件** | ✅ 是，针对 SSR / React 服务器组件进行了流程化 | ⚠️ 在页面级别支持，但需要在组件树上为子服务器组件传递 t 函数 | ⚠️ 在页面级别支持，需要额外设置，但需要在组件树上为子服务器组件传递 t 函数 | ✅ 支持，需要设置 | ⚠️ 在页面级别支持，但需要在组件树上为子服务器组件传递 t 函数 | ⚠️ 在页面级别支持，但需要在组件树上为子服务器组件传递 t 函数 | ✅ 通过 Nuxt/Vue SSR (无 RSC) 提供 SSR |
|
|
216
|
+
| **Tree-shaking (仅加载使用的内容)** | ✅ 是，构建时通过 Babel/SWC 插件按组件进行 | ⚠️ 通常全部加载 (可以通过命名空间/代码拆分进行改进) | ⚠️ 通常全部加载 | ❌ 非默认 | ⚠️ 部分 | ⚠️ 部分 | ⚠️ 部分 (通过代码拆分/手动设置) |
|
|
217
|
+
| **懒加载** | ✅ 是，按语言环境 / 按字典 | ✅ 是 (例如，按需后端/命名空间) | ✅ 是 (拆分语言环境包) | ✅ 是 (动态目录导入) | ✅ 是 (按路由/按语言环境)，需要命名空间管理 | ✅ 是 (按路由/按语言环境)，需要命名空间管理 | ✅ 是 (异步语言环境消息) |
|
|
218
|
+
| **清除未使用的内容** | ✅ 是，构建时按字典进行 | ❌ 否，仅通过手动命名空间细分 | ❌ 否，所有声明的消息都被打包 | ✅ 是，在构建时检测并删除未使用的键 | ❌ 否，可以通过命名空间管理进行手动管理 | ❌ 否，可以通过命名空间管理进行手动管理 | ❌ 否，仅可通过手动懒加载实现 |
|
|
219
|
+
| **大型项目管理** | ✅ 鼓励模块化，适用于设计系统 | ⚠️ 需要良好的文件纪律 | ⚠️ 中央目录可能会变得很大 | ⚠️ 可能会变得复杂 | ✅ 模块化及设置 | ✅ 模块化及设置 | ✅ 模块化及 Vue Router/Nuxt i18n 设置 |
|
|
220
|
+
|
|
221
|
+
---
|
|
222
|
+
|
|
223
|
+
## GitHub 星数
|
|
224
|
+
|
|
225
|
+
GitHub 星数是项目受欢迎程度、社区信任和长期相关性的有力指标。虽然星数不是技术质量的直接衡量标准，但它们反映了有多少开发人员发现该项目有用、关注其进展并可能采用它。在评估项目价值时，星数有助于比较不同方案的吸引力，并提供对生态系统增长的见解。
|
|
226
|
+
|
|
227
|
+
[](https://www.star-history.com/#formatjs/formatjs&i18next/react-i18next&i18next/i18next&i18next/next-i18next&lingui/js-lingui&amannn/next-intl&intlify/vue-i18n&opral/paraglide-js&aymericzip/intlayer)
|
|
228
|
+
|
|
229
|
+
---
|
|
230
|
+
|
|
231
|
+
## 互操作性
|
|
232
|
+
|
|
233
|
+
`intlayer` 还可以帮助管理 `react-intl`、`react-i18next`、`next-intl`、`next-i18next` 和 `vue-i18n` 命名空间。
|
|
234
|
+
|
|
235
|
+
使用 `intlayer`，你可以按照你喜欢的 i18n 库格式声明内容，intlayer 将在你选择的位置生成命名空间（例如：`/messages/{{locale}}/{{namespace}}.json`）。
|
|
236
|
+
|
|
237
|
+
有关更多详细信息，请参考 [`dictionaryOutput` 和 `i18nextResourcesDir` 选项](https://intlayer.org/doc/concept/configuration#content-configuration)。
|
|
@@ -0,0 +1,237 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2024-08-14
|
|
3
|
+
updatedAt: 2025-09-27
|
|
4
|
+
title: Intlayer 的優勢
|
|
5
|
+
description: 了解在專案中使用 Intlayer 的好處和優勢。明白為什麼 Intlayer 在其他框架中脫穎而出。
|
|
6
|
+
keywords:
|
|
7
|
+
- 好處
|
|
8
|
+
- 優勢
|
|
9
|
+
- Intlayer
|
|
10
|
+
- 框架
|
|
11
|
+
- 比較
|
|
12
|
+
slugs:
|
|
13
|
+
- doc
|
|
14
|
+
- why
|
|
15
|
+
history:
|
|
16
|
+
- version: 7.3.1
|
|
17
|
+
date: 2025-11-27
|
|
18
|
+
changes: "編譯器發佈"
|
|
19
|
+
- version: 5.8.0
|
|
20
|
+
date: 2025-08-19
|
|
21
|
+
changes: "更新比較表"
|
|
22
|
+
- version: 5.5.10
|
|
23
|
+
date: 2025-06-29
|
|
24
|
+
changes: "初始化歷史"
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
# 為什麼您應該考慮使用 Intlayer？
|
|
28
|
+
|
|
29
|
+
## 什麼是 Intlayer？
|
|
30
|
+
|
|
31
|
+
**Intlayer** 是專門為 JavaScript 開發人員設計的國際化庫。它允許在代碼的任何地方聲明您的內容。它將多語言內容的聲明轉換為結構化的字典，以便輕鬆集成到您的代碼中。通過使用 TypeScript，**Intlayer** 使您的開發更加健壯和高效。
|
|
32
|
+
|
|
33
|
+
## 為什麼要創建 Intlayer？
|
|
34
|
+
|
|
35
|
+
創建 Intlayer 是為了解決影響所有常用 i18n 庫（如 `next-intl`、`react-i18next`、`react-intl`、`next-i18next` 和 `vue-i18n`）的共同問題。
|
|
36
|
+
|
|
37
|
+
所有這些解決方案都採用集中式方法來列出和管理您的內容。例如：
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
.
|
|
41
|
+
├── locales
|
|
42
|
+
│ ├── en.json
|
|
43
|
+
│ ├── es.json
|
|
44
|
+
│ └── fr.json
|
|
45
|
+
├── i18n.ts
|
|
46
|
+
└── src
|
|
47
|
+
└── components
|
|
48
|
+
└── MyComponent
|
|
49
|
+
└── index.tsx
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
或者使用命名空間：
|
|
53
|
+
|
|
54
|
+
```bash
|
|
55
|
+
.
|
|
56
|
+
├── locales
|
|
57
|
+
│ ├── en
|
|
58
|
+
│ │ ├── footer.json
|
|
59
|
+
│ │ └── navbar.json
|
|
60
|
+
│ ├── fr
|
|
61
|
+
│ │ ├── footer.json
|
|
62
|
+
│ │ └── navbar.json
|
|
63
|
+
│ └── es
|
|
64
|
+
│ ├── footer.json
|
|
65
|
+
│ └── navbar.json
|
|
66
|
+
├── i18n.ts
|
|
67
|
+
└── src
|
|
68
|
+
└── components
|
|
69
|
+
└── MyComponent
|
|
70
|
+
└── index.tsx
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
由於以下幾個原因，這種類型的架構會減慢開發過程並使代碼庫的維護變得更加複雜：
|
|
74
|
+
|
|
75
|
+
1. **對於創建的任何新組件，您應該：**
|
|
76
|
+
- 在 `locales` 文件夾中創建新的資源/命名空間
|
|
77
|
+
- 記住在頁面中導入新的命名空間
|
|
78
|
+
- 翻譯您的內容（通常通過從 AI 提供商處複製/粘貼手動完成）
|
|
79
|
+
|
|
80
|
+
2. **對於對組件進行的任何更改，您應該：**
|
|
81
|
+
- 搜索相關的資源/命名空間（遠離組件）
|
|
82
|
+
- 翻譯您的內容
|
|
83
|
+
- 確保您的內容對於任何語言環境都是最新的
|
|
84
|
+
- 驗證您的命名空間不包含未使用的鍵/值
|
|
85
|
+
- 確保所有語言環境的 JSON 文件結構相同
|
|
86
|
+
|
|
87
|
+
在使用這些解決方案的專業專案中，通常會使用在地化平台來幫助管理內容的翻譯。然而，對於大型專案，這可能會迅速變得昂貴。
|
|
88
|
+
|
|
89
|
+
為了解決這個問題，Intlayer 採用了一種將內容限定在每個組件範圍內的方法，並將內容保持在組件附近，就像我們通常處理 CSS (`styled-components`)、類型、文檔 (`storybook`) 或單元測試 (`jest`) 一樣。
|
|
90
|
+
|
|
91
|
+
```bash codeFormat="typescript"
|
|
92
|
+
.
|
|
93
|
+
└── components
|
|
94
|
+
└── MyComponent
|
|
95
|
+
├── index.content.ts
|
|
96
|
+
├── index.test.tsx
|
|
97
|
+
├── index.stories.tsx
|
|
98
|
+
└── index.tsx
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
```bash codeFormat="commonjs"
|
|
102
|
+
.
|
|
103
|
+
└── components
|
|
104
|
+
└── MyComponent
|
|
105
|
+
├── index.content.cjs
|
|
106
|
+
├── index.test.mjs
|
|
107
|
+
├── index.stories.mjs
|
|
108
|
+
└── index.tsx
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
```bash codeFormat="esm"
|
|
112
|
+
.
|
|
113
|
+
└── components
|
|
114
|
+
└── MyComponent
|
|
115
|
+
├── index.content.mjs
|
|
116
|
+
├── index.test.mjs
|
|
117
|
+
├── index.stories.mjs
|
|
118
|
+
└── index.tsx
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
```tsx fileName="./components/MyComponent/index.content.ts" codeFormat={["typescript", "esm", "commonjs"]}
|
|
122
|
+
import { t, type Dictionary } from "intlayer";
|
|
123
|
+
|
|
124
|
+
const componentExampleContent = {
|
|
125
|
+
key: "component-example",
|
|
126
|
+
content: {
|
|
127
|
+
myTranslatedContent: t({
|
|
128
|
+
en: "Hello World",
|
|
129
|
+
es: "Hola Mundo",
|
|
130
|
+
fr: "Bonjour le monde",
|
|
131
|
+
}),
|
|
132
|
+
},
|
|
133
|
+
} satisfies Dictionary;
|
|
134
|
+
|
|
135
|
+
export default componentExampleContent;
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
```tsx fileName="./components/MyComponent/index.tsx" codeFormat={["typescript", "esm"]}
|
|
139
|
+
import { useIntlayer } from "react-intlayer";
|
|
140
|
+
|
|
141
|
+
export const ComponentExample = () => {
|
|
142
|
+
const { myTranslatedContent } = useIntlayer("component-example");
|
|
143
|
+
|
|
144
|
+
return <span>{myTranslatedContent}</span>;
|
|
145
|
+
};
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
這種方法允許您：
|
|
149
|
+
|
|
150
|
+
1. **提高開發速度**
|
|
151
|
+
- 可以使用 VSCode 擴充功能創建 `.content.{{ts|mjs|cjs|json}}` 文件
|
|
152
|
+
- IDE 中的自動完成 AI 工具（如 GitHub Copilot）可以幫助您聲明內容，減少複製/粘貼
|
|
153
|
+
|
|
154
|
+
2. **清理您的代碼庫**
|
|
155
|
+
- 降低複雜性
|
|
156
|
+
- 提高可維護性
|
|
157
|
+
|
|
158
|
+
3. **更輕鬆地複製組件及其相關內容（例如：登錄/註冊組件等）**
|
|
159
|
+
- 通過限制影響其他組件內容的風險
|
|
160
|
+
- 通過將內容從一個應用程序複製/粘貼到另一個應用程序，無需外部依賴項
|
|
161
|
+
|
|
162
|
+
4. **避免因未使用的組件而導致未使用的鍵/值污染代碼庫**
|
|
163
|
+
- 如果您不使用某個組件，Intlayer 將不會導入其相關內容
|
|
164
|
+
- 如果您刪除一個組件，您將更容易記住刪除其相關內容，因為它位於同一個文件夾中
|
|
165
|
+
|
|
166
|
+
5. **降低 AI 代理聲明多語言內容的推理成本**
|
|
167
|
+
- AI 代理無需掃描整個代碼庫就知道在哪裡實現您的內容
|
|
168
|
+
- 翻譯可以通過 IDE 中的自動完成 AI 工具（如 GitHub Copilot）輕鬆完成
|
|
169
|
+
|
|
170
|
+
6. **優化加載性能**
|
|
171
|
+
- 如果一個組件是懶加載的，其相關內容將同時加載
|
|
172
|
+
|
|
173
|
+
## Intlayer 的附加功能
|
|
174
|
+
|
|
175
|
+
| 功能 | 描述 |
|
|
176
|
+
| ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
177
|
+
|  | **跨框架支持**<br><br>Intlayer 與所有主要框架和庫兼容，包括 Next.js、React、Vite、Vue.js、Nuxt、Preact、Express 等。 |
|
|
178
|
+
|  | **JavaScript 驅動的內容管理**<br><br>利用 JavaScript 的靈活性高效地定義和管理內容。<br><br> - [內容聲明](https://intlayer.org/doc/concept/content) |
|
|
179
|
+
| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.jpg?raw=true" alt="功能" width="700"> | **編譯器**<br><br>Intlayer 編譯器自動從組件中提取內容並生成字典文件。<br><br> - [編譯器](https://intlayer.org/doc/compiler) |
|
|
180
|
+
|  | **按語言環境的內容聲明文件**<br><br>在自動生成之前，通過一次性聲明內容來加速開發。<br><br> - [按語言環境的內容聲明文件](https://intlayer.org/doc/concept/per-locale-file) |
|
|
181
|
+
|  | **類型安全環境**<br><br>利用 TypeScript 確保內容定義和代碼無錯誤，同時受益於 IDE 自動完成。<br><br> - [TypeScript 配置](https://intlayer.org/doc/environment/vite-and-react#configure-typescript) |
|
|
182
|
+
|  | **簡化設置**<br><br>通過最少的配置快速啟動並運行。輕鬆調整國際化、路由、AI、構建和內容處理設置。<br><br> - [探索 Next.js 集成](https://intlayer.org/doc/environment/nextjs) |
|
|
183
|
+
|  | **簡化內容檢索**<br><br>無需為每條內容調用 `t` 函數。使用單個 hook 直接檢索所有內容。<br><br> - [React 集成](https://intlayer.org/doc/environment/create-react-app) |
|
|
184
|
+
|  | **一致的伺服器組件實現**<br><br>非常適合 Next.js 伺服器組件，客戶端和伺服器組件使用相同的實現，無需在每個伺服器組件中傳遞 `t` 函數。<br><br> - [伺服器組件](https://intlayer.org/doc/environment/nextjs#step-7-utilize-content-in-your-code) |
|
|
185
|
+
|  | **有組織的代碼庫**<br><br>保持代碼庫更有組織性：1 個組件 = 1 個位於同一文件夾中的字典。靠近其各自組件的翻譯增強了可維護性和清晰度。<br><br> - [Intlayer 工作原理](https://intlayer.org/doc/concept/how-works-intlayer) |
|
|
186
|
+
|  | **增強型路由**<br><br>全面支持應用路由，無縫適應複雜的應用結構，適用於 Next.js、React、Vite、Vue.js 等。<br><br> - [探索 Next.js 集成](https://intlayer.org/doc/environment/nextjs) |
|
|
187
|
+
|  | **Markdown 支持**<br><br>導入和解釋本地文件和遠程 Markdown 以獲取多語言內容，如隱私政策、文檔等。在代碼中解釋並使 Markdown 元數據可訪問。<br><br> - [內容文件](https://intlayer.org/doc/concept/content/file) |
|
|
188
|
+
|  | **免費視覺編輯器和 CMS**<br><br>為內容作者提供免費的視覺編輯器和 CMS，無需在地化平台。使用 Git 保持內容同步，或者使用 CMS 完全或部分外部化內容。<br><br> - [Intlayer 編輯器](https://intlayer.org/doc/concept/editor) <br> - [Intlayer CMS](https://intlayer.org/doc/concept/cms) |
|
|
189
|
+
|  | **Tree-shakable 內容**<br><br>Tree-shakable 內容，減小最終包的大小。按組件加載內容，從包中排除任何未使用的內容。支持懶加載以提高應用加載效率。<br><br> - [應用構建優化](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization) |
|
|
190
|
+
|  | **靜態渲染**<br><br>不阻塞靜態渲染。<br><br> - [Next.js 集成](https://intlayer.org/doc/environment/nextjs) |
|
|
191
|
+
|  | **AI 驅動翻譯**<br><br>只需單擊一下，即可使用 Intlayer 先進的 AI 驅動翻譯工具和自己的 AI 提供商/API 密鑰，將網站轉換為 231 種語言。<br><br> - [CI/CD 集成](https://intlayer.org/doc/concept/ci-cd) <br> - [Intlayer CLI](https://intlayer.org/doc/concept/cli) <br> - [自動填充](https://intlayer.org/doc/concept/auto-fill) |
|
|
192
|
+
|  | **MCP 伺服器整合**<br><br>提供一個 MCP (Model Context Protocol) 伺服器用於 IDE 自動化，實現在開發環境中無縫的內容管理和 i18n 工作流。<br><br> - [MCP 伺服器](https://github.com/aymericzip/intlayer/blob/main/docs/zh-TW/mcp_server.md) |
|
|
193
|
+
|  | **VSCode 擴充功能**<br><br>Intlayer 提供 VSCode 擴充功能來幫助您管理內容和翻譯、構建字典、翻譯內容等。<br><br> - [VSCode 擴充功能](https://intlayer.org/doc/vs-code-extension) |
|
|
194
|
+
|  | **互操作性**<br><br>允許與 react-i18next、next-i18next、next-intl 和 react-intl 進行互操作。<br><br> - [Intlayer 和 react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer 和 next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer 和 next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next) |
|
|
195
|
+
| 測試缺失的翻譯 (CLI/CI) | ✅ CLI: npx intlayer content test (CI 友善型審計) |
|
|
196
|
+
|
|
197
|
+
## Intlayer 與其他解決方案的比較
|
|
198
|
+
|
|
199
|
+
| 功能 | `intlayer` | `react-i18next` | `react-intl` (FormatJS) | `lingui` | `next-intl` | `next-i18next` | `vue-i18n` |
|
|
200
|
+
| ------------------------------------ | ---------------------------------------------------------------------------------- | ------------------------------------------------------------ | -------------------------------------------------------------------------- | ----------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ----------------------------------------------------- |
|
|
201
|
+
| **組件附近的翻譯** | ✅ 是，內容與每個組件並存 | ❌ 否 | ❌ 否 | ❌ 否 | ❌ 否 | ❌ 否 | ✅ 是 - 使用 `Single File Components` (SFCs) |
|
|
202
|
+
| **TypeScript 集成** | ✅ 高級，自動生成嚴格類型 | ⚠️ 基礎；為安全需額外配置 | ✅ 良好，但不夠嚴格 | ⚠️ 類型，需要配置 | ✅ 良好 | ⚠️ 基礎 | ✅ 良好 (提供類型；鍵安全需設置) |
|
|
203
|
+
| **缺失翻譯檢測** | ✅ TypeScript 錯誤高亮和構建時錯誤/警告 | ⚠️ 運行時主要是回退字符串 | ⚠️ 回退字符串 | ⚠️ 需要額外配置 | ⚠️ 運行時回退 | ⚠️ 運行時回退 | ⚠️ 運行時回退/警告 (可配置) |
|
|
204
|
+
| **豐富內容 (JSX/Markdown/組件)** | ✅ 直接支持 | ⚠️ 受限 / 僅插值 | ⚠️ ICU 語法，非真實 JSX | ⚠️ 受限 | ❌ 不為豐富節點設計 | ⚠️ 受限 | ⚠️ 受限 (通過 `<i18n-t>` 使用組件，Markdown 通過插件) |
|
|
205
|
+
| **AI 驅動翻譯** | ✅ 是，支持多個 AI 提供商。可使用您自己的 API 密鑰。考慮應用程序的上下文和內容範圍 | ❌ 否 | ❌ 否 | ❌ 否 | ❌ 否 | ❌ 否 | ❌ 否 |
|
|
206
|
+
| **視覺編輯器** | ✅ 是，本地視覺編輯器 + 可選 CMS；可以外部化代碼庫內容；可嵌入 | ❌ 否 / 可通過外部在地化平台獲取 | ❌ 否 / 可通過外部在地化平台獲取 | ❌ 否 / 可通過外部在地化平台獲取 | ❌ 否 / 可通過外部在地化平台獲取 | ❌ 否 / 可通過外部在地化平台獲取 | ❌ 否 / 可通過外部在地化平台獲取 |
|
|
207
|
+
| **在地化路由** | ✅ 是，開箱即用支持在地化路徑 (適用於 Next.js 和 Vite) | ⚠️ 無內置，需要插件 (例如 `next-i18next`) 或自定義路由配置 | ❌ 否，僅消息格式化，路由必須手動處理 | ⚠️ 無內置，需要插件或手動配置 | ✅ 內置，App Router 支持 `[locale]` 分段 | ✅ 內置 | ✅ 內置 |
|
|
208
|
+
| **動態路由生成** | ✅ 是 | ⚠️ 插件/生態系統或手動設置 | ❌ 不提供 | ⚠️ 插件/手動 | ✅ 是 | ✅ 是 | ❌ 不提供 (Nuxt i18n 提供) |
|
|
209
|
+
| **複數形式** | ✅ 基於枚舉的模式 | ✅ 可配置 (插件如 i18next-icu) | ✅ (ICU) | ✅ (ICU/messageformat) | ✅ 良好 | ✅ 良好 | ✅ 內置複數規則 |
|
|
210
|
+
| **格式化 (日期、數字、貨幣)** | ✅ 優化的格式化程序 (底層為 Intl) | ⚠️ 通過插件或自定義 Intl 使用 | ✅ ICU 格式化程序 | ✅ ICU/CLI 輔助程序 | ✅ 良好 (Intl 輔助程序) | ✅ 良好 (Intl 輔助程序) | ✅ 內置日期/數字格式化程序 (Intl) |
|
|
211
|
+
| **內容格式** | ✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml 正在開發) | ⚠️ .json | ✅ .json, .js | ⚠️ .po, .json | ✅ .json, .js, .ts | ⚠️ .json | ✅ .json, .js |
|
|
212
|
+
| **ICU 支持** | ⚠️ 正在開發 | ⚠️ 通過插件 (i18next-icu) | ✅ 是 | ✅ 是 | ✅ 是 | ⚠️ 通過插件 (`i18next-icu`) | ⚠️ 通過自定義格式化程序/編譯器 |
|
|
213
|
+
| **SEO 輔助程序 (hreflang, sitemap)** | ✅ 內置工具：sitemap、robots.txt、元數據的輔助程序 | ⚠️ 社區插件/手動 | ❌ 非核心 | ❌ 非核心 | ✅ 良好 | ✅ 良好 | ❌ 非核心 (Nuxt i18n 提供輔助程序) |
|
|
214
|
+
| **生態系統 / 社區** | ⚠️ 較小但增長迅速且反應靈敏 | ✅ 最大且成熟 | ✅ 大 | ⚠️ 較小 | ✅ 中等規模，專注於 Next.js | ✅ 中等規模，專注於 Next.js | ✅ Vue 生態系統中的大規模 |
|
|
215
|
+
| **伺服器端渲染和伺服器組件** | ✅ 是，針對 SSR / React 伺服器組件進行了流程化 | ⚠️ 在頁面級別支持，但需要在組件樹上為子伺服器組件傳遞 t 函數 | ⚠️ 在頁面級別支持，需要額外設置，但需要在組件樹上為子伺服器組件傳遞 t 函數 | ✅ 支持，需要設置 | ⚠️ 在頁面級別支持，但需要在組件樹上為子伺服器組件傳遞 t 函數 | ⚠️ 在頁面級別支持，但需要在組件樹上為子伺服器組件傳遞 t 函數 | ✅ 通過 Nuxt/Vue SSR (無 RSC) 提供 SSR |
|
|
216
|
+
| **Tree-shaking (僅加載使用的內容)** | ✅ 是，構建時通過 Babel/SWC 插件按組件進行 | ⚠️ 通常全部加載 (可以通過命名空間/代碼拆分進行改進) | ⚠️ 通常全部加載 | ❌ 非默認 | ⚠️ 部分 | ⚠️ 部分 | ⚠️ 部分 (通過代碼拆分/手動設置) |
|
|
217
|
+
| **懶加載** | ✅ 是，按語言環境 / 按字典 | ✅ 是 (例如，按需後端/命名空間) | ✅ 是 (拆分語言環境包) | ✅ 是 (動態目錄導入) | ✅ 是 (按路由/按語言環境)，需要命名空間管理 | ✅ 是 (按路由/按語言環境)，需要命名空間管理 | ✅ 是 (異步語言環境消息) |
|
|
218
|
+
| **清除未使用的內容** | ✅ 是，構建時按字典進行 | ❌ 否，僅通過手動命名空間細分 | ❌ 否，所有聲明的消息都被打包 | ✅ 是，在構建時檢測並刪除未使用的鍵 | ❌ 否，可以通過命名空間管理進行手動管理 | ❌ 否，可以通過命名空間管理進行手動管理 | ❌ 否，僅可通過手動懶加載實現 |
|
|
219
|
+
| **大型專案管理** | ✅ 鼓勵模塊化，適用於設計系統 | ⚠️ 需要良好的文件紀律 | ⚠️ 中央目錄可能會變得很大 | ⚠️ 可能會變得複雜 | ✅ 模塊化及設置 | ✅ 模塊化及設置 | ✅ 模塊化及 Vue Router/Nuxt i18n 設置 |
|
|
220
|
+
|
|
221
|
+
---
|
|
222
|
+
|
|
223
|
+
## GitHub 星數
|
|
224
|
+
|
|
225
|
+
GitHub 星數是專案受歡迎程度、社區信任和長期相關性的有力指標。雖然星數不是技術質量的直接衡量標準，但它們反映了有多少開發人員發現該專案有用、關注其進展並可能採用它。在評估專案價值時，星數有助於比較不同方案的吸引力，並提供對生態系統增長的見解。
|
|
226
|
+
|
|
227
|
+
[](https://www.star-history.com/#formatjs/formatjs&i18next/react-i18next&i18next/i18next&i18next/next-i18next&lingui/js-lingui&amannn/next-intl&intlify/vue-i18n&opral/paraglide-js&aymericzip/intlayer)
|
|
228
|
+
|
|
229
|
+
---
|
|
230
|
+
|
|
231
|
+
## 互操作性
|
|
232
|
+
|
|
233
|
+
`intlayer` 還可以幫助管理 `react-intl`、`react-i18next`、`next-intl`、`next-i18next` 和 `vue-i18n` 命名空間。
|
|
234
|
+
|
|
235
|
+
使用 `intlayer`，您可以按照您喜歡的 i18n 庫格式聲明內容，intlayer 將在您選擇的位置生成命名空間（例如：`/messages/{{locale}}/{{namespace}}.json`）。
|
|
236
|
+
|
|
237
|
+
有關更多詳細信息，請參考 [`dictionaryOutput` 和 `i18nextResourcesDir` 選項](https://intlayer.org/doc/concept/configuration#content-configuration)。
|