@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
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
createdAt: 2025-01-02
|
|
3
3
|
updatedAt: 2025-10-29
|
|
4
4
|
title: Intlayer का उपयोग करके अपने react-i18next JSON अनुवादों को स्वचालित कैसे करें
|
|
5
|
-
description: React
|
|
5
|
+
description: React अनुप्रयोगों में बेहतर अंतरराष्ट्रीयकरण के लिए Intlayer और react-i18next के साथ अपने JSON अनुवादों को स्वचालित करें।
|
|
6
6
|
keywords:
|
|
7
7
|
- react-i18next
|
|
8
8
|
- i18next
|
|
@@ -18,6 +18,9 @@ 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 प्लगइन जोड़ें
|
|
21
24
|
- version: 7.0.0
|
|
22
25
|
date: 2025-10-29
|
|
23
26
|
changes: syncJSON प्लगइन में बदलाव
|
|
@@ -27,19 +30,20 @@ history:
|
|
|
27
30
|
|
|
28
31
|
## Intlayer क्या है?
|
|
29
32
|
|
|
30
|
-
**Intlayer** एक अभिनव, ओपन-सोर्स अंतरराष्ट्रीयकरण लाइब्रेरी है जिसे पारंपरिक i18n समाधानों की कमियों को दूर करने के लिए डिज़ाइन किया गया है। यह React
|
|
33
|
+
**Intlayer** एक अभिनव, ओपन-सोर्स अंतरराष्ट्रीयकरण लाइब्रेरी है जिसे पारंपरिक i18n समाधानों की कमियों को दूर करने के लिए डिज़ाइन किया गया है। यह React अनुप्रयोगों में सामग्री प्रबंधन के लिए एक आधुनिक दृष्टिकोण प्रदान करता है।
|
|
31
34
|
|
|
32
35
|
react-i18next के साथ एक ठोस तुलना के लिए हमारे [react-i18next vs. react-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/hi/react-i18next_vs_react-intl_vs_intlayer.md) ब्लॉग पोस्ट देखें।
|
|
33
36
|
|
|
34
37
|
## Intlayer को react-i18next के साथ क्यों मिलाएं?
|
|
35
38
|
|
|
36
|
-
जबकि Intlayer एक उत्कृष्ट
|
|
39
|
+
जबकि Intlayer एक उत्कृष्ट स्वतंत्र i18n समाधान प्रदान करता है (हमारे [React एकीकरण गाइड](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_with_vite+react.md) देखें), आप इसे कई कारणों से react-i18next के साथ मिलाना चाह सकते हैं:
|
|
37
40
|
|
|
38
|
-
1. **मौजूदा कोडबेस**: आपके पास एक स्थापित react-i18next
|
|
41
|
+
1. **मौजूदा कोडबेस**: आपके पास एक स्थापित react-i18next कार्यान्वयन है और आप धीरे-धीरे Intlayer के बेहतर डेवलपर अनुभव की ओर माइग्रेट करना चाहते हैं।
|
|
39
42
|
2. **पुराने आवश्यकताएँ**: आपके प्रोजेक्ट को मौजूदा react-i18next प्लगइन्स या वर्कफ़्लोज़ के साथ संगतता की आवश्यकता है।
|
|
40
43
|
3. **टीम की परिचितता**: आपकी टीम react-i18next के साथ सहज है लेकिन बेहतर सामग्री प्रबंधन चाहती है।
|
|
44
|
+
4. **Intlayer सुविधाओं का उपयोग**: आप Intlayer की सामग्री घोषणा, अनुवाद स्वचालन, अनुवाद परीक्षण, और अन्य सुविधाओं का उपयोग करना चाहते हैं।
|
|
41
45
|
|
|
42
|
-
**इसके लिए, Intlayer को react-i18next के लिए एक
|
|
46
|
+
**इसके लिए, Intlayer को react-i18next के लिए एक एडेप्टर के रूप में लागू किया जा सकता है ताकि CLI या CI/CD पाइपलाइनों में आपके JSON अनुवादों को स्वचालित करने, आपके अनुवादों का परीक्षण करने, और अधिक में मदद मिल सके।**
|
|
43
47
|
|
|
44
48
|
यह गाइड आपको दिखाता है कि कैसे Intlayer की श्रेष्ठ सामग्री घोषणा प्रणाली का लाभ उठाते हुए react-i18next के साथ संगतता बनाए रखी जाए।
|
|
45
49
|
|
|
@@ -49,7 +53,7 @@ react-i18next के साथ एक ठोस तुलना के लिए
|
|
|
49
53
|
|
|
50
54
|
## react-i18next के साथ Intlayer सेटअप करने के लिए चरण-दर-चरण मार्गदर्शिका
|
|
51
55
|
|
|
52
|
-
### चरण 1:
|
|
56
|
+
### चरण 1: निर्भरताएँ स्थापित करें
|
|
53
57
|
|
|
54
58
|
आवश्यक पैकेज इंस्टॉल करें:
|
|
55
59
|
|
|
@@ -65,6 +69,10 @@ 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
|
**पैकेज विवरण:**
|
|
69
77
|
|
|
70
78
|
- **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
|
};
|
|
@@ -95,17 +103,58 @@ const config: IntlayerConfig = {
|
|
|
95
103
|
export default config;
|
|
96
104
|
```
|
|
97
105
|
|
|
98
|
-
`syncJSON` प्लगइन स्वचालित रूप से JSON को रैप करेगा। यह JSON
|
|
106
|
+
`syncJSON` प्लगइन स्वचालित रूप से JSON को रैप करेगा। यह JSON फ़ाइलों को पढ़ेगा और लिखेगा बिना सामग्री संरचना को बदले।
|
|
99
107
|
|
|
100
|
-
यदि आप
|
|
108
|
+
यदि आप JSON को intlayer सामग्री घोषणा फ़ाइलों (`.content` फ़ाइलें) के साथ सह-अस्तित्व में रखना चाहते हैं, तो Intlayer इस प्रकार कार्य करेगा:
|
|
101
109
|
|
|
102
|
-
1. JSON और सामग्री घोषणा फ़ाइलों दोनों को लोड
|
|
103
|
-
2. यदि JSON और सामग्री घोषणा फ़ाइलों के बीच
|
|
110
|
+
1. JSON और सामग्री घोषणा फ़ाइलों दोनों को लोड करेगा और उन्हें intlayer शब्दकोश में परिवर्तित करेगा।
|
|
111
|
+
2. यदि JSON और सामग्री घोषणा फ़ाइलों के बीच संघर्ष होता है, तो Intlayer उन सभी शब्दकोशों को मर्ज करने की प्रक्रिया करेगा। यह प्लगइन्स की प्राथमिकता और सामग्री घोषणा फ़ाइल की प्राथमिकता पर निर्भर करेगा (सभी कॉन्फ़िगर करने योग्य हैं)।
|
|
104
112
|
|
|
105
|
-
यदि
|
|
113
|
+
यदि JSON का अनुवाद करने के लिए CLI का उपयोग करके या CMS का उपयोग करके परिवर्तन किए जाते हैं, तो Intlayer नई अनुवादों के साथ JSON फ़ाइल को अपडेट करेगा।
|
|
106
114
|
|
|
107
115
|
`syncJSON` प्लगइन के बारे में अधिक विवरण देखने के लिए, कृपया [syncJSON प्लगइन दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/plugins/sync-json.md) देखें।
|
|
108
116
|
|
|
117
|
+
### (वैकल्पिक) चरण 3: प्रति-कंपोनेंट JSON अनुवाद लागू करें
|
|
118
|
+
|
|
119
|
+
डिफ़ॉल्ट रूप से, Intlayer दोनों JSON और सामग्री घोषणा फ़ाइलों को लोड, मर्ज और सिंक्रनाइज़ करेगा। अधिक जानकारी के लिए [सामग्री घोषणा दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/content_file.md) देखें। लेकिन यदि आप चाहें, तो Intlayer प्लगइन का उपयोग करके, आप अपने कोडबेस में कहीं भी स्थानीयकृत JSON के प्रति-कंपोनेंट प्रबंधन को भी लागू कर सकते हैं।
|
|
120
|
+
|
|
121
|
+
इसके लिए, आप `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
|
+
// अपने वर्तमान JSON फ़ाइलों को Intlayer शब्दकोशों के साथ सिंक में रखें
|
|
134
|
+
plugins: [
|
|
135
|
+
/**
|
|
136
|
+
* src में सभी JSON फ़ाइलों को लोड करेगा जो पैटर्न {key}.i18n.json से मेल खाती हैं
|
|
137
|
+
*/
|
|
138
|
+
loadJSON({
|
|
139
|
+
source: ({ key }) => `./src/**/${key}.i18n.json`,
|
|
140
|
+
locale: Locales.ENGLISH,
|
|
141
|
+
priority: 1, // सुनिश्चित करता है कि ये JSON फ़ाइलें `./locales/en/${key}.json` में फ़ाइलों से प्राथमिकता लें
|
|
142
|
+
}),
|
|
143
|
+
/**
|
|
144
|
+
* लोड करेगा, और आउटपुट और अनुवादों को locales डायरेक्टरी में JSON फ़ाइलों में वापस लिखेगा
|
|
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
|
+
यह `src` डायरेक्टरी में सभी JSON फ़ाइलों को लोड करेगा जो पैटर्न `{key}.i18n.json` से मेल खाती हैं और उन्हें Intlayer शब्दकोश के रूप में लोड करेगा।
|
|
157
|
+
|
|
109
158
|
## Git कॉन्फ़िगरेशन
|
|
110
159
|
|
|
111
160
|
स्वचालित रूप से उत्पन्न Intlayer फ़ाइलों को अनदेखा करना अनुशंसित है:
|
|
@@ -119,6 +168,6 @@ export default config;
|
|
|
119
168
|
|
|
120
169
|
### VS कोड एक्सटेंशन
|
|
121
170
|
|
|
122
|
-
बेहतर डेवलपर अनुभव के लिए, आधिकारिक **Intlayer VS
|
|
171
|
+
बेहतर डेवलपर अनुभव के लिए, आधिकारिक **Intlayer VS Code एक्सटेंशन** इंस्टॉल करें:
|
|
123
172
|
|
|
124
|
-
[VS
|
|
173
|
+
[VS Code मार्केटप्लेस से इंस्टॉल करें](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
@@ -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 प्लगइन जोड़ें
|
|
19
22
|
- version: 7.0.0
|
|
20
23
|
date: 2025-10-29
|
|
21
24
|
changes: syncJSON प्लगइन में बदलाव
|
|
@@ -23,6 +26,10 @@ history:
|
|
|
23
26
|
|
|
24
27
|
# Intlayer का उपयोग करके अपने react-intl JSON अनुवादों को स्वचालित कैसे करें
|
|
25
28
|
|
|
29
|
+
## सामग्री तालिका
|
|
30
|
+
|
|
31
|
+
<TOC/>
|
|
32
|
+
|
|
26
33
|
## Intlayer क्या है?
|
|
27
34
|
|
|
28
35
|
**Intlayer** एक अभिनव, ओपन-सोर्स अंतरराष्ट्रीयकरण लाइब्रेरी है जिसे पारंपरिक i18n समाधानों की कमियों को दूर करने के लिए डिज़ाइन किया गया है। यह React एप्लिकेशन में सामग्री प्रबंधन के लिए एक आधुनिक दृष्टिकोण प्रदान करता है।
|
|
@@ -31,23 +38,24 @@ react-intl के साथ एक ठोस तुलना के लिए
|
|
|
31
38
|
|
|
32
39
|
## Intlayer को react-intl के साथ क्यों मिलाएं?
|
|
33
40
|
|
|
34
|
-
जबकि Intlayer एक उत्कृष्ट
|
|
41
|
+
जबकि Intlayer एक उत्कृष्ट स्वतंत्र i18n समाधान प्रदान करता है (हमारे [React एकीकरण गाइड](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_with_vite+react.md) देखें), आप इसे कई कारणों से react-intl के साथ मिलाना चाह सकते हैं:
|
|
35
42
|
|
|
36
|
-
1. **मौजूदा कोडबेस**: आपके पास एक स्थापित react-intl
|
|
37
|
-
2.
|
|
43
|
+
1. **मौजूदा कोडबेस**: आपके पास एक स्थापित react-intl कार्यान्वयन है और आप धीरे-धीरे Intlayer के बेहतर डेवलपर अनुभव की ओर माइग्रेट करना चाहते हैं।
|
|
44
|
+
2. **पुराने आवश्यकताएँ**: आपके प्रोजेक्ट को मौजूदा react-intl प्लगइन्स या वर्कफ़्लोज़ के साथ संगतता की आवश्यकता है।
|
|
38
45
|
3. **टीम की परिचितता**: आपकी टीम react-intl के साथ सहज है लेकिन बेहतर सामग्री प्रबंधन चाहती है।
|
|
46
|
+
4. **Intlayer सुविधाओं का उपयोग**: आप Intlayer की सामग्री घोषणा, अनुवाद स्वचालन, अनुवाद परीक्षण, और अन्य सुविधाओं का उपयोग करना चाहते हैं।
|
|
39
47
|
|
|
40
|
-
**इसके लिए, Intlayer को react-intl के लिए एक
|
|
48
|
+
**इसके लिए, Intlayer को react-intl के लिए एक एडेप्टर के रूप में लागू किया जा सकता है जो CLI या CI/CD पाइपलाइनों में आपके JSON अनुवादों को स्वचालित करने, आपके अनुवादों का परीक्षण करने, और अन्य कार्यों में मदद करता है।**
|
|
41
49
|
|
|
42
50
|
यह गाइड आपको दिखाता है कि कैसे Intlayer की श्रेष्ठ सामग्री घोषणा प्रणाली का लाभ उठाते हुए react-intl के साथ संगतता बनाए रखी जाए।
|
|
43
51
|
|
|
44
|
-
##
|
|
52
|
+
## विषय सूची
|
|
45
53
|
|
|
46
54
|
<TOC/>
|
|
47
55
|
|
|
48
|
-
##
|
|
56
|
+
## react-intl के साथ Intlayer सेटअप करने के लिए चरण-दर-चरण मार्गदर्शिका
|
|
49
57
|
|
|
50
|
-
### चरण 1: निर्भरताएँ
|
|
58
|
+
### चरण 1: निर्भरताएँ स्थापित करें
|
|
51
59
|
|
|
52
60
|
आवश्यक पैकेज इंस्टॉल करें:
|
|
53
61
|
|
|
@@ -63,9 +71,13 @@ 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
|
**पैकेज विवरण:**
|
|
67
79
|
|
|
68
|
-
- **intlayer**: अंतरराष्ट्रीयकरण प्रबंधन, सामग्री घोषणा, और निर्माण के लिए मुख्य
|
|
80
|
+
- **intlayer**: अंतरराष्ट्रीयकरण प्रबंधन, सामग्री घोषणा, और निर्माण के लिए मुख्य पुस्तकालय
|
|
69
81
|
- **@intlayer/sync-json-plugin**: Intlayer सामग्री घोषणाओं को react-intl संगत JSON प्रारूप में निर्यात करने के लिए प्लगइन
|
|
70
82
|
|
|
71
83
|
### चरण 2: JSON को रैप करने के लिए Intlayer प्लगइन लागू करें
|
|
@@ -100,23 +112,64 @@ export default config;
|
|
|
100
112
|
1. JSON और सामग्री घोषणा फ़ाइलों दोनों को लोड करेगा और उन्हें intlayer शब्दकोश में परिवर्तित करेगा।
|
|
101
113
|
2. यदि JSON और सामग्री घोषणा फ़ाइलों के बीच कोई संघर्ष होता है, तो Intlayer उन सभी शब्दकोशों को मर्ज करने की प्रक्रिया करेगा। यह प्लगइन्स की प्राथमिकता और सामग्री घोषणा फ़ाइल की प्राथमिकता पर निर्भर करेगा (सभी कॉन्फ़िगर करने योग्य हैं)।
|
|
102
114
|
|
|
103
|
-
यदि
|
|
115
|
+
यदि CLI का उपयोग करके JSON का अनुवाद किया जाता है, या CMS का उपयोग करके परिवर्तन किए जाते हैं, तो Intlayer नई अनुवादों के साथ JSON फ़ाइल को अपडेट करेगा।
|
|
104
116
|
|
|
105
117
|
`syncJSON` प्लगइन के बारे में अधिक विवरण देखने के लिए, कृपया [syncJSON प्लगइन दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/plugins/sync-json.md) देखें।
|
|
106
118
|
|
|
119
|
+
### (वैकल्पिक) चरण 3: प्रति-कंपोनेंट JSON अनुवाद लागू करें
|
|
120
|
+
|
|
121
|
+
डिफ़ॉल्ट रूप से, Intlayer दोनों JSON और सामग्री घोषणा फ़ाइलों को लोड, मर्ज और सिंक्रनाइज़ करेगा। अधिक जानकारी के लिए [सामग्री घोषणा दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/content_file.md) देखें। लेकिन यदि आप चाहें, तो Intlayer प्लगइन का उपयोग करके, आप अपने कोडबेस में कहीं भी स्थानीयकृत JSON के प्रति-कंपोनेंट प्रबंधन को भी लागू कर सकते हैं।
|
|
122
|
+
|
|
123
|
+
इसके लिए, आप `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
|
+
// अपने वर्तमान JSON फ़ाइलों को Intlayer शब्दकोशों के साथ सिंक्रनाइज़ रखें
|
|
136
|
+
plugins: [
|
|
137
|
+
/**
|
|
138
|
+
* src में सभी JSON फ़ाइलों को लोड करेगा जो पैटर्न {key}.i18n.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 }) => `./messages/${locale}/${key}.json`,
|
|
150
|
+
priority: 0,
|
|
151
|
+
}),
|
|
152
|
+
],
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
export default config;
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
यह `src` निर्देशिका में सभी JSON फ़ाइलों को लोड करेगा जो पैटर्न `{key}.i18n.json` से मेल खाती हैं और उन्हें Intlayer शब्दकोशों के रूप में लोड करेगा।
|
|
159
|
+
|
|
107
160
|
## Git कॉन्फ़िगरेशन
|
|
108
161
|
|
|
109
|
-
स्वचालित रूप से उत्पन्न Intlayer फ़ाइलों को अनदेखा
|
|
162
|
+
स्वचालित रूप से उत्पन्न Intlayer फ़ाइलों को अनदेखा करना अनुशंसित है:
|
|
110
163
|
|
|
111
164
|
```plaintext fileName=".gitignore"
|
|
112
165
|
# Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करें
|
|
113
166
|
.intlayer
|
|
114
167
|
```
|
|
115
168
|
|
|
116
|
-
ये फ़ाइलें आपके
|
|
169
|
+
ये फ़ाइलें आपके निर्माण प्रक्रिया के दौरान पुनः उत्पन्न की जा सकती हैं और इन्हें संस्करण नियंत्रण में कमिट करने की आवश्यकता नहीं है।
|
|
117
170
|
|
|
118
171
|
### VS कोड एक्सटेंशन
|
|
119
172
|
|
|
120
|
-
बेहतर डेवलपर अनुभव के लिए, आधिकारिक **Intlayer VS
|
|
173
|
+
बेहतर डेवलपर अनुभव के लिए, आधिकारिक **Intlayer VS Code एक्सटेंशन** इंस्टॉल करें:
|
|
121
174
|
|
|
122
|
-
[VS
|
|
175
|
+
[VS Code मार्केटप्लेस से इंस्टॉल करें](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2025-08-23
|
|
3
|
+
updatedAt: 2025-10-29
|
|
4
|
+
title: Intlayer और vue-i18n
|
|
5
|
+
description: एक व्यापक Vue.js अंतरराष्ट्रीयकरण समाधान के लिए Intlayer को vue-i18n के साथ एकीकृत करें
|
|
6
|
+
keywords:
|
|
7
|
+
- vue-i18n
|
|
8
|
+
- Intlayer
|
|
9
|
+
- अंतरराष्ट्रीयकरण
|
|
10
|
+
- ब्लॉग
|
|
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: loadJSON प्लगइन जोड़ा गया
|
|
22
|
+
- version: 7.0.0
|
|
23
|
+
date: 2025-10-29
|
|
24
|
+
changes: syncJSON प्लगइन में बदलाव और व्यापक पुनर्लेखन
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
# vue-i18n और Intlayer के साथ Vue.js अंतरराष्ट्रीयकरण (i18n)
|
|
28
|
+
|
|
29
|
+
## सामग्री सूची
|
|
30
|
+
|
|
31
|
+
<TOC/>
|
|
32
|
+
|
|
33
|
+
## Intlayer क्या है?
|
|
34
|
+
|
|
35
|
+
**Intlayer** एक अभिनव, ओपन-सोर्स अंतरराष्ट्रीयकरण लाइब्रेरी है जिसे पारंपरिक i18n समाधानों की कमियों को दूर करने के लिए डिज़ाइन किया गया है। यह Vue.js और Nuxt अनुप्रयोगों में सामग्री प्रबंधन के लिए एक आधुनिक दृष्टिकोण प्रदान करता है।
|
|
36
|
+
|
|
37
|
+
हमारे [vue-i18n बनाम Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/hi/vue-i18n_vs_intlayer.md) ब्लॉग पोस्ट में vue-i18n के साथ एक ठोस तुलना देखें।
|
|
38
|
+
|
|
39
|
+
## Intlayer को vue-i18n के साथ क्यों मिलाएं?
|
|
40
|
+
|
|
41
|
+
जबकि Intlayer एक उत्कृष्ट स्वतंत्र i18n समाधान प्रदान करता है (हमारे [Vue.js एकीकरण गाइड](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_with_vite+vue.md) देखें), आप इसे कई कारणों से vue-i18n के साथ मिलाना चाह सकते हैं:
|
|
42
|
+
|
|
43
|
+
1. **मौजूदा कोडबेस**: आपके पास एक स्थापित vue-i18n कार्यान्वयन है और आप धीरे-धीरे Intlayer के बेहतर डेवलपर अनुभव की ओर माइग्रेट करना चाहते हैं।
|
|
44
|
+
2. **पुराने आवश्यकताएँ**: आपके प्रोजेक्ट को मौजूदा vue-i18n प्लगइन्स या वर्कफ़्लोज़ के साथ संगतता की आवश्यकता है।
|
|
45
|
+
3. **टीम की परिचितता**: आपकी टीम vue-i18n के साथ सहज है लेकिन बेहतर सामग्री प्रबंधन चाहती है।
|
|
46
|
+
4. **Intlayer की विशेषताओं का उपयोग**: आप Intlayer की सामग्री घोषणा, अनुवाद स्वचालन, अनुवाद परीक्षण, और अन्य सुविधाओं का उपयोग करना चाहते हैं।
|
|
47
|
+
|
|
48
|
+
**इसके लिए, Intlayer को vue-i18n के लिए एक एडेप्टर के रूप में लागू किया जा सकता है जो CLI या CI/CD पाइपलाइनों में आपके JSON अनुवादों को स्वचालित करने, आपके अनुवादों का परीक्षण करने, और अधिक में मदद करता है।**
|
|
49
|
+
|
|
50
|
+
यह गाइड आपको दिखाता है कि कैसे Intlayer की श्रेष्ठ सामग्री घोषणा प्रणाली का लाभ उठाते हुए vue-i18n के साथ संगतता बनाए रखी जाए।
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
## vue-i18n के साथ Intlayer सेटअप करने के लिए चरण-दर-चरण मार्गदर्शिका
|
|
55
|
+
|
|
56
|
+
### चरण 1: निर्भरताएँ स्थापित करें
|
|
57
|
+
|
|
58
|
+
अपनी पसंदीदा पैकेज प्रबंधक का उपयोग करके आवश्यक पैकेज इंस्टॉल करें:
|
|
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
|
+
**पैकेज व्याख्याएँ:**
|
|
77
|
+
|
|
78
|
+
- **intlayer**: सामग्री घोषणा और प्रबंधन के लिए मुख्य पुस्तकालय
|
|
79
|
+
- **@intlayer/sync-json-plugin**: Intlayer सामग्री घोषणाओं को vue-i18n JSON प्रारूप के साथ सिंक करने के लिए प्लगइन
|
|
80
|
+
|
|
81
|
+
### चरण 2: JSON को रैप करने के लिए Intlayer प्लगइन लागू करें
|
|
82
|
+
|
|
83
|
+
अपने समर्थित लोकल्स को परिभाषित करने के लिए एक Intlayer कॉन्फ़िगरेशन फ़ाइल बनाएं:
|
|
84
|
+
|
|
85
|
+
**यदि आप vue-i18n के लिए JSON शब्दकोश भी निर्यात करना चाहते हैं**, तो `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
|
+
`syncJSON` प्लगइन स्वचालित रूप से JSON को रैप करेगा। यह JSON फ़ाइलों को पढ़ेगा और लिखेगा बिना सामग्री संरचना को बदले।
|
|
107
|
+
|
|
108
|
+
यदि आप उस JSON को intlayer सामग्री घोषणा फ़ाइलों (`.content` फ़ाइलें) के साथ सह-अस्तित्व में रखना चाहते हैं, तो Intlayer इस प्रकार आगे बढ़ेगा:
|
|
109
|
+
|
|
110
|
+
1. JSON और सामग्री घोषणा फ़ाइलों दोनों को लोड करेगा और उन्हें intlayer शब्दकोश में परिवर्तित करेगा।
|
|
111
|
+
2. यदि JSON और सामग्री घोषणा फ़ाइलों के बीच संघर्ष होता है, तो Intlayer उन सभी शब्दकोशों को मर्ज करने की प्रक्रिया करेगा। यह प्लगइन्स की प्राथमिकता और सामग्री घोषणा फ़ाइल की प्राथमिकता पर निर्भर करेगा (सभी कॉन्फ़िगर करने योग्य हैं)।
|
|
112
|
+
|
|
113
|
+
यदि CLI का उपयोग करके JSON का अनुवाद करने के लिए परिवर्तन किए जाते हैं, या CMS का उपयोग किया जाता है, तो Intlayer नई अनुवादों के साथ JSON फ़ाइल को अपडेट करेगा।
|
|
114
|
+
|
|
115
|
+
`syncJSON` प्लगइन के बारे में अधिक विवरण देखने के लिए, कृपया [syncJSON प्लगइन दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/plugins/sync-json.md) देखें।
|
|
116
|
+
|
|
117
|
+
---
|
|
118
|
+
|
|
119
|
+
### (वैकल्पिक) चरण 3: प्रति-कंपोनेंट JSON अनुवाद लागू करें
|
|
120
|
+
|
|
121
|
+
डिफ़ॉल्ट रूप से, Intlayer दोनों JSON और सामग्री घोषणा फ़ाइलों को लोड, मर्ज और सिंक्रनाइज़ करेगा। अधिक विवरण के लिए [सामग्री घोषणा दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/content_file.md) देखें। लेकिन यदि आप चाहें, तो Intlayer प्लगइन का उपयोग करके, आप अपने कोडबेस में कहीं भी स्थानीयकृत JSON के प्रति-कंपोनेंट प्रबंधन को भी लागू कर सकते हैं।
|
|
122
|
+
|
|
123
|
+
इसके लिए, आप `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
|
+
// अपने वर्तमान JSON फ़ाइलों को Intlayer शब्दकोशों के साथ सिंक्रनाइज़ रखें
|
|
136
|
+
plugins: [
|
|
137
|
+
/**
|
|
138
|
+
* src में सभी JSON फ़ाइलों को लोड करेगा जो पैटर्न {key}.i18n.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 }) => `./src/locales/${locale}/${key}.json`,
|
|
150
|
+
priority: 0,
|
|
151
|
+
}),
|
|
152
|
+
],
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
export default config;
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
यह `src` निर्देशिका में सभी JSON फ़ाइलों को लोड करेगा जो पैटर्न `{key}.i18n.json` से मेल खाती हैं और उन्हें Intlayer शब्दकोशों के रूप में लोड करेगा।
|
|
159
|
+
|
|
160
|
+
---
|
|
161
|
+
|
|
162
|
+
## Git कॉन्फ़िगरेशन
|
|
163
|
+
|
|
164
|
+
जनरेट की गई फ़ाइलों को संस्करण नियंत्रण से बाहर करें:
|
|
165
|
+
|
|
166
|
+
```plaintext fileName=".gitignore"
|
|
167
|
+
# Intlayer द्वारा जनरेट की गई फ़ाइलों को अनदेखा करें
|
|
168
|
+
.intlayer
|
|
169
|
+
intl
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
ये फ़ाइलें बिल्ड प्रक्रिया के दौरान स्वचालित रूप से पुनः उत्पन्न होती हैं और इन्हें आपके रिपॉजिटरी में कमिट करने की आवश्यकता नहीं है।
|
|
173
|
+
|
|
174
|
+
### VS कोड एक्सटेंशन
|
|
175
|
+
|
|
176
|
+
बेहतर डेवलपर अनुभव के लिए, आधिकारिक **Intlayer VS Code एक्सटेंशन** इंस्टॉल करें:
|
|
177
|
+
|
|
178
|
+
[VS Code मार्केटप्लेस से इंस्टॉल करें](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
179
|
+
|
|
180
|
+
[VS कोड मार्केटप्लेस से इंस्टॉल करें](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2024-12-24
|
|
3
|
-
updatedAt: 2025-
|
|
3
|
+
updatedAt: 2025-11-01
|
|
4
4
|
title: Cara mengotomatisasi terjemahan JSON i18next Anda menggunakan Intlayer
|
|
5
|
-
description: Otomatiskan terjemahan JSON Anda dengan Intlayer dan i18next untuk
|
|
5
|
+
description: Otomatiskan terjemahan JSON Anda dengan Intlayer dan i18next untuk meningkatkan internasionalisasi dalam aplikasi JavaScript.
|
|
6
6
|
keywords:
|
|
7
7
|
- Intlayer
|
|
8
8
|
- i18next
|
|
@@ -20,9 +20,12 @@ slugs:
|
|
|
20
20
|
- blog
|
|
21
21
|
- intlayer-with-i18next
|
|
22
22
|
history:
|
|
23
|
+
- version: 7.0.6
|
|
24
|
+
date: 2025-11-01
|
|
25
|
+
changes: Menambahkan plugin loadJSON
|
|
23
26
|
- version: 7.0.0
|
|
24
27
|
date: 2025-10-29
|
|
25
|
-
changes:
|
|
28
|
+
changes: Berubah ke plugin syncJSON
|
|
26
29
|
---
|
|
27
30
|
|
|
28
31
|
# Cara mengotomatisasi terjemahan JSON i18next Anda menggunakan Intlayer
|
|
@@ -35,13 +38,14 @@ Lihat perbandingan konkret dengan i18next dalam posting blog kami [next-i18next
|
|
|
35
38
|
|
|
36
39
|
## Mengapa Menggabungkan Intlayer dengan i18next?
|
|
37
40
|
|
|
38
|
-
Meskipun Intlayer menyediakan solusi i18n mandiri yang sangat baik (lihat [panduan integrasi Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_nextjs_16.md)), Anda mungkin ingin menggabungkannya dengan i18next karena beberapa alasan:
|
|
41
|
+
Meskipun Intlayer menyediakan solusi i18n mandiri yang sangat baik (lihat [panduan integrasi Next.js kami](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_nextjs_16.md)), Anda mungkin ingin menggabungkannya dengan i18next karena beberapa alasan:
|
|
39
42
|
|
|
40
43
|
1. **Basis kode yang sudah ada**: Anda memiliki implementasi i18next yang sudah mapan dan ingin secara bertahap bermigrasi ke pengalaman pengembang Intlayer yang lebih baik.
|
|
41
44
|
2. **Persyaratan warisan**: Proyek Anda memerlukan kompatibilitas dengan plugin atau alur kerja i18next yang sudah ada.
|
|
42
45
|
3. **Kenyamanan tim**: Tim Anda sudah terbiasa dengan i18next tetapi menginginkan manajemen konten yang lebih baik.
|
|
46
|
+
4. **Menggunakan fitur Intlayer**: Anda ingin menggunakan fitur Intlayer seperti deklarasi konten, manajemen kunci terjemahan, status terjemahan, dan lainnya.
|
|
43
47
|
|
|
44
|
-
**Untuk itu, Intlayer dapat diimplementasikan sebagai adaptor untuk i18next guna membantu mengotomatisasi terjemahan JSON Anda
|
|
48
|
+
**Untuk itu, Intlayer dapat diimplementasikan sebagai adaptor untuk i18next guna membantu mengotomatisasi terjemahan JSON Anda di CLI atau pipeline CI/CD, menguji terjemahan Anda, dan lainnya.**
|
|
45
49
|
|
|
46
50
|
Panduan ini menunjukkan cara memanfaatkan sistem deklarasi konten Intlayer yang unggul sambil mempertahankan kompatibilitas dengan i18next.
|
|
47
51
|
|
|
@@ -53,7 +57,7 @@ Panduan ini menunjukkan cara memanfaatkan sistem deklarasi konten Intlayer yang
|
|
|
53
57
|
|
|
54
58
|
### Langkah 1: Instalasi Dependensi
|
|
55
59
|
|
|
56
|
-
|
|
60
|
+
Instal paket-paket yang diperlukan:
|
|
57
61
|
|
|
58
62
|
```bash packageManager="npm"
|
|
59
63
|
npm install intlayer @intlayer/sync-json-plugin
|
|
@@ -67,12 +71,16 @@ 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
|
**Deskripsi paket:**
|
|
71
79
|
|
|
72
80
|
- **intlayer**: Perpustakaan inti untuk manajemen internasionalisasi, deklarasi konten, dan pembangunan
|
|
73
81
|
- **@intlayer/sync-json-plugin**: Plugin untuk mengekspor deklarasi konten Intlayer ke format JSON yang kompatibel dengan i18next
|
|
74
82
|
|
|
75
|
-
### Langkah 2:
|
|
83
|
+
### Langkah 2: Terapkan plugin Intlayer untuk membungkus JSON
|
|
76
84
|
|
|
77
85
|
Buat file konfigurasi Intlayer untuk mendefinisikan locale yang didukung:
|
|
78
86
|
|
|
@@ -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,15 +105,60 @@ const config: IntlayerConfig = {
|
|
|
97
105
|
export default config;
|
|
98
106
|
```
|
|
99
107
|
|
|
100
|
-
Plugin `syncJSON` akan secara otomatis membungkus JSON. Plugin ini akan membaca dan menulis file JSON tanpa mengubah arsitektur
|
|
108
|
+
Plugin `syncJSON` akan secara otomatis membungkus JSON. Plugin ini akan membaca dan menulis file JSON tanpa mengubah arsitektur konten.
|
|
101
109
|
|
|
102
|
-
Jika Anda ingin membuat JSON tersebut
|
|
110
|
+
Jika Anda ingin membuat JSON tersebut berdampingan dengan file deklarasi konten intlayer (`.content` files), Intlayer akan memprosesnya dengan cara berikut:
|
|
103
111
|
|
|
104
112
|
1. memuat baik file JSON maupun file deklarasi konten dan mengubahnya menjadi kamus intlayer.
|
|
105
|
-
2. jika terdapat konflik antara JSON dan file deklarasi konten, Intlayer akan
|
|
113
|
+
2. jika terdapat konflik antara file JSON dan file deklarasi konten, Intlayer akan melakukan penggabungan dari semua kamus tersebut. Bergantung pada prioritas plugin, dan prioritas file deklarasi konten (semua dapat dikonfigurasi).
|
|
106
114
|
|
|
107
115
|
Jika perubahan dilakukan menggunakan CLI untuk menerjemahkan JSON, atau menggunakan CMS, Intlayer akan memperbarui file JSON dengan terjemahan baru.
|
|
108
116
|
|
|
117
|
+
Untuk melihat lebih detail tentang plugin `syncJSON`, silakan merujuk ke [dokumentasi plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/plugins/sync-json.md).
|
|
118
|
+
|
|
119
|
+
### (Opsional) Langkah 3: Implementasikan terjemahan JSON per-komponen
|
|
120
|
+
|
|
121
|
+
Secara default, Intlayer akan memuat, menggabungkan, dan menyinkronkan baik file JSON maupun file deklarasi konten. Lihat [dokumentasi deklarasi konten](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/content_file.md) untuk informasi lebih lanjut. Namun jika Anda lebih suka, menggunakan plugin Intlayer, Anda juga dapat mengimplementasikan pengelolaan JSON terlokalisasi per-komponen di mana saja dalam basis kode Anda.
|
|
122
|
+
|
|
123
|
+
Untuk itu, Anda dapat menggunakan 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
|
+
// Menjaga file JSON Anda saat ini tetap sinkron dengan kamus Intlayer
|
|
136
|
+
plugins: [
|
|
137
|
+
/**
|
|
138
|
+
* Akan memuat semua file JSON di src yang cocok dengan pola {key}.i18n.json
|
|
139
|
+
*/
|
|
140
|
+
loadJSON({
|
|
141
|
+
source: ({ key }) => `./src/**/${key}.i18n.json`,
|
|
142
|
+
locale: Locales.ENGLISH,
|
|
143
|
+
priority: 1, // Memastikan file JSON ini memiliki prioritas lebih tinggi daripada file di `./locales/en/${key}.json`
|
|
144
|
+
}),
|
|
145
|
+
/**
|
|
146
|
+
* Akan memuat, dan menulis output serta terjemahan kembali ke file JSON di direktori locales
|
|
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
|
+
Ini akan memuat semua file JSON di direktori `src` yang cocok dengan pola `{key}.i18n.json` dan memuatnya sebagai kamus Intlayer.
|
|
159
|
+
|
|
160
|
+
---
|
|
161
|
+
|
|
109
162
|
## Konfigurasi Git
|
|
110
163
|
|
|
111
164
|
Disarankan untuk mengabaikan file Intlayer yang dihasilkan secara otomatis:
|
|
@@ -115,12 +168,10 @@ Disarankan untuk mengabaikan file Intlayer yang dihasilkan secara otomatis:
|
|
|
115
168
|
.intlayer
|
|
116
169
|
```
|
|
117
170
|
|
|
118
|
-
File-file ini dapat
|
|
171
|
+
File-file ini dapat dibuat ulang selama proses build Anda dan tidak perlu dikomit ke kontrol versi.
|
|
119
172
|
|
|
120
173
|
### Ekstensi VS Code
|
|
121
174
|
|
|
122
175
|
Untuk pengalaman pengembang yang lebih baik, pasang **Ekstensi VS Code Intlayer** resmi:
|
|
123
176
|
|
|
124
177
|
[Pasang dari VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
125
|
-
|
|
126
|
-
[Pasang dari VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|