@intlayer/docs 7.0.5 → 7.0.6
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
|
@@ -18,9 +18,12 @@ 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: Aggiunto plugin loadJSON
|
|
21
24
|
- version: 7.0.0
|
|
22
25
|
date: 2025-10-29
|
|
23
|
-
changes:
|
|
26
|
+
changes: Cambiato in plugin syncJSON
|
|
24
27
|
---
|
|
25
28
|
|
|
26
29
|
# Come automatizzare le traduzioni JSON di react-i18next usando Intlayer
|
|
@@ -29,17 +32,18 @@ history:
|
|
|
29
32
|
|
|
30
33
|
**Intlayer** è una libreria di internazionalizzazione innovativa e open-source progettata per superare le limitazioni delle soluzioni i18n tradizionali. Offre un approccio moderno alla gestione dei contenuti nelle applicazioni React.
|
|
31
34
|
|
|
32
|
-
Consulta un confronto concreto con react-i18next nel nostro post
|
|
35
|
+
Consulta un confronto concreto con react-i18next nel nostro post sul blog [react-i18next vs. react-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/it/react-i18next_vs_react-intl_vs_intlayer.md).
|
|
33
36
|
|
|
34
37
|
## Perché combinare Intlayer con react-i18next?
|
|
35
38
|
|
|
36
39
|
Sebbene Intlayer offra una soluzione i18n autonoma eccellente (vedi la nostra [guida all'integrazione con React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_vite+react.md)), potresti volerlo combinare con react-i18next per diversi motivi:
|
|
37
40
|
|
|
38
|
-
1. **Codice esistente**: Hai un
|
|
39
|
-
2. **Requisiti legacy**: Il tuo progetto richiede
|
|
41
|
+
1. **Codice esistente**: Hai un'implementazione consolidata di react-i18next e desideri migrare gradualmente alla migliore esperienza sviluppatore offerta da Intlayer.
|
|
42
|
+
2. **Requisiti legacy**: Il tuo progetto richiede compatibilità con plugin o flussi di lavoro esistenti di react-i18next.
|
|
40
43
|
3. **Familiarità del team**: Il tuo team è abituato a react-i18next ma desidera una migliore gestione dei contenuti.
|
|
44
|
+
4. **Utilizzo delle funzionalità di Intlayer**: Vuoi utilizzare funzionalità di Intlayer come la dichiarazione dei contenuti, l'automazione delle traduzioni, il testing delle traduzioni e altro ancora.
|
|
41
45
|
|
|
42
|
-
**Per questo, Intlayer può essere implementato come un adattatore per react-i18next per
|
|
46
|
+
**Per questo, Intlayer può essere implementato come un adattatore per react-i18next per aiutare ad automatizzare le tue traduzioni JSON in CLI o pipeline CI/CD, testare le tue traduzioni e altro ancora.**
|
|
43
47
|
|
|
44
48
|
Questa guida ti mostra come sfruttare il sistema superiore di dichiarazione dei contenuti di Intlayer mantenendo la compatibilità con react-i18next.
|
|
45
49
|
|
|
@@ -49,7 +53,7 @@ Questa guida ti mostra come sfruttare il sistema superiore di dichiarazione dei
|
|
|
49
53
|
|
|
50
54
|
## Guida passo-passo per configurare Intlayer con react-i18next
|
|
51
55
|
|
|
52
|
-
### Passo 1:
|
|
56
|
+
### Passo 1: Installa le dipendenze
|
|
53
57
|
|
|
54
58
|
Installa i pacchetti necessari:
|
|
55
59
|
|
|
@@ -65,16 +69,20 @@ 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
|
**Descrizione dei pacchetti:**
|
|
69
77
|
|
|
70
|
-
- **intlayer**: Libreria
|
|
71
|
-
- **@intlayer/sync-json-plugin**: Plugin per esportare le dichiarazioni di contenuto di Intlayer in formato JSON compatibile con react-i18next
|
|
78
|
+
- **intlayer**: Libreria core per la gestione dell'internazionalizzazione, dichiarazione dei contenuti e build
|
|
79
|
+
- **@intlayer/sync-json-plugin**: Plugin per esportare le dichiarazioni di contenuto di Intlayer in un formato JSON compatibile con react-i18next
|
|
72
80
|
|
|
73
|
-
### Passo 2:
|
|
81
|
+
### Passo 2: Implementa il plugin Intlayer per avvolgere il JSON
|
|
74
82
|
|
|
75
83
|
Crea un file di configurazione Intlayer per definire le tue localizzazioni supportate:
|
|
76
84
|
|
|
77
|
-
**Se vuoi anche esportare
|
|
85
|
+
**Se vuoi anche esportare dizionari JSON per react-i18next**, aggiungi il plugin `syncJSON`:
|
|
78
86
|
|
|
79
87
|
```typescript fileName="intlayer.config.ts"
|
|
80
88
|
import { Locales, type IntlayerConfig } from "intlayer";
|
|
@@ -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,21 +105,62 @@ export default config;
|
|
|
97
105
|
|
|
98
106
|
Il plugin `syncJSON` avvolgerà automaticamente il JSON. Leggerà e scriverà i file JSON senza modificare l'architettura del contenuto.
|
|
99
107
|
|
|
100
|
-
Se vuoi far coesistere quel JSON con i file di dichiarazione
|
|
108
|
+
Se vuoi far coesistere quel JSON con i file di dichiarazione del contenuto di Intlayer (file `.content`), Intlayer procederà in questo modo:
|
|
101
109
|
|
|
102
|
-
1.
|
|
103
|
-
2. se ci sono conflitti tra i file JSON e i file di dichiarazione
|
|
110
|
+
1. caricherà sia i file JSON che i file di dichiarazione del contenuto e li trasformerà in un dizionario Intlayer.
|
|
111
|
+
2. se ci sono conflitti tra i file JSON e i file di dichiarazione del contenuto, Intlayer procederà alla fusione di tutti quei dizionari. A seconda della priorità dei plugin e di quella del file di dichiarazione del contenuto (tutti configurabili).
|
|
104
112
|
|
|
105
113
|
Se vengono apportate modifiche utilizzando la CLI per tradurre il JSON, o utilizzando il CMS, Intlayer aggiornerà il file JSON con le nuove traduzioni.
|
|
106
114
|
|
|
107
115
|
Per maggiori dettagli sul plugin `syncJSON`, si prega di fare riferimento alla [documentazione del plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/plugins/sync-json.md).
|
|
108
116
|
|
|
117
|
+
### (Opzionale) Passo 3: Implementare traduzioni JSON per componente
|
|
118
|
+
|
|
119
|
+
Per impostazione predefinita, Intlayer caricherà, unirà e sincronizzerà sia i file JSON che i file di dichiarazione del contenuto. Vedi [la documentazione sulla dichiarazione del contenuto](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/content_file.md) per maggiori dettagli. Ma se preferisci, usando un plugin Intlayer, puoi anche implementare la gestione per componente di JSON localizzati ovunque nel tuo codice.
|
|
120
|
+
|
|
121
|
+
Per questo, puoi usare il plugin `loadJSON`.
|
|
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
|
+
},
|
|
132
|
+
|
|
133
|
+
// Mantieni i tuoi file JSON attuali sincronizzati con i dizionari Intlayer
|
|
134
|
+
plugins: [
|
|
135
|
+
/**
|
|
136
|
+
* Caricherà tutti i file JSON nella cartella src che corrispondono al pattern {key}.i18n.json
|
|
137
|
+
*/
|
|
138
|
+
loadJSON({
|
|
139
|
+
source: ({ key }) => `./src/**/${key}.i18n.json`,
|
|
140
|
+
locale: Locales.ENGLISH,
|
|
141
|
+
priority: 1, // Garantisce che questi file JSON abbiano la precedenza sui file in `./locales/en/${key}.json`
|
|
142
|
+
}),
|
|
143
|
+
/**
|
|
144
|
+
* Caricherà e scriverà l'output e le traduzioni nei file JSON nella directory delle localizzazioni
|
|
145
|
+
*/
|
|
146
|
+
syncJSON({
|
|
147
|
+
source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
|
|
148
|
+
priority: 0,
|
|
149
|
+
}),
|
|
150
|
+
],
|
|
151
|
+
};
|
|
152
|
+
|
|
153
|
+
export default config;
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
Questo caricherà tutti i file JSON nella directory `src` che corrispondono al modello `{key}.i18n.json` e li caricherà come dizionari Intlayer.
|
|
157
|
+
|
|
109
158
|
## Configurazione Git
|
|
110
159
|
|
|
111
|
-
|
|
160
|
+
Si consiglia di ignorare i file generati automaticamente da Intlayer:
|
|
112
161
|
|
|
113
162
|
```plaintext fileName=".gitignore"
|
|
114
|
-
#
|
|
163
|
+
# Ignora i file generati da Intlayer
|
|
115
164
|
.intlayer
|
|
116
165
|
```
|
|
117
166
|
|
|
@@ -16,28 +16,36 @@ 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: Aggiunto il plugin loadJSON
|
|
19
22
|
- version: 7.0.0
|
|
20
23
|
date: 2025-10-29
|
|
21
|
-
changes:
|
|
24
|
+
changes: Modificato in plugin syncJSON
|
|
22
25
|
---
|
|
23
26
|
|
|
24
27
|
# Come automatizzare le traduzioni JSON di react-intl usando Intlayer
|
|
25
28
|
|
|
29
|
+
## Indice
|
|
30
|
+
|
|
31
|
+
<TOC/>
|
|
32
|
+
|
|
26
33
|
## Cos'è Intlayer?
|
|
27
34
|
|
|
28
35
|
**Intlayer** è una libreria di internazionalizzazione innovativa e open-source progettata per superare le limitazioni delle soluzioni i18n tradizionali. Offre un approccio moderno alla gestione dei contenuti nelle applicazioni React.
|
|
29
36
|
|
|
30
|
-
Consulta un confronto concreto con react-intl nel nostro post
|
|
37
|
+
Consulta un confronto concreto con react-intl nel nostro post sul blog [react-i18next vs. react-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/react-i18next_vs_react-intl_vs_intlayer.md).
|
|
31
38
|
|
|
32
39
|
## Perché combinare Intlayer con react-intl?
|
|
33
40
|
|
|
34
|
-
Sebbene Intlayer
|
|
41
|
+
Sebbene Intlayer offra una soluzione i18n autonoma eccellente (vedi la nostra [guida all'integrazione con React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_vite+react.md)), potresti volerlo combinare con react-intl per diversi motivi:
|
|
35
42
|
|
|
36
|
-
1. **Codice esistente**: Hai un'implementazione consolidata di react-intl e
|
|
37
|
-
2. **Requisiti legacy**: Il tuo progetto richiede compatibilità con plugin o flussi di lavoro esistenti di react-intl.
|
|
43
|
+
1. **Codice esistente**: Hai un'implementazione consolidata di react-intl e desideri migrare gradualmente verso la migliore esperienza di sviluppo offerta da Intlayer.
|
|
44
|
+
2. **Requisiti legacy**: Il tuo progetto richiede la compatibilità con plugin o flussi di lavoro esistenti di react-intl.
|
|
38
45
|
3. **Familiarità del team**: Il tuo team è abituato a react-intl ma desidera una migliore gestione dei contenuti.
|
|
46
|
+
4. **Utilizzo delle funzionalità di Intlayer**: Vuoi sfruttare le funzionalità di Intlayer come la dichiarazione dei contenuti, l'automazione delle traduzioni, il testing delle traduzioni e altro ancora.
|
|
39
47
|
|
|
40
|
-
**Per questo, Intlayer può essere implementato come un adattatore per react-intl per aiutarti ad automatizzare le traduzioni JSON
|
|
48
|
+
**Per questo, Intlayer può essere implementato come un adattatore per react-intl per aiutarti ad automatizzare le tue traduzioni JSON in CLI o pipeline CI/CD, testare le tue traduzioni e altro ancora.**
|
|
41
49
|
|
|
42
50
|
Questa guida ti mostra come sfruttare il sistema superiore di dichiarazione dei contenuti di Intlayer mantenendo la compatibilità con react-intl.
|
|
43
51
|
|
|
@@ -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
|
**Descrizione dei pacchetti:**
|
|
67
79
|
|
|
68
|
-
- **intlayer**: Libreria core per la gestione dell'internazionalizzazione, dichiarazione dei contenuti e
|
|
69
|
-
- **@intlayer/sync-json-plugin**: Plugin per esportare le dichiarazioni di contenuto di Intlayer in formato JSON compatibile con react-intl
|
|
80
|
+
- **intlayer**: Libreria core per la gestione dell'internazionalizzazione, la dichiarazione dei contenuti e la compilazione
|
|
81
|
+
- **@intlayer/sync-json-plugin**: Plugin per esportare le dichiarazioni di contenuto di Intlayer in un formato JSON compatibile con react-intl
|
|
70
82
|
|
|
71
83
|
### Passo 2: Implementa il plugin Intlayer per incapsulare il JSON
|
|
72
84
|
|
|
@@ -95,25 +107,66 @@ export default config;
|
|
|
95
107
|
|
|
96
108
|
Il plugin `syncJSON` incapsulerà automaticamente il JSON. Leggerà e scriverà i file JSON senza modificare l'architettura del contenuto.
|
|
97
109
|
|
|
98
|
-
Se vuoi far coesistere quel JSON con i file di dichiarazione
|
|
110
|
+
Se vuoi far coesistere quel JSON con i file di dichiarazione del contenuto di Intlayer (file `.content`), Intlayer procederà in questo modo:
|
|
99
111
|
|
|
100
|
-
1. caricherà sia i file JSON che
|
|
101
|
-
2. se ci sono conflitti tra i file JSON e i file di dichiarazione del contenuto, Intlayer procederà alla fusione di tutti
|
|
112
|
+
1. caricherà sia i file JSON che i file di dichiarazione del contenuto e li trasformerà in un dizionario Intlayer.
|
|
113
|
+
2. se ci sono conflitti tra i file JSON e i file di dichiarazione del contenuto, Intlayer procederà alla fusione di tutti quei dizionari. A seconda della priorità dei plugin e di quella del file di dichiarazione del contenuto (tutti configurabili).
|
|
102
114
|
|
|
103
|
-
Se vengono
|
|
115
|
+
Se vengono effettuate modifiche usando la CLI per tradurre il JSON, o utilizzando il CMS, Intlayer aggiornerà il file JSON con le nuove traduzioni.
|
|
104
116
|
|
|
105
117
|
Per maggiori dettagli sul plugin `syncJSON`, si prega di fare riferimento alla [documentazione del plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/plugins/sync-json.md).
|
|
106
118
|
|
|
119
|
+
### (Opzionale) Passo 3: Implementare traduzioni JSON per componente
|
|
120
|
+
|
|
121
|
+
Per impostazione predefinita, Intlayer caricherà, unirà e sincronizzerà sia i file JSON che i file di dichiarazione del contenuto. Vedi [la documentazione sulla dichiarazione del contenuto](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/content_file.md) per maggiori dettagli. Ma se preferisci, utilizzando un plugin Intlayer, puoi anche implementare la gestione per componente di JSON localizzati ovunque nel tuo codice.
|
|
122
|
+
|
|
123
|
+
Per questo, puoi usare il plugin `loadJSON`.
|
|
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
|
+
// Mantieni i tuoi file JSON attuali sincronizzati con i dizionari Intlayer
|
|
136
|
+
plugins: [
|
|
137
|
+
/**
|
|
138
|
+
* Caricherà tutti i file JSON nella cartella src che corrispondono al pattern {key}.i18n.json
|
|
139
|
+
*/
|
|
140
|
+
loadJSON({
|
|
141
|
+
source: ({ key }) => `./src/**/${key}.i18n.json`,
|
|
142
|
+
locale: Locales.ENGLISH,
|
|
143
|
+
priority: 1, // Garantisce che questi file JSON abbiano la precedenza sui file in `./locales/en/${key}.json`
|
|
144
|
+
}),
|
|
145
|
+
/**
|
|
146
|
+
* Caricherà e scriverà l'output e le traduzioni nuovamente nei file JSON nella directory delle localizzazioni
|
|
147
|
+
*/
|
|
148
|
+
syncJSON({
|
|
149
|
+
source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
|
|
150
|
+
priority: 0,
|
|
151
|
+
}),
|
|
152
|
+
],
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
export default config;
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
Questo caricherà tutti i file JSON nella directory `src` che corrispondono al modello `{key}.i18n.json` e li caricherà come dizionari Intlayer.
|
|
159
|
+
|
|
107
160
|
## Configurazione Git
|
|
108
161
|
|
|
109
|
-
Si consiglia di ignorare i file
|
|
162
|
+
Si consiglia di ignorare i file generati automaticamente da Intlayer:
|
|
110
163
|
|
|
111
164
|
```plaintext fileName=".gitignore"
|
|
112
165
|
# Ignora i file generati da Intlayer
|
|
113
166
|
.intlayer
|
|
114
167
|
```
|
|
115
168
|
|
|
116
|
-
Questi file possono essere rigenerati durante il processo di build e non
|
|
169
|
+
Questi file possono essere rigenerati durante il processo di build e non devono essere inseriti nel controllo di versione.
|
|
117
170
|
|
|
118
171
|
### Estensione VS Code
|
|
119
172
|
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2025-08-23
|
|
3
|
+
updatedAt: 2025-10-29
|
|
4
|
+
title: Intlayer e vue-i18n
|
|
5
|
+
description: Integra Intlayer con vue-i18n per una soluzione completa di internazionalizzazione in Vue.js
|
|
6
|
+
keywords:
|
|
7
|
+
- vue-i18n
|
|
8
|
+
- Intlayer
|
|
9
|
+
- Internazionalizzazione
|
|
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: Aggiunto il plugin loadJSON
|
|
22
|
+
- version: 7.0.0
|
|
23
|
+
date: 2025-10-29
|
|
24
|
+
changes: Passaggio al plugin syncJSON e riscrittura completa
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
# Internazionalizzazione (i18n) in Vue.js con vue-i18n e Intlayer
|
|
28
|
+
|
|
29
|
+
## Indice
|
|
30
|
+
|
|
31
|
+
<TOC/>
|
|
32
|
+
|
|
33
|
+
## Cos'è Intlayer?
|
|
34
|
+
|
|
35
|
+
**Intlayer** è una libreria di internazionalizzazione innovativa e open-source progettata per superare le limitazioni delle soluzioni i18n tradizionali. Offre un approccio moderno alla gestione dei contenuti nelle applicazioni Vue.js e Nuxt.
|
|
36
|
+
|
|
37
|
+
Consulta un confronto concreto con vue-i18n nel nostro post sul blog [vue-i18n vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/it/vue-i18n_vs_intlayer.md).
|
|
38
|
+
|
|
39
|
+
## Perché combinare Intlayer con vue-i18n?
|
|
40
|
+
|
|
41
|
+
Sebbene Intlayer offra una soluzione i18n autonoma eccellente (vedi la nostra [guida all'integrazione con Vue.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_vite+vue.md)), potresti volerlo combinare con vue-i18n per diversi motivi:
|
|
42
|
+
|
|
43
|
+
1. **Codice esistente**: Hai un'implementazione vue-i18n consolidata e desideri migrare gradualmente all'esperienza sviluppatore migliorata di Intlayer.
|
|
44
|
+
2. **Requisiti legacy**: Il tuo progetto richiede compatibilità con plugin o flussi di lavoro vue-i18n esistenti.
|
|
45
|
+
3. **Familiarità del team**: Il tuo team è abituato a vue-i18n ma desidera una gestione dei contenuti migliore.
|
|
46
|
+
4. **Utilizzo delle funzionalità di Intlayer**: Vuoi utilizzare funzionalità di Intlayer come la dichiarazione dei contenuti, l'automazione delle traduzioni, il testing delle traduzioni e altro ancora.
|
|
47
|
+
|
|
48
|
+
**Per questo, Intlayer può essere implementato come un adattatore per vue-i18n per aiutarti ad automatizzare le tue traduzioni JSON in CLI o pipeline CI/CD, testare le tue traduzioni e altro ancora.**
|
|
49
|
+
|
|
50
|
+
Questa guida ti mostra come sfruttare il sistema superiore di dichiarazione dei contenuti di Intlayer mantenendo la compatibilità con vue-i18n.
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
## Guida passo-passo per configurare Intlayer con vue-i18n
|
|
55
|
+
|
|
56
|
+
### Passo 1: Installa le dipendenze
|
|
57
|
+
|
|
58
|
+
Installa i pacchetti necessari utilizzando il tuo gestore di pacchetti preferito:
|
|
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
|
+
**Spiegazioni dei pacchetti:**
|
|
77
|
+
|
|
78
|
+
- **intlayer**: Libreria core per la dichiarazione e gestione dei contenuti
|
|
79
|
+
- **@intlayer/sync-json-plugin**: Plugin per sincronizzare le dichiarazioni di contenuto di Intlayer nel formato JSON di vue-i18n
|
|
80
|
+
|
|
81
|
+
### Passo 2: Implementa il plugin Intlayer per incapsulare il JSON
|
|
82
|
+
|
|
83
|
+
Crea un file di configurazione Intlayer per definire le tue localizzazioni supportate:
|
|
84
|
+
|
|
85
|
+
**Se vuoi anche esportare dizionari JSON per vue-i18n**, aggiungi il plugin `syncJSON`:
|
|
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
|
+
Il plugin `syncJSON` incapsulerà automaticamente il JSON. Leggerà e scriverà i file JSON senza modificare l'architettura del contenuto.
|
|
107
|
+
|
|
108
|
+
Se vuoi far coesistere quel JSON con i file di dichiarazione del contenuto di Intlayer (file `.content`), Intlayer procederà in questo modo:
|
|
109
|
+
|
|
110
|
+
1. caricherà sia i file JSON che i file di dichiarazione del contenuto e li trasformerà in un dizionario Intlayer.
|
|
111
|
+
2. se ci sono conflitti tra i file JSON e i file di dichiarazione del contenuto, Intlayer procederà alla fusione di tutti quei dizionari. A seconda della priorità dei plugin e di quella del file di dichiarazione del contenuto (tutti configurabili).
|
|
112
|
+
|
|
113
|
+
Se vengono effettuate modifiche utilizzando la CLI per tradurre il JSON, o utilizzando il CMS, Intlayer aggiornerà il file JSON con le nuove traduzioni.
|
|
114
|
+
|
|
115
|
+
Per maggiori dettagli sul plugin `syncJSON`, si prega di fare riferimento alla [documentazione del plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/plugins/sync-json.md).
|
|
116
|
+
|
|
117
|
+
---
|
|
118
|
+
|
|
119
|
+
### (Opzionale) Passo 3: Implementare traduzioni JSON per componente
|
|
120
|
+
|
|
121
|
+
Per impostazione predefinita, Intlayer caricherà, unirà e sincronizzerà sia i file JSON che i file di dichiarazione del contenuto. Vedi [la documentazione sulla dichiarazione del contenuto](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/content_file.md) per maggiori dettagli. Ma se preferisci, utilizzando un plugin Intlayer, puoi anche implementare la gestione per componente del JSON localizzato ovunque nel tuo codice.
|
|
122
|
+
|
|
123
|
+
Per questo, puoi usare il plugin `loadJSON`.
|
|
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
|
+
// Mantieni i tuoi file JSON attuali sincronizzati con i dizionari Intlayer
|
|
136
|
+
plugins: [
|
|
137
|
+
/**
|
|
138
|
+
* Caricherà tutti i file JSON nella cartella src che corrispondono al pattern {key}.i18n.json
|
|
139
|
+
*/
|
|
140
|
+
loadJSON({
|
|
141
|
+
source: ({ key }) => `./src/**/${key}.i18n.json`,
|
|
142
|
+
locale: Locales.ENGLISH,
|
|
143
|
+
priority: 1, // Garantisce che questi file JSON abbiano la precedenza sui file in `./locales/en/${key}.json`
|
|
144
|
+
}),
|
|
145
|
+
/**
|
|
146
|
+
* Caricherà e scriverà l'output e le traduzioni di nuovo nei file JSON nella directory delle localizzazioni
|
|
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
|
+
Questo caricherà tutti i file JSON nella directory `src` che corrispondono al modello `{key}.i18n.json` e li caricherà come dizionari Intlayer.
|
|
159
|
+
|
|
160
|
+
---
|
|
161
|
+
|
|
162
|
+
## Configurazione Git
|
|
163
|
+
|
|
164
|
+
Escludi i file generati dal controllo di versione:
|
|
165
|
+
|
|
166
|
+
```plaintext fileName=".gitignore"
|
|
167
|
+
# Ignora i file generati da Intlayer
|
|
168
|
+
.intlayer
|
|
169
|
+
intl
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
Questi file vengono rigenerati automaticamente durante il processo di build e non devono essere aggiunti al tuo repository.
|
|
173
|
+
|
|
174
|
+
### Estensione VS Code
|
|
175
|
+
|
|
176
|
+
Per migliorare l'esperienza dello sviluppatore, installa l'**Estensione ufficiale Intlayer per VS Code**:
|
|
177
|
+
|
|
178
|
+
[Installa dal Marketplace di VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2024-12-24
|
|
3
|
-
updatedAt: 2025-
|
|
3
|
+
updatedAt: 2025-11-01
|
|
4
4
|
title: Intlayerを使ってi18nextのJSON翻訳を自動化する方法
|
|
5
5
|
description: Intlayerとi18nextを使ってJavaScriptアプリケーションの国際化を強化するためにJSON翻訳を自動化する方法。
|
|
6
6
|
keywords:
|
|
@@ -14,15 +14,18 @@ keywords:
|
|
|
14
14
|
- Next.js
|
|
15
15
|
- JavaScript
|
|
16
16
|
- TypeScript
|
|
17
|
-
-
|
|
17
|
+
- 移行
|
|
18
18
|
- 統合
|
|
19
19
|
slugs:
|
|
20
20
|
- blog
|
|
21
21
|
- intlayer-with-i18next
|
|
22
22
|
history:
|
|
23
|
+
- version: 7.0.6
|
|
24
|
+
date: 2025-11-01
|
|
25
|
+
changes: loadJSONプラグインを追加
|
|
23
26
|
- version: 7.0.0
|
|
24
27
|
date: 2025-10-29
|
|
25
|
-
changes: syncJSON
|
|
28
|
+
changes: syncJSONプラグインに変更
|
|
26
29
|
---
|
|
27
30
|
|
|
28
31
|
# Intlayerを使ってi18nextのJSON翻訳を自動化する方法
|
|
@@ -31,29 +34,30 @@ history:
|
|
|
31
34
|
|
|
32
35
|
**Intlayer**は、従来のi18nソリューションの欠点を解決するために設計された革新的なオープンソースの国際化ライブラリです。JavaScriptアプリケーションにおけるコンテンツ管理に対して、モダンなアプローチを提供します。
|
|
33
36
|
|
|
34
|
-
具体的な比較については、当社のブログ記事[
|
|
37
|
+
具体的な比較については、当社のブログ記事[ next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ja/next-i18next_vs_next-intl_vs_intlayer.md)をご覧ください。
|
|
35
38
|
|
|
36
39
|
## なぜIntlayerをi18nextと組み合わせるのか?
|
|
37
40
|
|
|
38
|
-
Intlayerは優れた単独のi18nソリューションを提供します([Next.js統合ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_nextjs_16.md)
|
|
41
|
+
Intlayerは優れた単独のi18nソリューションを提供します([Next.js統合ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_nextjs_16.md)を参照)が、以下のような理由でi18nextと組み合わせたい場合があります:
|
|
39
42
|
|
|
40
43
|
1. **既存のコードベース**: 既に確立されたi18nextの実装があり、Intlayerの改善された開発者体験へ段階的に移行したい場合。
|
|
41
44
|
2. **レガシー要件**: プロジェクトが既存のi18nextプラグインやワークフローとの互換性を必要とする場合。
|
|
42
45
|
3. **チームの慣れ親しみ**: チームがi18nextに慣れているが、より良いコンテンツ管理を望んでいる場合。
|
|
46
|
+
4. **Intlayerの機能利用**: コンテンツ宣言、翻訳キー管理、翻訳ステータスなどのIntlayerの機能を利用したい場合。
|
|
43
47
|
|
|
44
48
|
**そのために、Intlayerはi18nextのアダプターとして実装でき、CLIやCI/CDパイプラインでのJSON翻訳の自動化、翻訳のテストなどを支援します。**
|
|
45
49
|
|
|
46
|
-
このガイドでは、i18next
|
|
50
|
+
このガイドでは、i18nextとの互換性を維持しながら、Intlayerの優れたコンテンツ宣言システムを活用する方法を示します。
|
|
47
51
|
|
|
48
52
|
## 目次
|
|
49
53
|
|
|
50
54
|
<TOC/>
|
|
51
55
|
|
|
52
|
-
## Intlayer
|
|
56
|
+
## Intlayerをi18nextとセットアップするステップバイステップガイド
|
|
53
57
|
|
|
54
58
|
### ステップ1: 依存関係のインストール
|
|
55
59
|
|
|
56
|
-
|
|
60
|
+
必要なパッケージをインストールします:
|
|
57
61
|
|
|
58
62
|
```bash packageManager="npm"
|
|
59
63
|
npm install intlayer @intlayer/sync-json-plugin
|
|
@@ -67,6 +71,10 @@ pnpm add intlayer @intlayer/sync-json-plugin
|
|
|
67
71
|
yarn add intlayer @intlayer/sync-json-plugin
|
|
68
72
|
```
|
|
69
73
|
|
|
74
|
+
```bash packageManager="bun"
|
|
75
|
+
bun add intlayer @intlayer/sync-json-plugin
|
|
76
|
+
```
|
|
77
|
+
|
|
70
78
|
**パッケージの説明:**
|
|
71
79
|
|
|
72
80
|
- **intlayer**: 国際化管理、コンテンツ宣言、およびビルドのためのコアライブラリ
|
|
@@ -74,9 +82,9 @@ yarn add intlayer @intlayer/sync-json-plugin
|
|
|
74
82
|
|
|
75
83
|
### ステップ2: JSONをラップするためのIntlayerプラグインの実装
|
|
76
84
|
|
|
77
|
-
|
|
85
|
+
サポートするロケールを定義するためのIntlayer設定ファイルを作成します:
|
|
78
86
|
|
|
79
|
-
**i18next用のJSON
|
|
87
|
+
**i18next用のJSON辞書もエクスポートしたい場合は**、`syncJSON`プラグインを追加してください:
|
|
80
88
|
|
|
81
89
|
```typescript fileName="intlayer.config.ts"
|
|
82
90
|
import { Locales, type IntlayerConfig } from "intlayer";
|
|
@@ -89,7 +97,7 @@ const config: IntlayerConfig = {
|
|
|
89
97
|
},
|
|
90
98
|
plugins: [
|
|
91
99
|
syncJSON({
|
|
92
|
-
source: ({ key, locale }) => `./
|
|
100
|
+
source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
|
|
93
101
|
}),
|
|
94
102
|
],
|
|
95
103
|
};
|
|
@@ -97,31 +105,73 @@ const config: IntlayerConfig = {
|
|
|
97
105
|
export default config;
|
|
98
106
|
```
|
|
99
107
|
|
|
100
|
-
`syncJSON
|
|
108
|
+
`syncJSON` プラグインは JSON を自動的にラップします。コンテンツの構造を変更することなく、JSON ファイルの読み書きを行います。
|
|
109
|
+
|
|
110
|
+
もし JSON と intlayer のコンテンツ宣言ファイル(`.content` ファイル)を共存させたい場合、Intlayer は以下のように処理します:
|
|
111
|
+
|
|
112
|
+
1. JSON ファイルとコンテンツ宣言ファイルの両方を読み込み、intlayer の辞書に変換します。
|
|
113
|
+
2. JSON とコンテンツ宣言ファイルの間に競合がある場合、Intlayer はすべての辞書をマージします。これはプラグインの優先度やコンテンツ宣言ファイルの優先度に依存し、すべて設定可能です。
|
|
101
114
|
|
|
102
|
-
JSON
|
|
115
|
+
CLI を使って JSON の翻訳を変更した場合や CMS を使った場合、Intlayer は新しい翻訳で JSON ファイルを更新します。
|
|
103
116
|
|
|
104
|
-
|
|
117
|
+
`syncJSON`プラグインの詳細については、[syncJSONプラグインのドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/plugins/sync-json.md)を参照してください。
|
|
105
118
|
|
|
106
|
-
|
|
119
|
+
### (オプション)ステップ3:コンポーネントごとのJSON翻訳の実装
|
|
107
120
|
|
|
108
|
-
|
|
121
|
+
デフォルトでは、IntlayerはJSONファイルとコンテンツ宣言ファイルの両方を読み込み、マージし、同期します。詳細については、[コンテンツ宣言のドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/content_file.md)を参照してください。しかし、必要に応じてIntlayerプラグインを使用して、コードベースのどこにでもあるJSONのローカライズをコンポーネントごとに管理することも可能です。
|
|
109
122
|
|
|
110
|
-
|
|
123
|
+
そのためには、`loadJSON`プラグインを使用できます。
|
|
111
124
|
|
|
112
|
-
|
|
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
|
+
// 現在のJSONファイルをIntlayerの辞書と同期させる
|
|
136
|
+
plugins: [
|
|
137
|
+
/**
|
|
138
|
+
* src内の{key}.i18n.jsonパターンに一致するすべてのJSONファイルを読み込みます
|
|
139
|
+
*/
|
|
140
|
+
loadJSON({
|
|
141
|
+
source: ({ key }) => `./src/**/${key}.i18n.json`,
|
|
142
|
+
locale: Locales.ENGLISH,
|
|
143
|
+
priority: 1, // これらのJSONファイルが`./locales/en/${key}.json`のファイルより優先されることを保証します
|
|
144
|
+
}),
|
|
145
|
+
/**
|
|
146
|
+
* ローカルディレクトリ内のJSONファイルに出力と翻訳を書き戻しながら読み込みます
|
|
147
|
+
*/
|
|
148
|
+
syncJSON({
|
|
149
|
+
source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
|
|
150
|
+
priority: 0,
|
|
151
|
+
}),
|
|
152
|
+
],
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
export default config;
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
これは、`src` ディレクトリ内の `{key}.i18n.json` というパターンに一致するすべての JSON ファイルを読み込み、Intlayer の辞書としてロードします。
|
|
159
|
+
|
|
160
|
+
---
|
|
161
|
+
|
|
162
|
+
## Git 設定
|
|
163
|
+
|
|
164
|
+
自動生成された Intlayer ファイルは無視することを推奨します:
|
|
113
165
|
|
|
114
166
|
```plaintext fileName=".gitignore"
|
|
115
|
-
# Intlayer
|
|
167
|
+
# Intlayer によって生成されたファイルを無視する
|
|
116
168
|
.intlayer
|
|
117
169
|
```
|
|
118
170
|
|
|
119
171
|
これらのファイルはビルドプロセス中に再生成可能であり、バージョン管理にコミットする必要はありません。
|
|
120
172
|
|
|
121
|
-
### VS Code拡張機能
|
|
122
|
-
|
|
123
|
-
開発者体験を向上させるために、公式の**Intlayer VS Code拡張機能**をインストールしてください:
|
|
173
|
+
### VS Code 拡張機能
|
|
124
174
|
|
|
125
|
-
|
|
175
|
+
開発者体験を向上させるために、公式の **Intlayer VS Code 拡張機能** をインストールしてください:
|
|
126
176
|
|
|
127
|
-
[VS Code
|
|
177
|
+
[VS Code Marketplace からインストール](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|