@intlayer/docs 7.0.5 → 7.0.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/intlayer_with_i18next.md +72 -19
- package/blog/ar/intlayer_with_next-i18next.md +61 -36
- package/blog/ar/intlayer_with_next-intl.md +61 -13
- package/blog/ar/intlayer_with_react-i18next.md +67 -18
- package/blog/ar/intlayer_with_react-intl.md +66 -13
- package/blog/ar/intlayer_with_vue-i18n.md +180 -0
- package/blog/de/intlayer_with_i18next.md +61 -26
- package/blog/de/intlayer_with_next-i18next.md +66 -17
- package/blog/de/intlayer_with_next-intl.md +62 -13
- package/blog/de/intlayer_with_react-i18next.md +66 -17
- package/blog/de/intlayer_with_react-intl.md +66 -14
- package/blog/de/intlayer_with_vue-i18n.md +178 -0
- package/blog/en/intlayer_with_i18next.md +53 -2
- package/blog/en/intlayer_with_next-i18next.md +52 -16
- package/blog/en/intlayer_with_next-intl.md +49 -0
- package/blog/en/intlayer_with_react-i18next.md +50 -1
- package/blog/en/intlayer_with_react-intl.md +53 -0
- package/blog/en/intlayer_with_vue-i18n.md +178 -0
- package/blog/en-GB/intlayer_with_i18next.md +58 -7
- package/blog/en-GB/intlayer_with_next-i18next.md +55 -9
- package/blog/en-GB/intlayer_with_next-intl.md +55 -6
- package/blog/en-GB/intlayer_with_react-i18next.md +55 -6
- package/blog/en-GB/intlayer_with_react-intl.md +56 -3
- package/blog/en-GB/intlayer_with_vue-i18n.md +180 -0
- package/blog/es/intlayer_with_i18next.md +69 -18
- package/blog/es/intlayer_with_next-i18next.md +70 -24
- package/blog/es/intlayer_with_next-intl.md +64 -13
- package/blog/es/intlayer_with_react-i18next.md +61 -12
- package/blog/es/intlayer_with_react-intl.md +65 -12
- package/blog/es/intlayer_with_vue-i18n.md +178 -0
- package/blog/fr/intlayer_with_i18next.md +77 -16
- package/blog/fr/intlayer_with_next-i18next.md +55 -31
- package/blog/fr/intlayer_with_next-intl.md +57 -7
- package/blog/fr/intlayer_with_react-i18next.md +64 -7
- package/blog/fr/intlayer_with_react-intl.md +63 -10
- package/blog/fr/intlayer_with_vue-i18n.md +178 -0
- package/blog/hi/intlayer_with_i18next.md +67 -16
- package/blog/hi/intlayer_with_next-i18next.md +69 -23
- package/blog/hi/intlayer_with_next-intl.md +61 -8
- package/blog/hi/intlayer_with_react-i18next.md +63 -14
- package/blog/hi/intlayer_with_react-intl.md +66 -13
- package/blog/hi/intlayer_with_vue-i18n.md +180 -0
- package/blog/id/intlayer_with_i18next.md +65 -14
- package/blog/id/intlayer_with_next-i18next.md +58 -12
- package/blog/id/intlayer_with_next-intl.md +60 -11
- package/blog/id/intlayer_with_react-i18next.md +59 -10
- package/blog/id/intlayer_with_react-intl.md +66 -13
- package/blog/id/intlayer_with_vue-i18n.md +178 -0
- package/blog/it/intlayer_with_i18next.md +70 -19
- package/blog/it/intlayer_with_next-i18next.md +68 -22
- package/blog/it/intlayer_with_next-intl.md +62 -12
- package/blog/it/intlayer_with_react-i18next.md +65 -16
- package/blog/it/intlayer_with_react-intl.md +67 -14
- package/blog/it/intlayer_with_vue-i18n.md +178 -0
- package/blog/ja/intlayer_with_i18next.md +74 -24
- package/blog/ja/intlayer_with_next-i18next.md +60 -37
- package/blog/ja/intlayer_with_next-intl.md +63 -15
- package/blog/ja/intlayer_with_react-i18next.md +70 -21
- package/blog/ja/intlayer_with_react-intl.md +73 -21
- package/blog/ja/intlayer_with_vue-i18n.md +180 -0
- package/blog/ko/intlayer_with_i18next.md +60 -29
- package/blog/ko/intlayer_with_next-i18next.md +59 -32
- package/blog/ko/intlayer_with_next-intl.md +52 -23
- package/blog/ko/intlayer_with_react-i18next.md +65 -16
- package/blog/ko/intlayer_with_react-intl.md +74 -22
- package/blog/ko/intlayer_with_vue-i18n.md +180 -0
- package/blog/pl/intlayer_with_i18next.md +63 -12
- package/blog/pl/intlayer_with_next-i18next.md +74 -17
- package/blog/pl/intlayer_with_next-intl.md +59 -8
- package/blog/pl/intlayer_with_react-i18next.md +59 -10
- package/blog/pl/intlayer_with_react-intl.md +65 -12
- package/blog/pl/intlayer_with_vue-i18n.md +180 -0
- package/blog/pt/intlayer_with_i18next.md +67 -16
- package/blog/pt/intlayer_with_next-i18next.md +65 -19
- package/blog/pt/intlayer_with_next-intl.md +62 -12
- package/blog/pt/intlayer_with_react-i18next.md +67 -18
- package/blog/pt/intlayer_with_react-intl.md +62 -10
- package/blog/pt/intlayer_with_vue-i18n.md +178 -0
- package/blog/ru/intlayer_with_i18next.md +68 -15
- package/blog/ru/intlayer_with_next-i18next.md +71 -25
- package/blog/ru/intlayer_with_next-intl.md +56 -7
- package/blog/ru/intlayer_with_react-i18next.md +65 -16
- package/blog/ru/intlayer_with_react-intl.md +69 -16
- package/blog/ru/intlayer_with_vue-i18n.md +180 -0
- package/blog/tr/intlayer_with_i18next.md +67 -16
- package/blog/tr/intlayer_with_next-i18next.md +78 -21
- package/blog/tr/intlayer_with_next-intl.md +69 -18
- package/blog/tr/intlayer_with_react-i18next.md +65 -16
- package/blog/tr/intlayer_with_react-intl.md +71 -19
- package/blog/tr/intlayer_with_vue-i18n.md +180 -0
- package/blog/vi/intlayer_with_i18next.md +64 -13
- package/blog/vi/intlayer_with_next-i18next.md +72 -26
- package/blog/vi/intlayer_with_next-intl.md +62 -11
- package/blog/vi/intlayer_with_react-i18next.md +66 -17
- package/blog/vi/intlayer_with_react-intl.md +70 -17
- package/blog/vi/intlayer_with_vue-i18n.md +180 -0
- package/blog/zh/intlayer_with_i18next.md +67 -17
- package/blog/zh/intlayer_with_next-i18next.md +67 -22
- package/blog/zh/intlayer_with_next-intl.md +61 -13
- package/blog/zh/intlayer_with_react-i18next.md +67 -18
- package/blog/zh/intlayer_with_react-intl.md +69 -17
- package/blog/zh/intlayer_with_vue-i18n.md +180 -0
- package/dist/cjs/generated/blog.entry.cjs +19 -0
- package/dist/cjs/generated/blog.entry.cjs.map +1 -1
- package/dist/esm/generated/blog.entry.mjs +19 -0
- package/dist/esm/generated/blog.entry.mjs.map +1 -1
- package/dist/types/generated/blog.entry.d.ts +1 -0
- package/dist/types/generated/blog.entry.d.ts.map +1 -1
- package/docs/ar/intlayer_with_nextjs_15.md +36 -9
- package/docs/ar/intlayer_with_nextjs_16.md +36 -9
- package/docs/de/intlayer_with_nextjs_15.md +36 -9
- package/docs/de/intlayer_with_nextjs_16.md +24 -6
- package/docs/en/intlayer_with_nextjs_14.md +37 -9
- package/docs/en/intlayer_with_nextjs_15.md +40 -10
- package/docs/en/intlayer_with_nextjs_16.md +40 -10
- package/docs/en/plugins/sync-json.md +152 -55
- package/docs/en/releases/v7.md +1 -1
- package/docs/en-GB/intlayer_with_nextjs_15.md +36 -9
- package/docs/en-GB/intlayer_with_nextjs_16.md +36 -9
- package/docs/en-GB/releases/v7.md +1 -1
- package/docs/es/intlayer_with_nextjs_15.md +36 -9
- package/docs/es/intlayer_with_nextjs_16.md +36 -9
- package/docs/fr/intlayer_with_nextjs_15.md +36 -9
- package/docs/fr/intlayer_with_nextjs_16.md +37 -24
- package/docs/hi/intlayer_with_nextjs_15.md +36 -9
- package/docs/hi/intlayer_with_nextjs_16.md +36 -9
- package/docs/id/intlayer_with_nextjs_16.md +36 -9
- package/docs/it/intlayer_with_nextjs_15.md +36 -9
- package/docs/it/intlayer_with_nextjs_16.md +36 -9
- package/docs/ja/intlayer_with_nextjs_15.md +36 -9
- package/docs/ja/intlayer_with_nextjs_16.md +36 -9
- package/docs/ko/intlayer_with_nextjs_15.md +36 -9
- package/docs/ko/intlayer_with_nextjs_16.md +36 -9
- package/docs/pl/intlayer_with_nextjs_16.md +36 -9
- package/docs/pt/intlayer_with_nextjs_15.md +36 -9
- package/docs/pt/intlayer_with_nextjs_16.md +36 -9
- package/docs/ru/intlayer_with_nextjs_15.md +36 -9
- package/docs/ru/intlayer_with_nextjs_16.md +36 -9
- package/docs/tr/intlayer_with_nextjs_15.md +36 -9
- package/docs/tr/intlayer_with_nextjs_16.md +39 -21
- package/docs/vi/intlayer_with_nextjs_16.md +36 -9
- package/docs/zh/intlayer_with_nextjs_15.md +36 -9
- package/docs/zh/intlayer_with_nextjs_16.md +36 -9
- package/package.json +14 -14
- package/src/generated/blog.entry.ts +19 -0
|
@@ -1,18 +1,21 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2025-01-02
|
|
3
3
|
updatedAt: 2025-10-29
|
|
4
|
-
title:
|
|
4
|
+
title: So automatisieren Sie Ihre next-intl JSON-Übersetzungen mit Intlayer
|
|
5
5
|
description: Automatisieren Sie Ihre JSON-Übersetzungen mit Intlayer und next-intl für eine verbesserte Internationalisierung in Next.js-Anwendungen.
|
|
6
6
|
slugs:
|
|
7
7
|
- blog
|
|
8
8
|
- intlayer-with-next-intl
|
|
9
9
|
history:
|
|
10
|
+
- version: 7.0.6
|
|
11
|
+
date: 2025-11-01
|
|
12
|
+
changes: Hinzufügen des loadJSON-Plugins
|
|
10
13
|
- version: 7.0.0
|
|
11
14
|
date: 2025-10-29
|
|
12
15
|
changes: Wechsel zum syncJSON-Plugin
|
|
13
16
|
---
|
|
14
17
|
|
|
15
|
-
#
|
|
18
|
+
# So automatisieren Sie Ihre next-intl JSON-Übersetzungen mit Intlayer
|
|
16
19
|
|
|
17
20
|
## Was ist Intlayer?
|
|
18
21
|
|
|
@@ -22,15 +25,15 @@ Sehen Sie einen konkreten Vergleich mit next-intl in unserem Blogbeitrag [next-i
|
|
|
22
25
|
|
|
23
26
|
## Warum Intlayer mit next-intl kombinieren?
|
|
24
27
|
|
|
25
|
-
Während Intlayer eine
|
|
28
|
+
Während Intlayer eine hervorragende eigenständige i18n-Lösung bietet (siehe unseren [Next.js-Integrationsleitfaden](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_nextjs_16.md)), möchten Sie es möglicherweise aus mehreren Gründen mit next-intl kombinieren:
|
|
26
29
|
|
|
27
30
|
1. **Bestehender Codebestand**: Sie haben eine etablierte next-intl-Implementierung und möchten schrittweise zur verbesserten Entwicklererfahrung von Intlayer migrieren.
|
|
28
|
-
2. **
|
|
29
|
-
3. **Teamvertrautheit**: Ihr Team ist mit next-intl vertraut, möchte
|
|
31
|
+
2. **Legacy-Anforderungen**: Ihr Projekt erfordert Kompatibilität mit bestehenden next-intl-Plugins oder Workflows.
|
|
32
|
+
3. **Teamvertrautheit**: Ihr Team ist mit next-intl vertraut, möchte jedoch ein besseres Content-Management.
|
|
30
33
|
|
|
31
34
|
**Dafür kann Intlayer als Adapter für next-intl implementiert werden, um Ihre JSON-Übersetzungen in CLI- oder CI/CD-Pipelines zu automatisieren, Ihre Übersetzungen zu testen und mehr.**
|
|
32
35
|
|
|
33
|
-
Dieser Leitfaden zeigt Ihnen, wie Sie das überlegene Content-Deklarationssystem von Intlayer nutzen
|
|
36
|
+
Dieser Leitfaden zeigt Ihnen, wie Sie das überlegene Content-Deklarationssystem von Intlayer nutzen können, während die Kompatibilität mit next-intl erhalten bleibt.
|
|
34
37
|
|
|
35
38
|
## Inhaltsverzeichnis
|
|
36
39
|
|
|
@@ -40,7 +43,7 @@ Dieser Leitfaden zeigt Ihnen, wie Sie das überlegene Content-Deklarationssystem
|
|
|
40
43
|
|
|
41
44
|
### Schritt 1: Abhängigkeiten installieren
|
|
42
45
|
|
|
43
|
-
Installieren Sie die
|
|
46
|
+
Installieren Sie die notwendigen Pakete:
|
|
44
47
|
|
|
45
48
|
```bash packageManager="npm"
|
|
46
49
|
npm install intlayer @intlayer/sync-json-plugin
|
|
@@ -54,10 +57,14 @@ pnpm add intlayer @intlayer/sync-json-plugin
|
|
|
54
57
|
yarn add intlayer @intlayer/sync-json-plugin
|
|
55
58
|
```
|
|
56
59
|
|
|
60
|
+
```bash packageManager="bun"
|
|
61
|
+
bun add intlayer @intlayer/sync-json-plugin
|
|
62
|
+
```
|
|
63
|
+
|
|
57
64
|
**Paketbeschreibungen:**
|
|
58
65
|
|
|
59
|
-
- **intlayer**: Kernbibliothek für Internationalisierungsmanagement, Content-Deklaration und
|
|
60
|
-
- **@intlayer/sync-json-plugin**: Plugin zum Exportieren von Intlayer-Content-Deklarationen in ein next-intl
|
|
66
|
+
- **intlayer**: Kernbibliothek für Internationalisierungsmanagement, Content-Deklaration und -Erstellung
|
|
67
|
+
- **@intlayer/sync-json-plugin**: Plugin zum Exportieren von Intlayer-Content-Deklarationen in ein mit next-intl kompatibles JSON-Format
|
|
61
68
|
|
|
62
69
|
### Schritt 2: Implementieren Sie das Intlayer-Plugin zum Verpacken des JSON
|
|
63
70
|
|
|
@@ -89,21 +96,63 @@ Das `syncJSON`-Plugin verpackt das JSON automatisch. Es liest und schreibt die J
|
|
|
89
96
|
Wenn Sie möchten, dass dieses JSON zusammen mit Intlayer-Content-Deklarationsdateien (`.content`-Dateien) koexistiert, geht Intlayer folgendermaßen vor:
|
|
90
97
|
|
|
91
98
|
1. Lädt sowohl JSON- als auch Content-Deklarationsdateien und transformiert sie in ein Intlayer-Wörterbuch.
|
|
99
|
+
2. Wenn es Konflikte zwischen den JSON- und den Inhaltsdeklarationsdateien gibt, wird Intlayer alle Wörterbücher zusammenführen. Dies hängt von der Priorität der Plugins und der der Inhaltsdeklarationsdatei ab (alle sind konfigurierbar).
|
|
100
|
+
|
|
101
|
+
Wenn Änderungen über die CLI zur Übersetzung des JSON oder über das CMS vorgenommen werden, aktualisiert Intlayer die JSON-Datei mit den neuen Übersetzungen.
|
|
102
|
+
|
|
103
|
+
Für weitere Details zum `syncJSON`-Plugin siehe bitte die [syncJSON Plugin-Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/plugins/sync-json.md).
|
|
104
|
+
|
|
105
|
+
### (Optional) Schritt 3: Implementierung von JSON-Übersetzungen pro Komponente
|
|
106
|
+
|
|
107
|
+
Standardmäßig lädt, verbindet und synchronisiert Intlayer sowohl JSON- als auch Inhaltsdeklarationsdateien. Weitere Details finden Sie in der [Dokumentation zur Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md). Wenn Sie jedoch möchten, können Sie mit einem Intlayer-Plugin auch eine komponentenbezogene Verwaltung von JSON-Übersetzungen implementieren, die überall in Ihrem Codebasis lokalisiert sind.
|
|
108
|
+
|
|
109
|
+
Dafür können Sie das `loadJSON`-Plugin verwenden.
|
|
92
110
|
|
|
93
|
-
|
|
111
|
+
```ts fileName="intlayer.config.ts"
|
|
112
|
+
import { Locales, type IntlayerConfig } from "intlayer";
|
|
113
|
+
import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
|
|
114
|
+
|
|
115
|
+
const config: IntlayerConfig = {
|
|
116
|
+
internationalization: {
|
|
117
|
+
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
|
|
118
|
+
defaultLocale: Locales.ENGLISH,
|
|
119
|
+
},
|
|
120
|
+
|
|
121
|
+
// Halten Sie Ihre aktuellen JSON-Dateien mit den Intlayer-Wörterbüchern synchron
|
|
122
|
+
plugins: [
|
|
123
|
+
/**
|
|
124
|
+
* Lädt alle JSON-Dateien im src-Verzeichnis, die dem Muster {key}.i18n.json entsprechen
|
|
125
|
+
*/
|
|
126
|
+
loadJSON({
|
|
127
|
+
source: ({ key }) => `./src/**/${key}.i18n.json`,
|
|
128
|
+
locale: Locales.ENGLISH,
|
|
129
|
+
priority: 1, // Stellt sicher, dass diese JSON-Dateien Vorrang vor Dateien in `./locales/en/${key}.json` haben
|
|
130
|
+
}),
|
|
131
|
+
/**
|
|
132
|
+
* Lädt und schreibt die Ausgabe sowie Übersetzungen zurück in die JSON-Dateien im locales-Verzeichnis
|
|
133
|
+
*/
|
|
134
|
+
syncJSON({
|
|
135
|
+
source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
|
|
136
|
+
priority: 0,
|
|
137
|
+
}),
|
|
138
|
+
],
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
export default config;
|
|
142
|
+
```
|
|
94
143
|
|
|
95
|
-
|
|
144
|
+
Dies lädt alle JSON-Dateien im Verzeichnis `src`, die dem Muster `{key}.i18n.json` entsprechen, und lädt sie als Intlayer-Wörterbücher.
|
|
96
145
|
|
|
97
146
|
## Git-Konfiguration
|
|
98
147
|
|
|
99
148
|
Es wird empfohlen, automatisch generierte Intlayer-Dateien zu ignorieren:
|
|
100
149
|
|
|
101
150
|
```plaintext fileName=".gitignore"
|
|
102
|
-
# Dateien, die von Intlayer generiert werden
|
|
151
|
+
# Dateien ignorieren, die von Intlayer generiert werden
|
|
103
152
|
.intlayer
|
|
104
153
|
```
|
|
105
154
|
|
|
106
|
-
Diese Dateien können während Ihres Build-Prozesses neu generiert werden und müssen nicht in die Versionskontrolle
|
|
155
|
+
Diese Dateien können während Ihres Build-Prozesses neu generiert werden und müssen nicht in die Versionskontrolle übernommen werden.
|
|
107
156
|
|
|
108
157
|
### VS Code Erweiterung
|
|
109
158
|
|
|
@@ -13,11 +13,14 @@ keywords:
|
|
|
13
13
|
- React
|
|
14
14
|
- JavaScript
|
|
15
15
|
- TypeScript
|
|
16
|
-
-
|
|
16
|
+
- Inhaltsverwaltung
|
|
17
17
|
slugs:
|
|
18
18
|
- blog
|
|
19
19
|
- intlayer-with-react-i18next
|
|
20
20
|
history:
|
|
21
|
+
- version: 7.0.6
|
|
22
|
+
date: 2025-11-01
|
|
23
|
+
changes: LoadJSON-Plugin hinzugefügt
|
|
21
24
|
- version: 7.0.0
|
|
22
25
|
date: 2025-10-29
|
|
23
26
|
changes: Wechsel zum syncJSON-Plugin
|
|
@@ -27,21 +30,22 @@ history:
|
|
|
27
30
|
|
|
28
31
|
## Was ist Intlayer?
|
|
29
32
|
|
|
30
|
-
**Intlayer** ist eine innovative, Open-Source-Internationalisierungsbibliothek, die entwickelt wurde, um die Schwächen traditioneller i18n-Lösungen zu beheben. Sie bietet einen modernen Ansatz für
|
|
33
|
+
**Intlayer** ist eine innovative, Open-Source-Internationalisierungsbibliothek, die entwickelt wurde, um die Schwächen traditioneller i18n-Lösungen zu beheben. Sie bietet einen modernen Ansatz für die Inhaltsverwaltung in React-Anwendungen.
|
|
31
34
|
|
|
32
35
|
Siehe einen konkreten Vergleich mit react-i18next in unserem Blogbeitrag [react-i18next vs. react-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/de/react-i18next_vs_react-intl_vs_intlayer.md).
|
|
33
36
|
|
|
34
37
|
## Warum Intlayer mit react-i18next kombinieren?
|
|
35
38
|
|
|
36
|
-
Während Intlayer eine
|
|
39
|
+
Während Intlayer eine ausgezeichnete eigenständige i18n-Lösung bietet (siehe unseren [React-Integrationsleitfaden](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_vite+react.md)), möchten Sie es möglicherweise aus mehreren Gründen mit react-i18next kombinieren:
|
|
37
40
|
|
|
38
41
|
1. **Bestehender Codebestand**: Sie haben eine etablierte react-i18next-Implementierung und möchten schrittweise auf die verbesserte Entwicklererfahrung von Intlayer migrieren.
|
|
39
|
-
2. **
|
|
40
|
-
3. **Teamvertrautheit**: Ihr Team ist mit react-i18next vertraut, möchte jedoch
|
|
42
|
+
2. **Altsystemanforderungen**: Ihr Projekt erfordert Kompatibilität mit bestehenden react-i18next-Plugins oder Workflows.
|
|
43
|
+
3. **Teamvertrautheit**: Ihr Team ist mit react-i18next vertraut, möchte jedoch eine bessere Inhaltsverwaltung.
|
|
44
|
+
4. **Verwendung von Intlayer-Funktionen**: Sie möchten Intlayer-Funktionen wie Inhaltsdeklaration, Übersetzungsautomatisierung, Testen von Übersetzungen und mehr nutzen.
|
|
41
45
|
|
|
42
46
|
**Dafür kann Intlayer als Adapter für react-i18next implementiert werden, um Ihre JSON-Übersetzungen in CLI- oder CI/CD-Pipelines zu automatisieren, Ihre Übersetzungen zu testen und mehr.**
|
|
43
47
|
|
|
44
|
-
|
|
48
|
+
Diese Anleitung zeigt Ihnen, wie Sie das überlegene Inhaltsdeklarationssystem von Intlayer nutzen können, während Sie die Kompatibilität mit react-i18next beibehalten.
|
|
45
49
|
|
|
46
50
|
## Inhaltsverzeichnis
|
|
47
51
|
|
|
@@ -65,12 +69,16 @@ pnpm add intlayer @intlayer/sync-json-plugin
|
|
|
65
69
|
yarn add intlayer @intlayer/sync-json-plugin
|
|
66
70
|
```
|
|
67
71
|
|
|
72
|
+
```bash packageManager="bun"
|
|
73
|
+
bun add intlayer @intlayer/sync-json-plugin
|
|
74
|
+
```
|
|
75
|
+
|
|
68
76
|
**Paketbeschreibungen:**
|
|
69
77
|
|
|
70
|
-
- **intlayer**: Kernbibliothek für Internationalisierungsmanagement,
|
|
71
|
-
- **@intlayer/sync-json-plugin**: Plugin zum Exportieren von Intlayer-
|
|
78
|
+
- **intlayer**: Kernbibliothek für Internationalisierungsmanagement, Inhaltsdeklaration und Build
|
|
79
|
+
- **@intlayer/sync-json-plugin**: Plugin zum Exportieren von Intlayer-Inhaltsdeklarationen in ein mit react-i18next kompatibles JSON-Format
|
|
72
80
|
|
|
73
|
-
### Schritt 2: Implementieren Sie das Intlayer-Plugin
|
|
81
|
+
### Schritt 2: Implementieren Sie das Intlayer-Plugin, um das JSON zu umschließen
|
|
74
82
|
|
|
75
83
|
Erstellen Sie eine Intlayer-Konfigurationsdatei, um Ihre unterstützten Sprachen zu definieren:
|
|
76
84
|
|
|
@@ -87,7 +95,7 @@ const config: IntlayerConfig = {
|
|
|
87
95
|
},
|
|
88
96
|
plugins: [
|
|
89
97
|
syncJSON({
|
|
90
|
-
source: ({ key, locale }) => `./
|
|
98
|
+
source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
|
|
91
99
|
}),
|
|
92
100
|
],
|
|
93
101
|
};
|
|
@@ -97,25 +105,66 @@ export default config;
|
|
|
97
105
|
|
|
98
106
|
Das `syncJSON`-Plugin umschließt das JSON automatisch. Es liest und schreibt die JSON-Dateien, ohne die Inhaltsarchitektur zu verändern.
|
|
99
107
|
|
|
100
|
-
Wenn Sie möchten, dass dieses JSON zusammen mit Intlayer-
|
|
108
|
+
Wenn Sie möchten, dass dieses JSON zusammen mit Intlayer-Inhaltsdeklarationsdateien (`.content`-Dateien) koexistiert, geht Intlayer folgendermaßen vor:
|
|
109
|
+
|
|
110
|
+
1. Lädt sowohl JSON- als auch Inhaltsdeklarationsdateien und transformiert sie in ein Intlayer-Wörterbuch.
|
|
111
|
+
2. Wenn es Konflikte zwischen dem JSON und den Inhaltsdeklarationsdateien gibt, führt Intlayer eine Zusammenführung aller Wörterbücher durch. Dies hängt von der Priorität der Plugins und der der Inhaltsdeklarationsdatei ab (alle sind konfigurierbar).
|
|
112
|
+
|
|
113
|
+
Wenn Änderungen über die CLI zur Übersetzung des JSON oder über das CMS vorgenommen werden, aktualisiert Intlayer die JSON-Datei mit den neuen Übersetzungen.
|
|
114
|
+
|
|
115
|
+
Um weitere Details zum `syncJSON`-Plugin zu erfahren, lesen Sie bitte die [syncJSON Plugin-Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/plugins/sync-json.md).
|
|
116
|
+
|
|
117
|
+
### (Optional) Schritt 3: Implementierung von JSON-Übersetzungen pro Komponente
|
|
118
|
+
|
|
119
|
+
Standardmäßig lädt, kombiniert und synchronisiert Intlayer sowohl JSON- als auch Inhaltsdeklarationsdateien. Weitere Informationen finden Sie in der [Dokumentation zur Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md). Wenn Sie jedoch möchten, können Sie mit einem Intlayer-Plugin auch eine Verwaltung von JSON-Übersetzungen pro Komponente implementieren, die überall in Ihrem Codebasis lokalisiert sind.
|
|
120
|
+
|
|
121
|
+
Dafür können Sie das `loadJSON`-Plugin verwenden.
|
|
122
|
+
|
|
123
|
+
```ts fileName="intlayer.config.ts"
|
|
124
|
+
import { Locales, type IntlayerConfig } from "intlayer";
|
|
125
|
+
import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
|
|
126
|
+
|
|
127
|
+
const config: IntlayerConfig = {
|
|
128
|
+
internationalization: {
|
|
129
|
+
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
|
|
130
|
+
defaultLocale: Locales.ENGLISH,
|
|
131
|
+
},
|
|
101
132
|
|
|
102
|
-
|
|
103
|
-
|
|
133
|
+
// Halten Sie Ihre aktuellen JSON-Dateien mit den Intlayer-Wörterbüchern synchron
|
|
134
|
+
plugins: [
|
|
135
|
+
/**
|
|
136
|
+
* Lädt alle JSON-Dateien im src-Verzeichnis, die dem Muster {key}.i18n.json entsprechen
|
|
137
|
+
*/
|
|
138
|
+
loadJSON({
|
|
139
|
+
source: ({ key }) => `./src/**/${key}.i18n.json`,
|
|
140
|
+
locale: Locales.ENGLISH,
|
|
141
|
+
priority: 1, // Stellt sicher, dass diese JSON-Dateien Vorrang vor Dateien in `./locales/en/${key}.json` haben
|
|
142
|
+
}),
|
|
143
|
+
/**
|
|
144
|
+
* Lädt und schreibt die Ausgabe sowie Übersetzungen zurück in die JSON-Dateien im locales-Verzeichnis
|
|
145
|
+
*/
|
|
146
|
+
syncJSON({
|
|
147
|
+
source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
|
|
148
|
+
priority: 0,
|
|
149
|
+
}),
|
|
150
|
+
],
|
|
151
|
+
};
|
|
104
152
|
|
|
105
|
-
|
|
153
|
+
export default config;
|
|
154
|
+
```
|
|
106
155
|
|
|
107
|
-
|
|
156
|
+
Dies lädt alle JSON-Dateien im `src`-Verzeichnis, die dem Muster `{key}.i18n.json` entsprechen, und lädt sie als Intlayer-Wörterbücher.
|
|
108
157
|
|
|
109
158
|
## Git-Konfiguration
|
|
110
159
|
|
|
111
160
|
Es wird empfohlen, automatisch generierte Intlayer-Dateien zu ignorieren:
|
|
112
161
|
|
|
113
162
|
```plaintext fileName=".gitignore"
|
|
114
|
-
# Ignoriere
|
|
163
|
+
# Ignoriere von Intlayer generierte Dateien
|
|
115
164
|
.intlayer
|
|
116
165
|
```
|
|
117
166
|
|
|
118
|
-
Diese Dateien können während Ihres Build-Prozesses neu generiert werden und müssen nicht in die Versionskontrolle
|
|
167
|
+
Diese Dateien können während Ihres Build-Prozesses neu generiert werden und müssen nicht in die Versionskontrolle aufgenommen werden.
|
|
119
168
|
|
|
120
169
|
### VS Code Erweiterung
|
|
121
170
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
createdAt: 2025-01-02
|
|
3
3
|
updatedAt: 2025-10-29
|
|
4
4
|
title: Wie Sie Ihre react-intl JSON-Übersetzungen mit Intlayer automatisieren
|
|
5
|
-
description: Automatisieren Sie Ihre JSON-Übersetzungen mit Intlayer und react-intl für verbesserte Internationalisierung in React-Anwendungen.
|
|
5
|
+
description: Automatisieren Sie Ihre JSON-Übersetzungen mit Intlayer und react-intl für eine verbesserte Internationalisierung in React-Anwendungen.
|
|
6
6
|
keywords:
|
|
7
7
|
- react-intl
|
|
8
8
|
- Intlayer
|
|
@@ -16,6 +16,9 @@ slugs:
|
|
|
16
16
|
- blog
|
|
17
17
|
- intlayer-with-react-intl
|
|
18
18
|
history:
|
|
19
|
+
- version: 7.0.6
|
|
20
|
+
date: 2025-11-01
|
|
21
|
+
changes: LoadJSON-Plugin hinzugefügt
|
|
19
22
|
- version: 7.0.0
|
|
20
23
|
date: 2025-10-29
|
|
21
24
|
changes: Wechsel zum syncJSON-Plugin
|
|
@@ -23,6 +26,10 @@ history:
|
|
|
23
26
|
|
|
24
27
|
# Wie Sie Ihre react-intl JSON-Übersetzungen mit Intlayer automatisieren
|
|
25
28
|
|
|
29
|
+
## Inhaltsverzeichnis
|
|
30
|
+
|
|
31
|
+
<TOC/>
|
|
32
|
+
|
|
26
33
|
## Was ist Intlayer?
|
|
27
34
|
|
|
28
35
|
**Intlayer** ist eine innovative, Open-Source-Internationalisierungsbibliothek, die entwickelt wurde, um die Schwächen traditioneller i18n-Lösungen zu beheben. Sie bietet einen modernen Ansatz für das Content-Management in React-Anwendungen.
|
|
@@ -31,15 +38,16 @@ Sehen Sie einen konkreten Vergleich mit react-intl in unserem Blogbeitrag [react
|
|
|
31
38
|
|
|
32
39
|
## Warum Intlayer mit react-intl kombinieren?
|
|
33
40
|
|
|
34
|
-
Während Intlayer eine hervorragende eigenständige i18n-Lösung bietet (siehe unseren [React-Integrationsleitfaden](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_vite+react.md)), möchten Sie es
|
|
41
|
+
Während Intlayer eine hervorragende eigenständige i18n-Lösung bietet (siehe unseren [React-Integrationsleitfaden](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_vite+react.md)), möchten Sie es aus mehreren Gründen möglicherweise mit react-intl kombinieren:
|
|
35
42
|
|
|
36
|
-
1. **Bestehender Codebestand**: Sie haben eine etablierte react-intl-Implementierung und möchten schrittweise auf die verbesserte Entwicklererfahrung von Intlayer
|
|
43
|
+
1. **Bestehender Codebestand**: Sie haben eine etablierte react-intl-Implementierung und möchten schrittweise auf die verbesserte Entwicklererfahrung von Intlayer migrieren.
|
|
37
44
|
2. **Altsystemanforderungen**: Ihr Projekt erfordert Kompatibilität mit bestehenden react-intl-Plugins oder Workflows.
|
|
38
45
|
3. **Teamvertrautheit**: Ihr Team ist mit react-intl vertraut, möchte aber ein besseres Content-Management.
|
|
46
|
+
4. **Verwendung von Intlayer-Funktionen**: Sie möchten Intlayer-Funktionen wie Inhaltsdeklaration, Übersetzungsautomatisierung, Testen von Übersetzungen und mehr nutzen.
|
|
39
47
|
|
|
40
|
-
**Dafür kann Intlayer als Adapter für react-intl implementiert werden, um Ihre JSON-Übersetzungen in CLI- oder CI/CD-Pipelines zu automatisieren, Ihre Übersetzungen zu testen und mehr.**
|
|
48
|
+
**Dafür kann Intlayer als Adapter für react-intl implementiert werden, um Ihre JSON-Übersetzungen in CLI- oder CI/CD-Pipelines zu automatisieren, Ihre Übersetzungen zu testen und vieles mehr.**
|
|
41
49
|
|
|
42
|
-
|
|
50
|
+
Diese Anleitung zeigt Ihnen, wie Sie das überlegene Inhaltsdeklarationssystem von Intlayer nutzen können und gleichzeitig die Kompatibilität mit react-intl beibehalten.
|
|
43
51
|
|
|
44
52
|
## Inhaltsverzeichnis
|
|
45
53
|
|
|
@@ -63,10 +71,14 @@ pnpm add intlayer @intlayer/sync-json-plugin
|
|
|
63
71
|
yarn add intlayer @intlayer/sync-json-plugin
|
|
64
72
|
```
|
|
65
73
|
|
|
74
|
+
```bash packageManager="bun"
|
|
75
|
+
bun add intlayer @intlayer/sync-json-plugin
|
|
76
|
+
```
|
|
77
|
+
|
|
66
78
|
**Paketbeschreibungen:**
|
|
67
79
|
|
|
68
|
-
- **intlayer**: Kernbibliothek für Internationalisierungsmanagement,
|
|
69
|
-
- **@intlayer/sync-json-plugin**: Plugin zum Exportieren von Intlayer-
|
|
80
|
+
- **intlayer**: Kernbibliothek für Internationalisierungsmanagement, Inhaltsdeklaration und Build
|
|
81
|
+
- **@intlayer/sync-json-plugin**: Plugin zum Exportieren von Intlayer-Inhaltsdeklarationen in ein mit react-intl kompatibles JSON-Format
|
|
70
82
|
|
|
71
83
|
### Schritt 2: Implementieren Sie das Intlayer-Plugin zum Verpacken des JSON
|
|
72
84
|
|
|
@@ -93,17 +105,57 @@ const config: IntlayerConfig = {
|
|
|
93
105
|
export default config;
|
|
94
106
|
```
|
|
95
107
|
|
|
96
|
-
Das `syncJSON`-Plugin
|
|
108
|
+
Das `syncJSON`-Plugin wird das JSON automatisch verpacken. Es liest und schreibt die JSON-Dateien, ohne die Inhaltsarchitektur zu verändern.
|
|
109
|
+
|
|
110
|
+
Wenn Sie möchten, dass dieses JSON zusammen mit Intlayer-Inhaltsdeklarationsdateien (`.content`-Dateien) koexistiert, geht Intlayer folgendermaßen vor:
|
|
97
111
|
|
|
98
|
-
|
|
112
|
+
1. Lädt sowohl JSON- als auch Inhaltsdeklarationsdateien und transformiert sie in ein Intlayer-Wörterbuch.
|
|
113
|
+
2. Wenn es Konflikte zwischen dem JSON und den Inhaltsdeklarationsdateien gibt, führt Intlayer eine Zusammenführung aller Wörterbücher durch. Dies hängt von der Priorität der Plugins und der der Inhaltsdeklarationsdatei ab (alles ist konfigurierbar).
|
|
99
114
|
|
|
100
|
-
|
|
115
|
+
Wenn Änderungen über die CLI zur Übersetzung des JSON vorgenommen werden oder das CMS verwendet wird, aktualisiert Intlayer die JSON-Datei mit den neuen Übersetzungen.
|
|
101
116
|
|
|
102
|
-
|
|
117
|
+
Um weitere Details zum `syncJSON`-Plugin zu erfahren, lesen Sie bitte die [syncJSON Plugin-Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/plugins/sync-json.md).
|
|
103
118
|
|
|
104
|
-
|
|
119
|
+
### (Optional) Schritt 3: Implementierung von JSON-Übersetzungen pro Komponente
|
|
120
|
+
|
|
121
|
+
Standardmäßig lädt, kombiniert und synchronisiert Intlayer sowohl JSON- als auch Inhaltsdeklarationsdateien. Weitere Informationen finden Sie in der [Dokumentation zur Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md). Wenn Sie jedoch möchten, können Sie mit einem Intlayer-Plugin auch eine Verwaltung von JSON-Übersetzungen pro Komponente implementieren, die überall in Ihrem Code lokalisiert sind.
|
|
122
|
+
|
|
123
|
+
Dafür können Sie das `loadJSON`-Plugin verwenden.
|
|
124
|
+
|
|
125
|
+
```ts fileName="intlayer.config.ts"
|
|
126
|
+
import { Locales, type IntlayerConfig } from "intlayer";
|
|
127
|
+
import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
|
|
128
|
+
|
|
129
|
+
const config: IntlayerConfig = {
|
|
130
|
+
internationalization: {
|
|
131
|
+
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
|
|
132
|
+
defaultLocale: Locales.ENGLISH,
|
|
133
|
+
},
|
|
134
|
+
|
|
135
|
+
// Halten Sie Ihre aktuellen JSON-Dateien mit den Intlayer-Wörterbüchern synchron
|
|
136
|
+
plugins: [
|
|
137
|
+
/**
|
|
138
|
+
* Lädt alle JSON-Dateien im src-Verzeichnis, die dem Muster {key}.i18n.json entsprechen
|
|
139
|
+
*/
|
|
140
|
+
loadJSON({
|
|
141
|
+
source: ({ key }) => `./src/**/${key}.i18n.json`,
|
|
142
|
+
locale: Locales.ENGLISH,
|
|
143
|
+
priority: 1, // Stellt sicher, dass diese JSON-Dateien Vorrang vor Dateien in `./locales/en/${key}.json` haben
|
|
144
|
+
}),
|
|
145
|
+
/**
|
|
146
|
+
* Lädt und schreibt die Ausgabe sowie Übersetzungen zurück in die JSON-Dateien im locales-Verzeichnis
|
|
147
|
+
*/
|
|
148
|
+
syncJSON({
|
|
149
|
+
source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
|
|
150
|
+
priority: 0,
|
|
151
|
+
}),
|
|
152
|
+
],
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
export default config;
|
|
156
|
+
```
|
|
105
157
|
|
|
106
|
-
|
|
158
|
+
Dies lädt alle JSON-Dateien im `src`-Verzeichnis, die dem Muster `{key}.i18n.json` entsprechen, und lädt sie als Intlayer-Wörterbücher.
|
|
107
159
|
|
|
108
160
|
## Git-Konfiguration
|
|
109
161
|
|
|
@@ -114,7 +166,7 @@ Es wird empfohlen, automatisch generierte Intlayer-Dateien zu ignorieren:
|
|
|
114
166
|
.intlayer
|
|
115
167
|
```
|
|
116
168
|
|
|
117
|
-
Diese Dateien können während Ihres Build-Prozesses neu generiert werden und müssen nicht in die Versionskontrolle
|
|
169
|
+
Diese Dateien können während Ihres Build-Prozesses neu generiert werden und müssen nicht in die Versionskontrolle aufgenommen werden.
|
|
118
170
|
|
|
119
171
|
### VS Code Erweiterung
|
|
120
172
|
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2025-08-23
|
|
3
|
+
updatedAt: 2025-10-29
|
|
4
|
+
title: Intlayer und vue-i18n
|
|
5
|
+
description: Integration von Intlayer mit vue-i18n für eine umfassende Internationalisierungslösung in Vue.js
|
|
6
|
+
keywords:
|
|
7
|
+
- vue-i18n
|
|
8
|
+
- Intlayer
|
|
9
|
+
- Internationalisierung
|
|
10
|
+
- Blog
|
|
11
|
+
- Vue.js
|
|
12
|
+
- Nuxt
|
|
13
|
+
- JavaScript
|
|
14
|
+
- Vue
|
|
15
|
+
slugs:
|
|
16
|
+
- blog
|
|
17
|
+
- intlayer-with-vue-i18n
|
|
18
|
+
history:
|
|
19
|
+
- version: 7.0.6
|
|
20
|
+
date: 2025-11-01
|
|
21
|
+
changes: Hinzufügen des loadJSON-Plugins
|
|
22
|
+
- version: 7.0.0
|
|
23
|
+
date: 2025-10-29
|
|
24
|
+
changes: Wechsel zum syncJSON-Plugin und umfassende Überarbeitung
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
# Vue.js Internationalisierung (i18n) mit vue-i18n und Intlayer
|
|
28
|
+
|
|
29
|
+
## Inhaltsverzeichnis
|
|
30
|
+
|
|
31
|
+
<TOC/>
|
|
32
|
+
|
|
33
|
+
## Was ist Intlayer?
|
|
34
|
+
|
|
35
|
+
**Intlayer** ist eine innovative, Open-Source-Internationalisierungsbibliothek, die entwickelt wurde, um die Schwächen traditioneller i18n-Lösungen zu beheben. Sie bietet einen modernen Ansatz für das Content-Management in Vue.js- und Nuxt-Anwendungen.
|
|
36
|
+
|
|
37
|
+
Siehe einen konkreten Vergleich mit vue-i18n in unserem Blogbeitrag [vue-i18n vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/de/vue-i18n_vs_intlayer.md).
|
|
38
|
+
|
|
39
|
+
## Warum Intlayer mit vue-i18n kombinieren?
|
|
40
|
+
|
|
41
|
+
Während Intlayer eine hervorragende eigenständige i18n-Lösung bietet (siehe unseren [Vue.js-Integrationsleitfaden](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_vite+vue.md)), möchten Sie es möglicherweise aus mehreren Gründen mit vue-i18n kombinieren:
|
|
42
|
+
|
|
43
|
+
1. **Bestehender Codebestand**: Sie haben eine etablierte vue-i18n-Implementierung und möchten schrittweise auf die verbesserte Entwicklererfahrung von Intlayer migrieren.
|
|
44
|
+
2. **Legacy-Anforderungen**: Ihr Projekt erfordert Kompatibilität mit bestehenden vue-i18n-Plugins oder Workflows.
|
|
45
|
+
3. **Teamvertrautheit**: Ihr Team ist mit vue-i18n vertraut, möchte jedoch ein besseres Content-Management.
|
|
46
|
+
4. **Verwendung von Intlayer-Funktionen**: Sie möchten Intlayer-Funktionen wie Content-Deklaration, Übersetzungsautomatisierung, Testen von Übersetzungen und mehr nutzen.
|
|
47
|
+
|
|
48
|
+
**Dafür kann Intlayer als Adapter für vue-i18n implementiert werden, um Ihre JSON-Übersetzungen in CLI- oder CI/CD-Pipelines zu automatisieren, Ihre Übersetzungen zu testen und vieles mehr.**
|
|
49
|
+
|
|
50
|
+
Diese Anleitung zeigt Ihnen, wie Sie das überlegene Content-Deklarationssystem von Intlayer nutzen können, während Sie die Kompatibilität mit vue-i18n beibehalten.
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
## Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer mit vue-i18n
|
|
55
|
+
|
|
56
|
+
### Schritt 1: Abhängigkeiten installieren
|
|
57
|
+
|
|
58
|
+
Installieren Sie die erforderlichen Pakete mit Ihrem bevorzugten Paketmanager:
|
|
59
|
+
|
|
60
|
+
```bash packageManager="npm"
|
|
61
|
+
npm install intlayer @intlayer/sync-json-plugin
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
```bash packageManager="pnpm"
|
|
65
|
+
pnpm add intlayer @intlayer/sync-json-plugin
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
```bash packageManager="yarn"
|
|
69
|
+
yarn add intlayer @intlayer/sync-json-plugin
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
```bash packageManager="bun"
|
|
73
|
+
bun add intlayer @intlayer/sync-json-plugin
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
**Paket-Erklärungen:**
|
|
77
|
+
|
|
78
|
+
- **intlayer**: Kernbibliothek für Content-Deklaration und -Verwaltung
|
|
79
|
+
- **@intlayer/sync-json-plugin**: Plugin zum Synchronisieren von Intlayer-Content-Deklarationen mit dem vue-i18n JSON-Format
|
|
80
|
+
|
|
81
|
+
### Schritt 2: Implementieren Sie das Intlayer-Plugin, um das JSON zu umschließen
|
|
82
|
+
|
|
83
|
+
Erstellen Sie eine Intlayer-Konfigurationsdatei, um Ihre unterstützten Sprachen festzulegen:
|
|
84
|
+
|
|
85
|
+
**Wenn Sie auch JSON-Wörterbücher für vue-i18n exportieren möchten**, fügen Sie das `syncJSON`-Plugin hinzu:
|
|
86
|
+
|
|
87
|
+
```typescript fileName="intlayer.config.ts"
|
|
88
|
+
import { Locales, type IntlayerConfig } from "intlayer";
|
|
89
|
+
import { syncJSON } from "@intlayer/sync-json-plugin";
|
|
90
|
+
|
|
91
|
+
const config: IntlayerConfig = {
|
|
92
|
+
internationalization: {
|
|
93
|
+
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
|
|
94
|
+
defaultLocale: Locales.ENGLISH,
|
|
95
|
+
},
|
|
96
|
+
plugins: [
|
|
97
|
+
syncJSON({
|
|
98
|
+
source: ({ key, locale }) => `./src/locales/${locale}/${key}.json`,
|
|
99
|
+
}),
|
|
100
|
+
],
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
export default config;
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
Das `syncJSON`-Plugin umschließt das JSON automatisch. Es liest und schreibt die JSON-Dateien, ohne die Inhaltsarchitektur zu verändern.
|
|
107
|
+
|
|
108
|
+
Wenn Sie möchten, dass dieses JSON zusammen mit Intlayer-Content-Deklarationsdateien (`.content`-Dateien) koexistiert, geht Intlayer folgendermaßen vor:
|
|
109
|
+
|
|
110
|
+
1. Lädt sowohl JSON- als auch Content-Deklarationsdateien und transformiert sie in ein Intlayer-Wörterbuch.
|
|
111
|
+
2. Wenn es Konflikte zwischen dem JSON und den Content-Deklarationsdateien gibt, führt Intlayer eine Zusammenführung aller Wörterbücher durch. Dies hängt von der Priorität der Plugins und der Content-Deklarationsdatei ab (alle sind konfigurierbar).
|
|
112
|
+
|
|
113
|
+
Wenn Änderungen über die CLI zur Übersetzung des JSON vorgenommen werden oder über das CMS, aktualisiert Intlayer die JSON-Datei mit den neuen Übersetzungen.
|
|
114
|
+
|
|
115
|
+
Um weitere Details zum `syncJSON`-Plugin zu sehen, lesen Sie bitte die [syncJSON Plugin-Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/plugins/sync-json.md).
|
|
116
|
+
|
|
117
|
+
---
|
|
118
|
+
|
|
119
|
+
### (Optional) Schritt 3: Implementierung von komponentenbezogenen JSON-Übersetzungen
|
|
120
|
+
|
|
121
|
+
Standardmäßig lädt, kombiniert und synchronisiert Intlayer sowohl JSON- als auch Content-Deklarationsdateien. Weitere Informationen finden Sie in der [Content-Deklarationsdokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md). Wenn Sie jedoch möchten, können Sie mit einem Intlayer-Plugin auch eine komponentenbezogene Verwaltung von JSON implementieren, das überall in Ihrem Code lokalisiert ist.
|
|
122
|
+
|
|
123
|
+
Dafür können Sie das `loadJSON`-Plugin verwenden.
|
|
124
|
+
|
|
125
|
+
```ts fileName="intlayer.config.ts"
|
|
126
|
+
import { Locales, type IntlayerConfig } from "intlayer";
|
|
127
|
+
import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
|
|
128
|
+
|
|
129
|
+
const config: IntlayerConfig = {
|
|
130
|
+
internationalization: {
|
|
131
|
+
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
|
|
132
|
+
defaultLocale: Locales.ENGLISH,
|
|
133
|
+
},
|
|
134
|
+
|
|
135
|
+
// Halten Sie Ihre aktuellen JSON-Dateien mit den Intlayer-Wörterbüchern synchron
|
|
136
|
+
plugins: [
|
|
137
|
+
/**
|
|
138
|
+
* Lädt alle JSON-Dateien im src-Verzeichnis, die dem Muster {key}.i18n.json entsprechen
|
|
139
|
+
*/
|
|
140
|
+
loadJSON({
|
|
141
|
+
source: ({ key }) => `./src/**/${key}.i18n.json`,
|
|
142
|
+
locale: Locales.ENGLISH,
|
|
143
|
+
priority: 1, // Stellt sicher, dass diese JSON-Dateien Vorrang vor Dateien in `./locales/en/${key}.json` haben
|
|
144
|
+
}),
|
|
145
|
+
/**
|
|
146
|
+
* Lädt und schreibt die Ausgabe und Übersetzungen zurück in die JSON-Dateien im locales-Verzeichnis
|
|
147
|
+
*/
|
|
148
|
+
syncJSON({
|
|
149
|
+
source: ({ key, locale }) => `./src/locales/${locale}/${key}.json`,
|
|
150
|
+
priority: 0,
|
|
151
|
+
}),
|
|
152
|
+
],
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
export default config;
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
Dies lädt alle JSON-Dateien im `src`-Verzeichnis, die dem Muster `{key}.i18n.json` entsprechen, und lädt sie als Intlayer-Wörterbücher.
|
|
159
|
+
|
|
160
|
+
---
|
|
161
|
+
|
|
162
|
+
## Git-Konfiguration
|
|
163
|
+
|
|
164
|
+
Schließen Sie generierte Dateien von der Versionskontrolle aus:
|
|
165
|
+
|
|
166
|
+
```plaintext fileName=".gitignore"
|
|
167
|
+
# Ignoriere von Intlayer generierte Dateien
|
|
168
|
+
.intlayer
|
|
169
|
+
intl
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
Diese Dateien werden während des Build-Prozesses automatisch neu generiert und müssen nicht in Ihr Repository übernommen werden.
|
|
173
|
+
|
|
174
|
+
### VS Code Erweiterung
|
|
175
|
+
|
|
176
|
+
Für eine verbesserte Entwicklererfahrung installieren Sie die offizielle **Intlayer VS Code Erweiterung**:
|
|
177
|
+
|
|
178
|
+
[Installation aus dem VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|