@intlayer/docs 9.3.1 → 9.3.3
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/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/de/nextjs-multilingual-seo-comparison.md +9 -9
- package/blog/en/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/en-GB/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/es/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/fr/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/hi/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/id/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/it/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/ja/nextjs-multilingual-seo-comparison.md +9 -9
- package/blog/ko/nextjs-multilingual-seo-comparison.md +9 -9
- package/blog/pl/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/pt/nextjs-multilingual-seo-comparison.md +9 -9
- package/blog/ru/nextjs-multilingual-seo-comparison.md +9 -9
- package/blog/tr/nextjs-multilingual-seo-comparison.md +9 -9
- package/blog/uk/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/vi/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/zh/nextjs-multilingual-seo-comparison.md +10 -10
- package/dist/cjs/generated/docs.entry.cjs +20 -0
- package/dist/cjs/generated/docs.entry.cjs.map +1 -1
- package/dist/esm/generated/docs.entry.mjs +20 -0
- package/dist/esm/generated/docs.entry.mjs.map +1 -1
- package/dist/types/generated/docs.entry.d.ts +1 -0
- package/dist/types/generated/docs.entry.d.ts.map +1 -1
- package/docs/ar/bundle_optimization.md +1 -1
- package/docs/ar/configuration.md +32 -9
- package/docs/ar/dictionary/content_file.md +0 -22
- package/docs/ar/dictionary/function_fetching.md +23 -0
- package/docs/ar/eslint.md +336 -0
- package/docs/ar/intlayer_with_react_router_v7_fs_routes.md +1 -1
- package/docs/bn/configuration.md +34 -9
- package/docs/bn/eslint.md +336 -0
- package/docs/cs/bundle_optimization.md +1 -1
- package/docs/cs/configuration.md +33 -9
- package/docs/cs/eslint.md +336 -0
- package/docs/de/bundle_optimization.md +1 -1
- package/docs/de/configuration.md +34 -9
- package/docs/de/dictionary/content_file.md +0 -22
- package/docs/de/dictionary/function_fetching.md +23 -0
- package/docs/de/eslint.md +336 -0
- package/docs/en/bundle_optimization.md +1 -1
- package/docs/en/configuration.md +34 -9
- package/docs/en/dictionary/content_file.md +0 -22
- package/docs/en/dictionary/function_fetching.md +23 -0
- package/docs/en/eslint.md +336 -0
- package/docs/en/packages/intlayer/getLocalizedPath.md +70 -19
- package/docs/en-GB/configuration.md +33 -9
- package/docs/en-GB/dictionary/content_file.md +0 -22
- package/docs/en-GB/dictionary/function_fetching.md +23 -0
- package/docs/en-GB/eslint.md +336 -0
- package/docs/en-GB/intlayer_with_create_react_app.md +32 -35
- package/docs/en-GB/intlayer_with_react_router_v7_fs_routes.md +1 -1
- package/docs/es/bundle_optimization.md +1 -1
- package/docs/es/configuration.md +35 -9
- package/docs/es/dictionary/content_file.md +0 -22
- package/docs/es/dictionary/function_fetching.md +23 -0
- package/docs/es/eslint.md +336 -0
- package/docs/fr/bundle_optimization.md +1 -1
- package/docs/fr/configuration.md +35 -9
- package/docs/fr/dictionary/content_file.md +0 -22
- package/docs/fr/dictionary/function_fetching.md +23 -0
- package/docs/fr/eslint.md +336 -0
- package/docs/hi/configuration.md +35 -9
- package/docs/hi/dictionary/content_file.md +0 -22
- package/docs/hi/dictionary/function_fetching.md +23 -0
- package/docs/hi/eslint.md +336 -0
- package/docs/hi/intlayer_with_react_router_v7_fs_routes.md +1 -1
- package/docs/hi/intlayer_with_vite+svelte.md +2 -2
- package/docs/id/configuration.md +35 -9
- package/docs/id/dictionary/content_file.md +0 -22
- package/docs/id/dictionary/function_fetching.md +23 -0
- package/docs/id/eslint.md +336 -0
- package/docs/it/bundle_optimization.md +1 -1
- package/docs/it/configuration.md +35 -9
- package/docs/it/dictionary/content_file.md +0 -22
- package/docs/it/dictionary/function_fetching.md +23 -0
- package/docs/it/eslint.md +336 -0
- package/docs/ja/configuration.md +30 -9
- package/docs/ja/dictionary/content_file.md +0 -22
- package/docs/ja/dictionary/function_fetching.md +23 -0
- package/docs/ja/eslint.md +336 -0
- package/docs/ja/intlayer_with_react_router_v7.md +1 -146
- package/docs/ja/intlayer_with_vite+react.md +5 -1
- package/docs/ko/configuration.md +31 -9
- package/docs/ko/dictionary/content_file.md +0 -22
- package/docs/ko/dictionary/function_fetching.md +23 -0
- package/docs/ko/eslint.md +336 -0
- package/docs/ko/intlayer_with_lynx+react.md +4 -0
- package/docs/ko/intlayer_with_react_router_v7_fs_routes.md +1 -1
- package/docs/ko/intlayer_with_storybook.md +5 -5
- package/docs/nl/configuration.md +33 -9
- package/docs/nl/eslint.md +336 -0
- package/docs/pl/bundle_optimization.md +1 -1
- package/docs/pl/configuration.md +34 -9
- package/docs/pl/dictionary/content_file.md +0 -22
- package/docs/pl/dictionary/function_fetching.md +23 -0
- package/docs/pl/eslint.md +336 -0
- package/docs/pl/intlayer_with_astro.md +1 -114
- package/docs/pl/migration_from_i18next_to_intlayer.md +4 -0
- package/docs/pl/migration_from_next-i18next_to_intlayer.md +8 -4
- package/docs/pl/migration_from_next-intl_to_intlayer.md +11 -5
- package/docs/pl/migration_from_nuxtjs_i18n_to_intlayer.md +8 -4
- package/docs/pl/migration_from_react-i18next_to_intlayer.md +8 -4
- package/docs/pl/migration_from_vue-i18n_to_intlayer.md +4 -0
- package/docs/pt/bundle_optimization.md +1 -1
- package/docs/pt/configuration.md +34 -9
- package/docs/pt/dictionary/content_file.md +0 -22
- package/docs/pt/dictionary/function_fetching.md +23 -0
- package/docs/pt/eslint.md +336 -0
- package/docs/pt/intlayer_with_astro.md +1 -114
- package/docs/ru/bundle_optimization.md +1 -1
- package/docs/ru/configuration.md +34 -9
- package/docs/ru/dictionary/content_file.md +0 -22
- package/docs/ru/dictionary/function_fetching.md +23 -0
- package/docs/ru/eslint.md +336 -0
- package/docs/tr/bundle_optimization.md +1 -1
- package/docs/tr/configuration.md +33 -9
- package/docs/tr/dictionary/content_file.md +0 -22
- package/docs/tr/dictionary/function_fetching.md +23 -0
- package/docs/tr/eslint.md +336 -0
- package/docs/uk/configuration.md +35 -9
- package/docs/uk/dictionary/content_file.md +0 -22
- package/docs/uk/dictionary/function_fetching.md +23 -0
- package/docs/uk/eslint.md +336 -0
- package/docs/uk/packages/angular-intlayer/exports.md +2 -2
- package/docs/ur/configuration.md +35 -9
- package/docs/ur/eslint.md +336 -0
- package/docs/vi/bundle_optimization.md +1 -1
- package/docs/vi/configuration.md +33 -9
- package/docs/vi/dictionary/content_file.md +0 -22
- package/docs/vi/dictionary/function_fetching.md +23 -0
- package/docs/vi/eslint.md +336 -0
- package/docs/zh/bundle_optimization.md +1 -1
- package/docs/zh/configuration.md +29 -9
- package/docs/zh/dictionary/content_file.md +0 -22
- package/docs/zh/dictionary/function_fetching.md +23 -0
- package/docs/zh/eslint.md +336 -0
- package/docs/zh/intlayer_with_create_react_app.md +4 -0
- package/docs/zh/intlayer_with_lynx+react.md +4 -0
- package/docs/zh/intlayer_with_nextjs_14.md +0 -2
- package/docs/zh/intlayer_with_nextjs_15.md +0 -2
- package/docs/zh/intlayer_with_nextjs_page_router.md +0 -2
- package/docs/zh/intlayer_with_nuxt.md +1 -1
- package/docs/zh/intlayer_with_react_router_v7.md +4 -0
- package/docs/zh/intlayer_with_react_router_v7_fs_routes.md +4 -0
- package/docs/zh/intlayer_with_solid_start.md +1 -1
- package/docs/zh/intlayer_with_vite+vue.md +0 -2
- package/docs/zh-TW/bundle_optimization.md +1 -1
- package/docs/zh-TW/eslint.md +336 -0
- package/package.json +7 -7
- package/src/generated/docs.entry.ts +20 -0
|
@@ -0,0 +1,336 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2026-08-12
|
|
3
|
+
updatedAt: 2026-08-13
|
|
4
|
+
title: ESLint プラグイン | Intlayer 用 Lint ルール
|
|
5
|
+
description: eslint-plugin-intlayer を使用して、ハードコードされた文字列、Intlayer コンパイラが最適化できない動的呼び出し、未使用の辞書コンテンツを検出します。React、Vue、Svelte、Angular、Astro に対応し、ESLint および oxlint で動作します。
|
|
6
|
+
keywords:
|
|
7
|
+
- Intlayer
|
|
8
|
+
- ESLint
|
|
9
|
+
- oxlint
|
|
10
|
+
- リント
|
|
11
|
+
- i18n
|
|
12
|
+
- 国際化
|
|
13
|
+
- no-raw-text
|
|
14
|
+
- ハードコードされた文字列
|
|
15
|
+
- 未使用の翻訳
|
|
16
|
+
- デッドコンテンツ
|
|
17
|
+
- React
|
|
18
|
+
- Vue
|
|
19
|
+
- Svelte
|
|
20
|
+
- Angular
|
|
21
|
+
slugs:
|
|
22
|
+
- doc
|
|
23
|
+
- eslint
|
|
24
|
+
history:
|
|
25
|
+
- version: 9.3.1
|
|
26
|
+
date: 2026-08-12
|
|
27
|
+
changes: "初期履歴"
|
|
28
|
+
author: aymericzip
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
# ESLint x OXLint プラグイン
|
|
32
|
+
|
|
33
|
+
`eslint-plugin-intlayer` は、TypeScript では捕捉できない i18n の間違いを検出します:
|
|
34
|
+
|
|
35
|
+
1. 辞書に登録されていない**ハードコードされたテキスト**。
|
|
36
|
+
2. 型チェックを通過して実行できるものの、Intlayer コンパイラが最適化できない**動的な呼び出し**。
|
|
37
|
+
3. **デッドコンテンツ** — プロジェクト内のどこからも読み取られていない辞書やフィールド(オプトイン)。
|
|
38
|
+
|
|
39
|
+
不明な辞書キー、不明なフィールドパス、欠落しているロケールは既にコンパイルエラーとなるため、プラグインはそれらを重複して指摘しません。
|
|
40
|
+
|
|
41
|
+
## インストール
|
|
42
|
+
|
|
43
|
+
```bash packageManager="npm"
|
|
44
|
+
npm install --save-dev eslint-plugin-intlayer
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
```bash packageManager="pnpm"
|
|
48
|
+
pnpm add --save-dev eslint-plugin-intlayer
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
```bash packageManager="yarn"
|
|
52
|
+
yarn add --dev eslint-plugin-intlayer
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
ESLint 9 以降(Flat Config)が必要です。ESLint 10 に対応しています。
|
|
56
|
+
|
|
57
|
+
## 使い方
|
|
58
|
+
|
|
59
|
+
このプラグインは ESLint と [oxlint](https://oxc.rs) の両方で動作します — 同じルール、同じオプションです。
|
|
60
|
+
|
|
61
|
+
<Tabs defaultTab="eslint">
|
|
62
|
+
<Tab label="ESLint" value="eslint">
|
|
63
|
+
|
|
64
|
+
```javascript fileName="eslint.config.mjs"
|
|
65
|
+
import intlayer from "eslint-plugin-intlayer";
|
|
66
|
+
|
|
67
|
+
export default [...intlayer.configs.recommended];
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
または設定を展開し、重大度を自分で指定します:
|
|
71
|
+
|
|
72
|
+
```javascript fileName="eslint.config.mjs"
|
|
73
|
+
import intlayer from "eslint-plugin-intlayer";
|
|
74
|
+
|
|
75
|
+
export default [
|
|
76
|
+
...intlayer.configs.recommended,
|
|
77
|
+
{
|
|
78
|
+
rules: {
|
|
79
|
+
"intlayer/no-raw-text": "warn",
|
|
80
|
+
"intlayer/static-dictionary-key": "error",
|
|
81
|
+
"intlayer/no-dynamic-field-access": "error",
|
|
82
|
+
"intlayer/enforce-adapter-import": "warn",
|
|
83
|
+
"intlayer/no-unused-content": "warn",
|
|
84
|
+
},
|
|
85
|
+
},
|
|
86
|
+
];
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
</Tab>
|
|
90
|
+
<Tab label="oxlint" value="oxlint">
|
|
91
|
+
|
|
92
|
+
```json fileName=".oxlintrc.json"
|
|
93
|
+
{
|
|
94
|
+
"jsPlugins": ["eslint-plugin-intlayer"],
|
|
95
|
+
"rules": {
|
|
96
|
+
"intlayer/no-raw-text": "warn",
|
|
97
|
+
"intlayer/static-dictionary-key": "error",
|
|
98
|
+
"intlayer/no-dynamic-field-access": "error",
|
|
99
|
+
"intlayer/enforce-adapter-import": "warn"
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
注意点が2つあります: oxlint の JS プラグインサポートはまだアルファ版であり、カスタムパーサーをサポートしていません。そのため、`.vue`、`.svelte`、`.astro` および Angular テンプレートはそこではリントされません。JS/TS/JSX ファイルには oxlint を実行し、それ以外には ESLint を維持してください。
|
|
105
|
+
|
|
106
|
+
`no-unused-content` は上記で意図的に除外されています: ルールコンテキストから作業ディレクトリとリント対象ファイルのパスが必要ですが、アルファ版の JS プラグインブリッジではこれが保証されません。ESLint 配下で実行してください。
|
|
107
|
+
|
|
108
|
+
</Tab>
|
|
109
|
+
</Tabs>
|
|
110
|
+
|
|
111
|
+
### プリセット設定
|
|
112
|
+
|
|
113
|
+
| 設定 | `no-raw-text` | `static-dictionary-key` | `no-dynamic-field-access` | `enforce-adapter-import` | `no-unused-content` |
|
|
114
|
+
| --------------- | ----------------------- | ----------------------- | ------------------------- | ------------------------ | ------------------- |
|
|
115
|
+
| `recommended` | warn | error | error | off | off |
|
|
116
|
+
| `strict` | error (+ 非JSXリテラル) | error | error | error | off |
|
|
117
|
+
| `contract-only` | off | error | error | off | off |
|
|
118
|
+
|
|
119
|
+
`recommended` では意図的に `no-raw-text` を `warn` に設定しています: 既存のコードベースに適用した際にすべての未翻訳文字列が一斉に検出され、初日からビルドが失敗するのを防ぐためです。
|
|
120
|
+
|
|
121
|
+
`enforce-adapter-import` はデフォルトでオフになっています — 必要な場合は明示的に有効にしてください。
|
|
122
|
+
|
|
123
|
+
`no-unused-content` は `strict` を含むすべての設定でオフになっています。これは Intlayer 設定を読み込んでディスクからソースファイルを走査する唯一のルールであるため、プリセットによって自動で有効化されるのではなく、意図的な選択として有効化するべきです。
|
|
124
|
+
|
|
125
|
+
## ルール
|
|
126
|
+
|
|
127
|
+
### `no-raw-text`
|
|
128
|
+
|
|
129
|
+
辞書で宣言されていないユーザー向けテキストを報告します。`intlayer extract` と同じ検出ロジックを使用するため、ブランド名、CSS クラス、技術的識別子は無視されます。
|
|
130
|
+
|
|
131
|
+
```jsx
|
|
132
|
+
// ✗ 報告される
|
|
133
|
+
<h1>Welcome to our documentation</h1>
|
|
134
|
+
<input placeholder="Enter your email address" />
|
|
135
|
+
|
|
136
|
+
// ✓ 正常
|
|
137
|
+
const { title } = useIntlayer("home");
|
|
138
|
+
<h1>{title}</h1>
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
コンテンツ宣言ファイル(`*.content.ts` など)はスキップされます。
|
|
142
|
+
|
|
143
|
+
ファイル全体を一度に修正するには、`npx intlayer extract` を実行して、コンパイラに文字列を辞書へ移動させてください。
|
|
144
|
+
|
|
145
|
+
**オプション**
|
|
146
|
+
|
|
147
|
+
```javascript fileName="eslint.config.mjs"
|
|
148
|
+
{
|
|
149
|
+
"intlayer/no-raw-text": [
|
|
150
|
+
"warn",
|
|
151
|
+
{
|
|
152
|
+
// 値がユーザー向けテキストである属性
|
|
153
|
+
// デフォルト: title, placeholder, alt, aria-label, label
|
|
154
|
+
attributes: ["title", "placeholder", "alt", "aria-label", "label"],
|
|
155
|
+
|
|
156
|
+
// コンテンツがユーザー向けテキストではない要素
|
|
157
|
+
// デフォルト: code, pre, script, style
|
|
158
|
+
ignoreElements: ["code", "pre", "script", "style"],
|
|
159
|
+
|
|
160
|
+
// 報告対象外とするテキストの正規表現
|
|
161
|
+
ignorePatterns: ["^Powered by"],
|
|
162
|
+
|
|
163
|
+
// マークアップ外の文字列リテラルも報告するかどうか。デフォルト: false
|
|
164
|
+
includeStringLiterals: false,
|
|
165
|
+
},
|
|
166
|
+
],
|
|
167
|
+
}
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
### `static-dictionary-key`
|
|
171
|
+
|
|
172
|
+
辞書キーが文字列リテラルであることを要求します。
|
|
173
|
+
|
|
174
|
+
コンパイラは呼び出し箇所でキーを直接読み取れる場合にのみ辞書を事前読み込みできます。計算されたキーを使用すると最適化が暗黙的にスキップされ、代わりにすべての辞書がバンドルされます。
|
|
175
|
+
|
|
176
|
+
```typescript
|
|
177
|
+
// ✗ 報告される
|
|
178
|
+
useIntlayer(dictionaryKey);
|
|
179
|
+
useIntlayer(`home-${suffix}`);
|
|
180
|
+
getTranslations({ namespace: page });
|
|
181
|
+
|
|
182
|
+
// ✗ 変数はリテラルではありません
|
|
183
|
+
const key = "home";
|
|
184
|
+
useIntlayer(key);
|
|
185
|
+
|
|
186
|
+
// ✓ 正常
|
|
187
|
+
useIntlayer("home");
|
|
188
|
+
getTranslations({ namespace: "home" });
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
これは `useIntlayer`、`getIntlayer` およびすべての互換アダプター(`useTranslation`、`useTranslations`、`formatMessage`、`<FormattedMessage id>`、`<Trans i18nKey>` など)に適用されます。
|
|
192
|
+
|
|
193
|
+
### `no-dynamic-field-access`
|
|
194
|
+
|
|
195
|
+
辞書から読み取るフィールドが静的に判明していることを要求します。
|
|
196
|
+
|
|
197
|
+
コンパイラは使用されていることが確認できないフィールドを削除します。動的なアクセスはコンパイラから見えないため、実行時に読み取りが `undefined` を返す可能性があります。
|
|
198
|
+
|
|
199
|
+
```typescript
|
|
200
|
+
// ✗ 報告される
|
|
201
|
+
const content = useIntlayer("home");
|
|
202
|
+
content[fieldName];
|
|
203
|
+
|
|
204
|
+
const t = useTranslations("home");
|
|
205
|
+
t(messageKey);
|
|
206
|
+
|
|
207
|
+
// ✓ 正常
|
|
208
|
+
content.title;
|
|
209
|
+
content["title"];
|
|
210
|
+
content.items[0];
|
|
211
|
+
t("hero.title");
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
### `enforce-adapter-import`
|
|
215
|
+
|
|
216
|
+
元のパッケージよりも `@intlayer/*` 互換アダプターを優先します。元のパッケージはバンドラーのエイリアスが設定されている場合にのみ Intlayer に解決されますが、アダプターは常に解決されます。`--fix` で自動修正可能です。
|
|
217
|
+
|
|
218
|
+
```typescript
|
|
219
|
+
// ✗ 報告される
|
|
220
|
+
import { useTranslation } from "react-i18next";
|
|
221
|
+
import { getTranslations } from "next-intl/server";
|
|
222
|
+
|
|
223
|
+
// ✓ 正常
|
|
224
|
+
import { useTranslation } from "@intlayer/react-i18next";
|
|
225
|
+
import { getTranslations } from "@intlayer/next-intl/server";
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
### `no-unused-content`
|
|
229
|
+
|
|
230
|
+
**デフォルトではオフです。** プロジェクト内のどこからも読み取られていないコンテンツ、および複数箇所で宣言されている辞書キーを報告します。
|
|
231
|
+
|
|
232
|
+
```typescript fileName="src/home.content.ts"
|
|
233
|
+
export default {
|
|
234
|
+
key: "home", // ✗ プロジェクト内の呼び出し元がどこからも "home" を要求していない場合に報告
|
|
235
|
+
content: {
|
|
236
|
+
title: t({ ja: "タイトル", en: "Title" }),
|
|
237
|
+
|
|
238
|
+
// ✗ `hero` を読み取るものが存在しない場合に報告
|
|
239
|
+
hero: {
|
|
240
|
+
subtitle: t({ ja: "サブタイトル", en: "Subtitle" }),
|
|
241
|
+
},
|
|
242
|
+
},
|
|
243
|
+
};
|
|
244
|
+
```
|
|
245
|
+
|
|
246
|
+
他のルールとは異なり、このルールは対象のファイル単体から判断することはできません。フィールドが未使用かどうかはプロジェクト全体との相対関係で決まります。リント実行の最初のコンテンツ宣言時に Intlayer 設定を読み込み、その設定で宣言されているソースファイル(`build.traversePattern`、`compiler.transformPattern`)を走査して、`@intlayer/lsp` や VS Code 拡張機能の「未使用」取り消し線を駆動しているのと同じ使用状況アナライザーを実行します。結果は `cacheTtl` ミリ秒間キャッシュされるため、ファイルごとではなく1回の実行につき1回のスキャンが行われます。
|
|
247
|
+
|
|
248
|
+
**オプション**
|
|
249
|
+
|
|
250
|
+
```javascript fileName="eslint.config.mjs"
|
|
251
|
+
{
|
|
252
|
+
"intlayer/no-unused-content": [
|
|
253
|
+
"warn",
|
|
254
|
+
{
|
|
255
|
+
// どこからも参照されていない辞書キーを報告。デフォルト: true
|
|
256
|
+
reportUnusedDictionaries: true,
|
|
257
|
+
|
|
258
|
+
// 何からも読み取られていないコンテンツフィールドを報告。デフォルト: true
|
|
259
|
+
reportUnusedFields: true,
|
|
260
|
+
|
|
261
|
+
// 複数箇所で宣言されている重複キーを報告。デフォルト: true
|
|
262
|
+
reportDuplicateKeys: true,
|
|
263
|
+
|
|
264
|
+
// 報告対象外とするフィールドパスの正規表現
|
|
265
|
+
ignoreFields: ["^meta"],
|
|
266
|
+
|
|
267
|
+
// スキャンを開始するプロジェクトルート。デフォルト: ESLint の作業ディレクトリ
|
|
268
|
+
baseDir: process.cwd(),
|
|
269
|
+
|
|
270
|
+
// プロジェクトスキャンの再利用期間 (ミリ秒)。デフォルト: 30000
|
|
271
|
+
cacheTtl: 30000,
|
|
272
|
+
},
|
|
273
|
+
],
|
|
274
|
+
}
|
|
275
|
+
```
|
|
276
|
+
|
|
277
|
+
長時間実行されるエディタサーバーからリントを実行し、編集をすばやく反映させたい場合は `cacheTtl` を低く設定します。モノレポで1回のリント実行が複数の Intlayer プロジェクトにまたがる場合は `baseDir` を設定します。
|
|
278
|
+
|
|
279
|
+
> **誤検知を防ぐため静かに動作します。** ここでの誤検知は翻訳の削除につながる可能性があるため、解析が追跡できない方法で辞書が使用されている場合は何も報告されません: コンテンツオブジェクト全体をそのまま渡す、そこからバインドされた翻訳関数(`const t = useTranslations("home")`)、直接インポートによって到達した宣言(`useDictionary(myDictionary)`)、他の辞書からの `nest()`、またはスプレッド構文によって網羅的でなくなったフィールドリストなどです。単一ファイルコンポーネント(`.vue`、`.svelte`、`.astro`)は、ここではスクリプトブロックが解析されないため、言及されている辞書のすべてのフィールドを使用しているものとしてカウントされます。
|
|
280
|
+
|
|
281
|
+
`reportDuplicateKeys` はビルドによって `.intlayer/` 配下に書き出された未マージの辞書を読み取るため、プロジェクトが少なくとも1回ビルドされるまでは動作しません。同じキーを共有する2つの宣言はマージされますが、これは正当なパターンです — 両側で定義されたフィールドが暗黙的にどちらか一方の値のみを保持してしまうため、この報告が存在します。
|
|
282
|
+
|
|
283
|
+
アナライザーは ESM として提供されている `@intlayer/lsp` から読み込まれます。そのため、このルールには ES モジュールを `require()` できる Node バージョン(Node 20.19+ または 22.12+)が必要です。それより古い環境では、リント実行を失敗させるのではなく何も報告しません。
|
|
284
|
+
|
|
285
|
+
## フレームワーク
|
|
286
|
+
|
|
287
|
+
すべてのルールは、Vue、Svelte、Angular テンプレート内を含め、すべての Intlayer 統合で動作します。各ファイルタイプをどのパーサーが読み取るかを ESLint に指定するだけです。
|
|
288
|
+
|
|
289
|
+
| フレームワーク | ファイル | パーサー |
|
|
290
|
+
| ------------------------- | ----------------- | --------------------------------- |
|
|
291
|
+
| React, Preact, Solid, Lit | `.jsx` `.tsx` | `typescript-eslint` |
|
|
292
|
+
| Next.js | `.jsx` `.tsx` | `typescript-eslint` |
|
|
293
|
+
| Vue, Nuxt | `.vue` | `vue-eslint-parser` |
|
|
294
|
+
| Svelte, SvelteKit | `.svelte` | `svelte-eslint-parser` |
|
|
295
|
+
| Angular | `.ts` | `typescript-eslint` |
|
|
296
|
+
| Angular テンプレート | `.component.html` | `@angular-eslint/template-parser` |
|
|
297
|
+
| Astro | `.astro` | `astro-eslint-parser` |
|
|
298
|
+
|
|
299
|
+
```javascript fileName="eslint.config.mjs"
|
|
300
|
+
import intlayer from "eslint-plugin-intlayer";
|
|
301
|
+
import tseslint from "typescript-eslint";
|
|
302
|
+
import vueParser from "vue-eslint-parser";
|
|
303
|
+
import svelteParser from "svelte-eslint-parser";
|
|
304
|
+
import angularTemplateParser from "@angular-eslint/template-parser";
|
|
305
|
+
|
|
306
|
+
export default [
|
|
307
|
+
...intlayer.configs.recommended,
|
|
308
|
+
|
|
309
|
+
{
|
|
310
|
+
files: ["**/*.{ts,tsx,jsx}"],
|
|
311
|
+
languageOptions: { parser: tseslint.parser },
|
|
312
|
+
},
|
|
313
|
+
{
|
|
314
|
+
files: ["**/*.vue"],
|
|
315
|
+
languageOptions: {
|
|
316
|
+
parser: vueParser,
|
|
317
|
+
parserOptions: { parser: tseslint.parser },
|
|
318
|
+
},
|
|
319
|
+
},
|
|
320
|
+
{
|
|
321
|
+
files: ["**/*.svelte"],
|
|
322
|
+
languageOptions: {
|
|
323
|
+
parser: svelteParser,
|
|
324
|
+
parserOptions: { parser: tseslint.parser },
|
|
325
|
+
},
|
|
326
|
+
},
|
|
327
|
+
{
|
|
328
|
+
files: ["**/*.component.html"],
|
|
329
|
+
languageOptions: { parser: angularTemplateParser },
|
|
330
|
+
},
|
|
331
|
+
];
|
|
332
|
+
```
|
|
333
|
+
|
|
334
|
+
プロジェクトに必要なパーサーのみをインストールしてください。
|
|
335
|
+
|
|
336
|
+
> **既知の制限事項。** Vue および Angular テンプレートでは、`{{ content[key] }}` のような式は `no-dynamic-field-access` によってチェックされません。スクリプトブロック内に書かれた動的アクセスは通常どおり検出されます。
|
|
@@ -141,152 +141,7 @@ This comprehensive guide provides everything you need to integrate Intlayer with
|
|
|
141
141
|
|
|
142
142
|
<Steps>
|
|
143
143
|
|
|
144
|
-
<Step number={
|
|
145
|
-
|
|
146
|
-
`intlayerProxy` を使用して、アプリケーションにサーバーサイドルーティングを追加することもできます。このプラグインは、URL に基づいて現在のロケールを自動的に検出し、適切なロケールクッキーを設定します。ロケールが指定されていない場合、プラグインはユーザーのブラウザの言語設定に基づいて最も適切なロケールを判断します。ロケールが検出されない場合は、デフォルトのロケールにリダイレクトします。
|
|
147
|
-
|
|
148
|
-
> `intlayerProxy` を本番環境で使用するには、`vite-intlayer` パッケージを `devDependencies` から `dependencies` に切り替える必要があることに注意してください。
|
|
149
|
-
|
|
150
|
-
```typescript {3,7} fileName="vite.config.ts"
|
|
151
|
-
import { reactRouter } from "@react-router/dev/vite";
|
|
152
|
-
import { defineConfig } from "vite";
|
|
153
|
-
import { intlayer } from "vite-intlayer";
|
|
154
|
-
|
|
155
|
-
export default defineConfig({
|
|
156
|
-
plugins: [
|
|
157
|
-
reactRouter(),
|
|
158
|
-
|
|
159
|
-
intlayer({
|
|
160
|
-
proxy: {
|
|
161
|
-
ignore: (req) => req.url?.startsWith("/api"),
|
|
162
|
-
},
|
|
163
|
-
}),
|
|
164
|
-
],
|
|
165
|
-
});
|
|
166
|
-
```
|
|
167
|
-
|
|
168
|
-
</Step>
|
|
169
|
-
|
|
170
|
-
<Step number={12} title="コンポーネントのコンテンツを抽出する" isOptional={true}>
|
|
171
|
-
|
|
172
|
-
既存のコードベースがある場合、数千のファイルを変換するのは時間がかかることがあります。
|
|
173
|
-
|
|
174
|
-
このプロセスを容易にするために、Intlayerは、コンポーネントを変換しコンテンツを抽出するための [コンパイラ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/compiler.md) / [エクストラクタ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/cli/extract.md) を提案しています。
|
|
175
|
-
|
|
176
|
-
セットアップするには、`intlayer.config.ts` ファイルに `compiler` セクションを追加します。
|
|
177
|
-
|
|
178
|
-
```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
|
|
179
|
-
import { type IntlayerConfig } from "intlayer";
|
|
180
|
-
|
|
181
|
-
const config: IntlayerConfig = {
|
|
182
|
-
// ... 他の構成
|
|
183
|
-
compiler: {
|
|
184
|
-
/**
|
|
185
|
-
* コンパイラを有効にするかどうかを指定します。
|
|
186
|
-
*/
|
|
187
|
-
enabled: true,
|
|
188
|
-
|
|
189
|
-
/**
|
|
190
|
-
* 出力ファイルのパスを定義します。
|
|
191
|
-
*/
|
|
192
|
-
output: ({ fileName, extension }) => `./${fileName}${extension}`,
|
|
193
|
-
|
|
194
|
-
/**
|
|
195
|
-
* 変換後にコンポーネントを保存するかどうかを指定します。これにより、コンパイラを一度だけ実行してアプリを変換し、その後削除することができます。
|
|
196
|
-
*/
|
|
197
|
-
saveComponents: false,
|
|
198
|
-
|
|
199
|
-
/**
|
|
200
|
-
* 辞書キーの接頭辞
|
|
201
|
-
*/
|
|
202
|
-
dictionaryKeyPrefix: "",
|
|
203
|
-
},
|
|
204
|
-
};
|
|
205
|
-
|
|
206
|
-
export default config;
|
|
207
|
-
```
|
|
208
|
-
|
|
209
|
-
<Tabs>
|
|
210
|
-
<Tab value='抽出コマンド'>
|
|
211
|
-
|
|
212
|
-
コンポーネントを変換してコンテンツを抽出するためにエクストラクタを実行します
|
|
213
|
-
|
|
214
|
-
```bash packageManager="npm"
|
|
215
|
-
npx intlayer extract
|
|
216
|
-
```
|
|
217
|
-
|
|
218
|
-
```bash packageManager="pnpm"
|
|
219
|
-
pnpm intlayer extract
|
|
220
|
-
```
|
|
221
|
-
|
|
222
|
-
```bash packageManager="yarn"
|
|
223
|
-
yarn intlayer extract
|
|
224
|
-
```
|
|
225
|
-
|
|
226
|
-
```bash packageManager="bun"
|
|
227
|
-
bun x intlayer extract
|
|
228
|
-
```
|
|
229
|
-
|
|
230
|
-
</Tab>
|
|
231
|
-
<Tab value='Babelコンパイラ'>
|
|
232
|
-
|
|
233
|
-
> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
|
|
234
|
-
|
|
235
|
-
```bash packageManager="npm"
|
|
236
|
-
npm install @intlayer/babel --save-dev
|
|
237
|
-
```
|
|
238
|
-
|
|
239
|
-
```bash packageManager="pnpm"
|
|
240
|
-
pnpm add @intlayer/babel --save-dev
|
|
241
|
-
```
|
|
242
|
-
|
|
243
|
-
```bash packageManager="yarn"
|
|
244
|
-
yarn add @intlayer/babel --save-dev
|
|
245
|
-
```
|
|
246
|
-
|
|
247
|
-
```bash packageManager="bun"
|
|
248
|
-
bun add @intlayer/babel --dev
|
|
249
|
-
```
|
|
250
|
-
|
|
251
|
-
```js fileName="babel.config.js"
|
|
252
|
-
const {
|
|
253
|
-
intlayerExtractBabelPlugin,
|
|
254
|
-
getExtractPluginOptions,
|
|
255
|
-
} = require("@intlayer/babel");
|
|
256
|
-
|
|
257
|
-
module.exports = {
|
|
258
|
-
presets: ["next/babel"],
|
|
259
|
-
plugins: [
|
|
260
|
-
// コンポーネントから辞書へコンテンツを抽出する
|
|
261
|
-
[intlayerExtractBabelPlugin, getExtractPluginOptions()],
|
|
262
|
-
],
|
|
263
|
-
};
|
|
264
|
-
```
|
|
265
|
-
|
|
266
|
-
```bash packageManager="npm"
|
|
267
|
-
npm run build # または npm run dev
|
|
268
|
-
```
|
|
269
|
-
|
|
270
|
-
```bash packageManager="pnpm"
|
|
271
|
-
pnpm run build # または pnpm run dev
|
|
272
|
-
```
|
|
273
|
-
|
|
274
|
-
```bash packageManager="yarn"
|
|
275
|
-
yarn build # または yarn dev
|
|
276
|
-
```
|
|
277
|
-
|
|
278
|
-
```bash packageManager="bun"
|
|
279
|
-
bun run build # Or bun run dev
|
|
280
|
-
```
|
|
281
|
-
|
|
282
|
-
</Tab>
|
|
283
|
-
</Tabs>
|
|
284
|
-
|
|
285
|
-
---
|
|
286
|
-
|
|
287
|
-
</Step>
|
|
288
|
-
|
|
289
|
-
</Steps>
|
|
144
|
+
<Step number={5} title="ルートレイアウトの作成">
|
|
290
145
|
|
|
291
146
|
#### Root Layout
|
|
292
147
|
|
|
@@ -75,7 +75,7 @@ Intlayer は単なる i18n ソリューションではなく、**自己ホスト
|
|
|
75
75
|
|
|
76
76
|
<Tabs defaultTab="video">
|
|
77
77
|
<Tab label="ビデオ" value="video">
|
|
78
|
-
|
|
78
|
+
|
|
79
79
|
<iframe title="ViteとReactに最適なi18nソリューション?Intlayerを発見" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?si=VaKmrYMmXjo3xpk2"/>
|
|
80
80
|
|
|
81
81
|
</Tab>
|
|
@@ -105,6 +105,10 @@ Intlayer は単なる i18n ソリューションではなく、**自己ホスト
|
|
|
105
105
|
|
|
106
106
|
GitHubの[Application Template](https://github.com/aymericzip/intlayer-vite-react-template)を参照してください。
|
|
107
107
|
|
|
108
|
+
<Steps>
|
|
109
|
+
|
|
110
|
+
<Step number={9} title="HTMLの言語属性と方向属性を切り替える" isOptional={true}>
|
|
111
|
+
|
|
108
112
|
#### フックの実装
|
|
109
113
|
|
|
110
114
|
HTML属性を管理するためのカスタムフックを作成します。このフックはロケールの変更を監視し、それに応じて属性を更新します:
|
package/docs/ko/configuration.md
CHANGED
|
@@ -478,6 +478,26 @@ const config: IntlayerConfig = {
|
|
|
478
478
|
*/
|
|
479
479
|
purge: true,
|
|
480
480
|
|
|
481
|
+
/**
|
|
482
|
+
* 로케일별 사전 청크를 해당 청크를 사용하는 코드 분할 경계 단위로 그룹화하여, 지연 로딩된 페이지가 한 번의 요청으로 콘텐츠를 가져오도록
|
|
483
|
+
* 합니다.
|
|
484
|
+
* 기본값: true
|
|
485
|
+
*
|
|
486
|
+
* 주의:
|
|
487
|
+
* - `importMode: 'dynamic'`을 사용하는 사전에만 적용됩니다.
|
|
488
|
+
*/
|
|
489
|
+
chunkGrouping: true,
|
|
490
|
+
|
|
491
|
+
/**
|
|
492
|
+
* 청크가 렌더링된 후 가져오는 대신, 해당 청크를 사용하는 사전을 함께 로드합니다. 읽기는 지연되지 않고 동기적으로 렌더링되므로 탐색 시
|
|
493
|
+
* 로딩 상태가 더 이상 깜박이지 않습니다.
|
|
494
|
+
* 기본값: true
|
|
495
|
+
*
|
|
496
|
+
* 주의:
|
|
497
|
+
* - 해결된 로케일만 대기하므로 페이지는 표시하는 언어만 다운로드합니다.
|
|
498
|
+
*/
|
|
499
|
+
dictionariesPreload: true,
|
|
500
|
+
|
|
481
501
|
/**
|
|
482
502
|
* 생성된 딕셔너리 파일의 출력 형식.
|
|
483
503
|
* 기본값: ['cjs', 'esm']
|
|
@@ -1054,15 +1074,17 @@ Intlayer가 애플리케이션의 국제화를 최적화하고 컴파일하는
|
|
|
1054
1074
|
|
|
1055
1075
|
> 최적화 시 Intlayer는 딕셔너리 호출을 코드 분할(chunking) 최적화로 대체하여 실제 사용되는 딕셔너리만 임포트되도록 합니다.
|
|
1056
1076
|
|
|
1057
|
-
| 필드
|
|
1058
|
-
|
|
|
1059
|
-
| `mode`
|
|
1060
|
-
| `optimize`
|
|
1061
|
-
| `minify`
|
|
1062
|
-
| `purge`
|
|
1063
|
-
| `checkTypes`
|
|
1064
|
-
| `
|
|
1065
|
-
| `
|
|
1077
|
+
| 필드 | 설명 | 타입 | 기본값 | 예시 | 참고 |
|
|
1078
|
+
| --------------------- | --------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
1079
|
+
| `mode` | 빌드 실행 모드를 제어합니다. | `'auto'` | <br/> `'manual'` | `'auto'` | `'manual'` | • `'auto'`: 애플리케이션 빌드 중 자동으로 빌드가 트리거됩니다.<br/>• `'manual'`: 명시적인 빌드 명령을 통해서만 실행됩니다.<br/>• 딕셔너리 빌드를 원치 않을 때 유용할 수 있습니다(예: Node.js 환경에서 실행하지 않으려는 경우). |
|
|
1080
|
+
| `optimize` | 빌드 최적화 수행 여부를 제어합니다. | `boolean` | `undefined` | `process.env.NODE_ENV === 'production'` | • 정의되지 않은 경우 프레임워크 빌드(Vite/Next.js) 중에 트리거됩니다.<br/>• `true`인 경우 개발 모드에서도 최적화를 강제합니다.<br/>• `false`인 경우 비활성화합니다.<br/>• 활성화된 경우 딕셔너리 호출을 chunking 최적화로 대체합니다.<br/>• `@intlayer/babel` 및 `@intlayer/swc` 플래그인이 필요합니다. |
|
|
1081
|
+
| `minify` | 번들 크기를 줄이기 위해 딕셔너리를 압축(Minify)합니다. | `boolean` | `false` | | • 최종 번들을 압축할지 여부를 지정합니다.<br/>• 기본값: 프로덕션에서 `true`.<br/>• `optimize`가 비활성화된 경우 이 옵션은 무시됩니다.<br/>• `editor.enabled`가 true인 경우 이 옵션은 무시됩니다. |
|
|
1082
|
+
| `purge` | 딕셔너리에서 사용하지 않는 키를 제거합니다. | `boolean` | `false` | | • 최종 번들을 제거할지 여부를 지정합니다.<br/>• 기본값: 프로덕션에서 `true`.<br/>• `optimize`가 비활성화된 경우 이 옵션은 무시됩니다. |
|
|
1083
|
+
| `checkTypes` | 빌드 시 TypeScript 타입 체크를 수행하고 오류를 기록할지 여부를 지정합니다. | `boolean` | `false` | | 빌드 속도가 느려질 수 있습니다. |
|
|
1084
|
+
| `chunkGrouping` | 로케일별 사전 청크를 해당 청크를 사용하는 코드 분할 경계 단위로 그룹화할지 여부를 지정합니다. | `boolean` | `true` | | • 그룹화하지 않으면 여러 컴포넌트로 구성된 페이지가 사전마다 하나씩 요청을 보냅니다.<br/>• 여러 경계에서 도달하는 사전은 공유 청크로 이동하므로 어떤 페이지도 다른 페이지의 콘텐츠를 포함하지 않습니다.<br/>• `importMode: 'dynamic'`을 사용하는 사전에만 적용됩니다.<br/>• 클라이언트 빌드에만, 그리고 번들링 시에만 적용됩니다(개발 모드 제외). |
|
|
1085
|
+
| `dictionariesPreload` | 사전을 해당 청크가 렌더링된 후 가져오는 대신, 그 청크와 함께 로드할지 여부를 지정합니다. | `boolean` | `true` | | • 생성된 진입점이 최상위에서 브라우징 로케일을 대기하므로, 지연 로딩된 라우트는 콘텐츠가 준비될 때까지 로드된 것으로 간주되지 않습니다.<br/>• 읽기는 지연되지 않고 동기적으로 렌더링되므로 탐색 시 로딩 상태가 더 이상 깜박이지 않습니다.<br/>• 해결된 로케일만 대기하므로 페이지는 표시하는 언어만 다운로드합니다.<br/>• 클라이언트 빌드에서 `importMode: 'dynamic'`을 사용하는 사전에만 적용됩니다.<br/>• 최상위 await를 지원하는 번들러(Vite, esbuild)가 필요합니다. |
|
|
1086
|
+
| `outputFormat` | 딕셔너리 출력 형식을 제어합니다. | `('esm' | 'cjs')[]` | `['esm', 'cjs']` | `['cjs']` | |
|
|
1087
|
+
| `traversePattern` | 최적화 중에 스캔할 파일 패턴. | `string[]` | `['**/*.{tsx,ts,js,mjs,cjs,jsx,vue,svelte,svte}', '!**/node_modules/**', '!**/dist/**', '!**/.intlayer/**', '!**/*.config.*', '!**/*.test.*', '!**/*.spec.*', '!**/*.stories.*']` | `['src/**/*.{ts,tsx}', '../ui-library/**/*.{ts,tsx}', '!**/node_modules/**']` | • 최적화를 관련 파일로 제한하여 빌드 성능을 향상시킵니다.<br/>• `optimize`가 비활성화된 경우 무시됩니다.<br/>• glob 패턴을 사용합니다. |
|
|
1066
1088
|
|
|
1067
1089
|
---
|
|
1068
1090
|
|
|
@@ -533,28 +533,6 @@ export default aboutPageMetaContent;
|
|
|
533
533
|
|
|
534
534
|
> 자세한 정보는 [변형](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dynamic_dictionaries/variants.md)을 참조하세요.
|
|
535
535
|
|
|
536
|
-
#### `meta` (`Record<string, string | number | boolean>`)
|
|
537
|
-
|
|
538
|
-
동적 레코드(Dynamic Records)와 연동하여 사용되는 이 필드는 CMS에서 관리되는 레코드나 불투명한 ID로 실행 시 가져오는 임의의 데이터를 선언할 수 있도록 합니다. 사전의 식별성은 이 `meta` 필드에 선언된 임의의 키-값 쌍 집합에 의해 정의됩니다.
|
|
539
|
-
|
|
540
|
-
**예시:**
|
|
541
|
-
|
|
542
|
-
```typescript
|
|
543
|
-
{
|
|
544
|
-
key: "product-copy",
|
|
545
|
-
meta: {
|
|
546
|
-
id: "prod_abc",
|
|
547
|
-
userId: "user_123"
|
|
548
|
-
},
|
|
549
|
-
content: {
|
|
550
|
-
name: "Widget Pro",
|
|
551
|
-
description: "The best widget."
|
|
552
|
-
}
|
|
553
|
-
}
|
|
554
|
-
```
|
|
555
|
-
|
|
556
|
-
> 자세한 정보는 [동적 레코드](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dynamic_dictionaries/dynamic_content.md)를 참조하세요.
|
|
557
|
-
|
|
558
536
|
### CMS 속성
|
|
559
537
|
|
|
560
538
|
##### `version` (string)
|
|
@@ -87,6 +87,29 @@ JSON 파일에서 콘텐츠를 가져올 수 없습니다. 대신 .ts 또는 .js
|
|
|
87
87
|
|
|
88
88
|
이 경우, `fakeFetch` 함수는 서버 응답 시간을 시뮬레이션하기 위해 지연을 모방합니다. Intlayer는 비동기 함수를 실행하고 그 결과를 `text` 키의 콘텐츠로 사용합니다.
|
|
89
89
|
|
|
90
|
+
## 원격 콘텐츠 가져오기
|
|
91
|
+
|
|
92
|
+
콘텐츠 필드에 프로미스를 직접 할당할 수도 있습니다. Intlayer는 사전을 빌드할 때 이를 기다린 후 해결된 값을 삽입합니다:
|
|
93
|
+
|
|
94
|
+
```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
|
|
95
|
+
import type { Dictionary } from "intlayer";
|
|
96
|
+
|
|
97
|
+
const remoteContent = {
|
|
98
|
+
key: "remote_content",
|
|
99
|
+
content: {
|
|
100
|
+
externalContent: fetch("https://example.com").then((res) => res.json()),
|
|
101
|
+
},
|
|
102
|
+
} satisfies Dictionary;
|
|
103
|
+
|
|
104
|
+
export default remoteContent;
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
```plaintext fileName="**/*.content.json" contentDeclarationFormat="json"
|
|
108
|
+
JSON 파일에서 콘텐츠를 가져올 수 없습니다. 대신 .ts 또는 .js 파일을 사용하세요.
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
> 요청은 빌드 시점에 실행되므로 가져온 데이터는 사전에 포함된 스냅샷입니다. 갱신하려면 사전을 다시 빌드하세요.
|
|
112
|
+
|
|
90
113
|
## React 컴포넌트에서 함수 기반 콘텐츠 사용하기
|
|
91
114
|
|
|
92
115
|
React 컴포넌트에서 함수 기반 콘텐츠를 사용하려면, `react-intlayer`에서 `useIntlayer`를 가져와서 콘텐츠 ID로 호출하여 콘텐츠를 가져와야 합니다. 다음은 예시입니다:
|