@intlayer/docs 7.0.4-canary.0 → 7.0.5

package/blog/zh/intlayer_with_react-i18next.md

@@ -1,346 +1,124 @@
 ---
 createdAt: 2025-01-02
-updatedAt: 2025-06-29
-title: Intlayer和react-i18next
-description: 比较React应用程序的react-i18next与Intlayer
+updatedAt: 2025-10-29
+title: 如何使用 Intlayer 自动化您的 react-i18next JSON 翻译
+description: 使用 Intlayer 和 react-i18next 自动化您的 JSON 翻译，提升 React 应用的国际化体验。
 keywords:
   - react-i18next
   - i18next
   - Intlayer
   - 国际化
-  - 文档
-  - Next.js
-  - JavaScript
+  - i18n
+  - 博客
   - React
+  - JavaScript
+  - TypeScript
+  - 内容管理
 slugs:
   - blog
   - intlayer-with-react-i18next
+history:
+  - version: 7.0.0
+    date: 2025-10-29
+    changes: 更改为 syncJSON 插件
 ---
 
-# React 国际化 (i18n) 与 react-i18next 和 Intlayer
-
-## 概述
-
-- **Intlayer** 帮助您通过 **组件级别** 内容声明文件管理翻译。
-- **react-i18next** 是一个流行的 React 集成 **i18next** 的库，提供 `useTranslation` 等钩子以在组件中获取本地化字符串。
-
-结合使用时，Intlayer 可以 **导出** 与 **i18next 兼容的 JSON**，以便 react-i18next 可以在运行时 **使用** 它们。
-
-## 为什么将 Intlayer 与 react-i18next 结合使用？
-
-**Intlayer** 内容声明文件提供了更好的开发者体验，因为它们是：
-
-1. **灵活的文件位置**  
-   将每个内容声明文件放在需要它的组件旁边。这种结构允许您保持翻译的共存，防止组件移动或删除时出现孤立翻译。
-
-   ```bash codeFormat="typescript"
-   .
-   └── src
-       └── components
-           └── MyComponent
-               ├── index.content.ts # 内容声明文件
-               └── index.tsx
-   ```
-
-   ```bash codeFormat="esm"
-   .
-   └── src
-       └── components
-           └── MyComponent
-               ├── index.content.mjs # 内容声明文件
-               └── index.mjx
-   ```
-
-   ```bash codeFormat="cjs"
-   .
-   └── src
-       └── components
-           └── MyComponent
-               ├── index.content.cjs # 内容声明文件
-               └── index.cjx
-   ```
-
-   ```bash codeFormat="json"
-   .
-   └── src
-       └── components
-           └── MyComponent
-               ├── index.content.json # 内容声明文件
-               └── index.jsx
-   ```
-
-2. **集中翻译**  
-   单个内容声明文件收集一个组件所需的所有翻译，使缺失翻译更易于捕捉。  
-   使用 TypeScript 时，如果缺少翻译，您甚至会在编译时收到错误。
-
-## 安装
-
-在 Create React App 项目中，安装这些依赖：
-
-```bash
-# 使用 npm
-npm install intlayer react-i18next i18next i18next-resources-to-backend
-```
+# 如何使用 Intlayer 自动化您的 react-i18next JSON 翻译
 
-```bash
-# 使用 yarn
-yarn add intlayer react-i18next i18next i18next-resources-to-backend
-```
+## 什么是 Intlayer？
 
-```bash
-# 使用 pnpm
-pnpm add intlayer react-i18next i18next i18next-resources-to-backend
-```
+**Intlayer** 是一个创新的开源国际化库，旨在解决传统 i18n 解决方案的不足。它为 React 应用提供了一种现代化的内容管理方法。
 
-### 这些包是做什么的？
+请参阅我们博客文章中的具体对比：[react-i18next vs. react-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/zh/react-i18next_vs_react-intl_vs_intlayer.md)。
 
-- **intlayer** – 用于管理 i18n 配置、内容声明和构建字典输出的 CLI 和核心库。
-- **react-intlayer** – 针对 Intlayer 的 React 特定集成，提供自动化构建字典的一些脚本。
-- **react-i18next** – i18next 的 React 特定集成库，包括 `useTranslation` 钩子。
-- **i18next** – 用于处理翻译的底层框架。
-- **i18next-resources-to-backend** – 一个动态导入 JSON 资源的 i18next 后端。
+## 为什么要将 Intlayer 与 react-i18next 结合使用？
 
-## 配置 Intlayer 以导出 i18next 字典
+虽然 Intlayer 提供了一个出色的独立 i18n 解决方案（请参阅我们的[React 集成指南](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_with_vite+react.md)），但您可能出于以下几个原因想将其与 react-i18next 结合使用：
 
-在项目根目录中创建（或更新）`intlayer.config.ts`：
+1. **现有代码库**：您已经有一个成熟的 react-i18next 实现，并希望逐步迁移到 Intlayer 以获得更好的开发者体验。
+2. **遗留需求**：您的项目需要兼容现有的 react-i18next 插件或工作流程。
+3. **团队熟悉度**：您的团队熟悉 react-i18next，但希望获得更好的内容管理。
 
-```typescript title="intlayer.config.ts"
-import { Locales, type IntlayerConfig } from "intlayer";
+**为此，Intlayer 可以作为 react-i18next 的适配器来实现，帮助您在 CLI 或 CI/CD 流水线中自动化 JSON 翻译、测试翻译等功能。**
 
-const config: IntlayerConfig = {
-  internationalization: {
-    // 添加您想要的任意多的语言环境
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-    defaultLocale: Locales.ENGLISH,
-  },
-  content: {
-    // 告诉 Intlayer 创建与 i18next 兼容的 JSON
-    dictionaryOutput: ["i18next"],
+本指南将向您展示如何利用 Intlayer 优秀的内容声明系统，同时保持与 react-i18next 的兼容性。
 
-    // 为生成的资源选择一个输出目录
-    // 如果该文件夹尚不存在，将自动创建。
-    i18nextResourcesDir: "./i18next/resources",
-  },
-};
+## 目录
 
-export default config;
-```
+<TOC/>
 
-> **注意**：如果您不使用 TypeScript，可以将此配置文件创建为 `.cjs`、`.mjs` 或 `.js`（请参阅 [Intlayer 文档](https://intlayer.org/zh/doc/concept/configuration) 以获取详细信息）。
+## 使用 react-i18next 设置 Intlayer 的分步指南
 
-## 构建 i18next 资源
+### 第一步：安装依赖
 
-一旦您的内容声明到位（下一部分），运行 **Intlayer 构建命令**：
+安装必要的包：
 
-```bash
-# 使用 npm
-npx run intlayer build
+```bash packageManager="npm"
+npm install intlayer @intlayer/sync-json-plugin
 ```
 
-```bash
-# 使用 yarn
-yarn intlayer build
+```bash packageManager="pnpm"
+pnpm add intlayer @intlayer/sync-json-plugin
 ```
 
-```bash
-# 使用 pnpm
-pnpm intlayer build
+```bash packageManager="yarn"
+yarn add intlayer @intlayer/sync-json-plugin
 ```
 
-> 这将在默认情况下在 `./i18next/resources` 目录中生成您的 i18next 资源。
+**包描述：**
 
-一个典型的输出可能如下所示：
+- **intlayer**：用于国际化管理、内容声明和构建的核心库
+- **@intlayer/sync-json-plugin**：将 Intlayer 内容声明导出为兼容 react-i18next 的 JSON 格式的插件
 
-```bash
-.
-└── i18next
-    └── resources
-       ├── zh
-       │   └── my-content.json
-       ├── fr
-       │   └── my-content.json
-       └── es
-           └── my-content.json
-```
+### 第二步：实现 Intlayer 插件以包装 JSON
 
-其中每个 **Intlayer** 声明键用作 **i18next 命名空间**（例如，`my-content.json`）。
-
-## 将字典导入到您的 react-i18next 配置中
-
-要在运行时动态加载这些资源，请使用 [`i18next-resources-to-backend`](https://www.npmjs.com/package/i18next-resources-to-backend)。例如，在您的项目中创建一个 `i18n.ts`（或 `.js`）文件：
-
-```typescript title="i18n.ts"
-import i18next from "i18next";
-import { initReactI18next } from "react-i18next";
-import resourcesToBackend from "i18next-resources-to-backend";
-
-i18next
-  // react-i18next 插件
-  .use(initReactI18next)
-  // 动态加载资源
-  .use(
-    resourcesToBackend((language: string, namespace: string) => {
-      // 调整您资源目录的导入路径
-      return import(`../i18next/resources/${language}/${namespace}.json`);
-    })
-  )
-  // 初始化 i18next
-  .init({
-    // 回退语言
-    fallbackLng: "zh",
-
-    // 您可以在此处添加其他 i18next 配置选项，见：
-    // https://www.i18next.com/overview/configuration-options
-  });
-
-export default i18next;
-```
+创建一个 Intlayer 配置文件来定义你支持的语言环境：
 
-```javascript title="i18n.js"
-import i18next from "i18next";
-import { initReactI18next } from "react-i18next";
-import resourcesToBackend from "i18next-resources-to-backend";
-
-i18next
-  .use(initReactI18next)
-  .use(
-    resourcesToBackend(
-      (language, namespace) =>
-        import(`../i18next/resources/${language}/${namespace}.json`)
-    )
-  )
-  .init({
-    fallbackLng: "zh",
-  });
-
-export default i18next;
-```
+**如果你还想导出适用于 react-i18next 的 JSON 字典**，请添加 `syncJSON` 插件：
 
-然后，在您的 **根** 或 **索引** 文件（例如，`src/index.tsx`）中，导入此 `i18n` 设置 **在** 渲染 `App` 之前：
-
-```typescript
-import React from "react";
-import ReactDOM from "react-dom/client";
-// 在任何其他事情之前初始化 i18n
-import "./i18n";
-import App from "./App";
-
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-```
-
-## 创建和管理您的内容声明
-
-Intlayer 从位于 `./src` 下的“内容声明文件”中提取翻译（默认为此）。  
-以下是 TypeScript 中的一个最小示例：
-
-```typescript title="src/components/MyComponent/MyComponent.content.ts"
-import { t, type Dictionary } from "intlayer";
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { syncJSON } from "@intlayer/sync-json-plugin";
 
-const content = {
-  // “key” 将是您的 i18next 命名空间（例如，“my-component”）
-  key: "my-component",
-  content: {
-    // 每个“t”调用是一个单独的翻译节点
-    heading: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-    description: t({
-      en: "My i18n description text...",
-      fr: "Ma description en i18n...",
-      es: "Mi descripción en i18n...",
-    }),
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
   },
-} satisfies Dictionary;
-
-export default content;
-```
-
-如果您更喜欢 JSON、`.cjs` 或 `.mjs`，请参考 [Intlayer 文档](https://intlayer.org/zh/doc/concept/content)。
-
-> 默认情况下，有效的内容声明匹配文件扩展名模式：
-
-> `*.content.{ts,tsx,js,jsx,mjs,mjx,cjs,cjx,json}`
-
-## 在 React 组件中使用翻译
-
-在您 **构建** 了 Intlayer 资源并配置了 react-i18next 后，您可以直接使用 **react-i18next** 的 `useTranslation` 钩子。  
-例如：
-
-```tsx title="src/components/MyComponent/MyComponent.tsx"
-import type { FC } from "react";
-import { useTranslation } from "react-i18next";
-
-/**
- * i18next 的“命名空间”是来自“MyComponent.content.ts”的 Intlayer `key`
- * 因此我们将“my-component”传递给 useTranslation()。
- */
-const MyComponent: FC = () => {
-  const { t } = useTranslation("my-component");
-
-  return (
-    <div>
-      <h1>{t("heading")}</h1>
-      <p>{t("description")}</p>
-    </div>
-  );
+  plugins: [
+    syncJSON({
+      source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
+    }),
+  ],
 };
 
-export default MyComponent;
+export default config;
 ```
 
-> 请注意，`t` 函数引用您生成的 JSON 中的 **键**。对于名为 `heading` 的 Intlayer 内容条目，您将使用 `t("heading")`。
-
-## 可选：与 Create React App 脚本集成 (CRACO)
-
-**react-intlayer** 提供了一种基于 CRACO 的自定义构建和开发服务器配置方法。如果您希望 Intlayer 的构建步骤无缝集成，可以：
+`syncJSON` 插件会自动包装 JSON。它会读取和写入 JSON 文件，而不改变内容结构。
 
-1. **安装 react-intlayer**（如果您还没有）：
-   ```bash
-   npm install react-intlayer --save-dev
-   ```
-2. **调整您的 `package.json` 脚本**以使用 `react-intlayer` 脚本：
+如果你想让 JSON 与 intlayer 内容声明文件（`.content` 文件）共存，Intlayer 会按以下方式处理：
 
-   ```jsonc
-   "scripts": {
-     "start": "react-intlayer start",
-     "build": "react-intlayer build",
-     "transpile": "intlayer build"
-   }
-   ```
+    1. 加载 JSON 和内容声明文件，并将它们转换为 Intlayer 字典。
+    2. 如果 JSON 和内容声明文件之间存在冲突，Intlayer 将合并所有字典。合并的优先级取决于插件的优先级以及内容声明文件的优先级（所有均可配置）。
 
-   > `react-intlayer` 脚本基于 [CRACO](https://craco.js.org/)。您还可以根据 intlayer craco 插件实现自己的设置。[在此处查看示例](https://github.com/aymericzip/intlayer/blob/main/examples/react-app/craco.config.js)。
+如果使用 CLI 翻译 JSON，或使用 CMS 进行更改，Intlayer 将使用新的翻译更新 JSON 文件。
 
-现在，运行 `npm run build`、`yarn build` 或 `pnpm build` 将同时触发 Intlayer 和 CRA 的构建。
-
-## TypeScript 配置
-
-**Intlayer** 提供了 **自动生成的类型定义** 来支持您的内容。为确保 TypeScript 能够捕获这些类型，请在 `tsconfig.json` 的 **include** 数组中添加 **`types`**（如果您另有配置则为 `types`）：
-
-```json5 title="tsconfig.json"
-{
-  "compilerOptions": {
-    // ...
-  },
-  "include": ["src", "types"],
-}
-```
-
-> 这将使 TypeScript 推断您的翻译的形状，以获得更好的自动补全和错误检测。
+要查看更多关于 `syncJSON` 插件的详细信息，请参阅 [syncJSON 插件文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/plugins/sync-json.md)。
 
 ## Git 配置
 
-建议 **忽略** Intlayer 生成的自动生成文件和文件夹。将以下行添加到您的 `.gitignore`：
+建议忽略自动生成的 Intlayer 文件：
 
-```plaintext
+```plaintext fileName=".gitignore"
 # 忽略 Intlayer 生成的文件
 .intlayer
-i18next
 ```
 
-您通常不应提交这些资源或 `.intlayer` 内部构建工件，因为它们可以在每次构建时重新生成。
+这些文件可以在构建过程中重新生成，无需提交到版本控制。
+
+### VS Code 扩展
+
+为了提升开发者体验，请安装官方的 **Intlayer VS Code 扩展**：
+
+[从 VS Code 市场安装](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)

package/blog/zh/intlayer_with_react-intl.md

@@ -1,166 +1,123 @@
 ---
 createdAt: 2025-01-02
-updatedAt: 2025-06-29
-title: Intlayer和react-intl
-description: 与React应用程序一起使用react-intl和Intlayer
+updatedAt: 2025-10-29
+title: 如何使用 Intlayer 自动化您的 react-intl JSON 翻译
+description: 使用 Intlayer 和 react-intl 自动化您的 JSON 翻译，提升 React 应用的国际化体验。
 keywords:
   - react-intl
   - Intlayer
   - 国际化
-  - 文档
-  - Next.js
+  - 博客
+  - i18n
   - JavaScript
   - React
+  - FormatJS
 slugs:
   - blog
   - intlayer-with-react-intl
+history:
+  - version: 7.0.0
+    date: 2025-10-29
+    changes: 更改为 syncJSON 插件
 ---
 
-# React Internationalization (i18n) with **react-intl** and Intlayer
+# 如何使用 Intlayer 自动化您的 react-intl JSON 翻译
 
-本指南展示了如何将 **Intlayer** 与 **react-intl** 集成，以管理 React 应用程序中的翻译。您将使用 Intlayer 声明可翻译的内容，然后使用 **react-intl** 这个来自 [FormatJS](https://formatjs.io/docs/react-intl) 生态系统的流行库来消费这些消息。
+## 什么是 Intlayer？
 
-## 概述
+**Intlayer** 是一个创新的开源国际化库，旨在解决传统 i18n 解决方案的不足。它为 React 应用中的内容管理提供了一种现代化的方法。
 
-- **Intlayer** 允许您在项目中存储翻译，位于 **组件级** 内容声明文件（如 JSON、JS、TS 等）中。
-- **react-intl** 提供 React 组件和钩子（如 `<FormattedMessage>` 和 `useIntl()`）来显示本地化字符串。
+请参阅我们博客文章中的具体对比：[react-i18next vs. react-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/zh/react-i18next_vs_react-intl_vs_intlayer.md)。
 
-通过配置 Intlayer 以 **导出** 以 **react-intl 兼容** 格式的翻译，您可以自动 **生成** 和 **更新** `<IntlProvider>`（来自 react-intl）所需的消息文件。
+## 为什么要将 Intlayer 与 react-intl 结合使用？
 
----
+虽然 Intlayer 提供了一个出色的独立 i18n 解决方案（请参阅我们的[React 集成指南](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_with_vite+react.md)），但您可能出于以下几个原因想将其与 react-intl 结合使用：
 
-## 为什么使用 Intlayer 和 react-intl？
+1. **现有代码库**：您已经有了成熟的 react-intl 实现，并希望逐步迁移到 Intlayer 以获得更好的开发者体验。
+2. **遗留需求**：您的项目需要兼容现有的 react-intl 插件或工作流程。
+3. **团队熟悉度**：您的团队对 react-intl 很熟悉，但希望获得更好的内容管理。
 
-1. **按组件内容声明**  
-   Intlayer 内容声明文件可以与您的 React 组件并存，如果组件被移动或删除，可以防止“孤立”翻译。例如：
+**为此，Intlayer 可以作为 react-intl 的适配器实现，帮助您在 CLI 或 CI/CD 流水线中自动化 JSON 翻译，测试翻译内容等。**
 
-   ```bash
-   .
-   └── src
-       └── components
-           └── MyComponent
-               ├── index.content.ts   # Intlayer 内容声明
-               └── index.tsx          # React 组件
-   ```
+本指南将向您展示如何利用 Intlayer 优越的内容声明系统，同时保持与 react-intl 的兼容性。
 
-2. **集中翻译**  
-   每个内容声明文件收集组件所需的所有翻译。这在 TypeScript 项目中特别有帮助：缺少翻译可以在 **编译时** 被捕获。
+## 目录
 
-3. **自动构建和再生**  
-   每当您添加或更新翻译时，Intlayer 会重新生成消息 JSON 文件。然后，您可以将这些文件传入 react-intl 的 `<IntlProvider>`。
+<TOC/>
 
----
+## 使用 react-intl 设置 Intlayer 的分步指南
 
-## 安装
+### 第一步：安装依赖项
 
-在典型的 React 项目中，安装以下内容：
+安装必要的包：
 
-```bash
-# with npm
-npm install intlayer react-intl
+```bash packageManager="npm"
+npm install intlayer @intlayer/sync-json-plugin
+```
 
-# with yarn
-yarn add intlayer react-intl
+```bash packageManager="pnpm"
+pnpm add intlayer @intlayer/sync-json-plugin
+```
 
-# with pnpm
-pnpm add intlayer react-intl
+```bash packageManager="yarn"
+yarn add intlayer @intlayer/sync-json-plugin
 ```
 
-### 为什么选择这些包？
+**包描述：**
 
-- **intlayer**：核心 CLI 和库，扫描内容声明，合并它们，并构建字典输出。
-- **react-intl**：来自 FormatJS 的主要库，提供 `<IntlProvider>`、`<FormattedMessage>`、`useIntl()` 和其他国际化原语。
+- **intlayer**：用于国际化管理、内容声明和构建的核心库
+- **@intlayer/sync-json-plugin**：将 Intlayer 内容声明导出为兼容 react-intl 的 JSON 格式的插件
 
-> 如果您还没有安装 React，您也需要安装它（`react` 和 `react-dom`）。
+### 步骤 2：实现 Intlayer 插件以包装 JSON
 
-## 配置 Intlayer 以导出 react-intl 消息
+创建一个 Intlayer 配置文件以定义支持的语言环境：
 
-在项目根目录下，创建 **`intlayer.config.ts`**（或 `.js`、`.mjs`、`.cjs`），如下所示：
+**如果您还想导出适用于 react-intl 的 JSON 字典**，请添加 `syncJSON` 插件：
 
-```typescript title="intlayer.config.ts"
+```typescript fileName="intlayer.config.ts"
 import { Locales, type IntlayerConfig } from "intlayer";
+import { syncJSON } from "@intlayer/sync-json-plugin";
 
 const config: IntlayerConfig = {
   internationalization: {
-    // 可以添加任意数量的语言环境
     locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
     defaultLocale: Locales.ENGLISH,
   },
-  content: {
-    // 告诉 Intlayer 为 react-intl 生成消息文件
-    dictionaryOutput: ["react-intl"],
-
-    // Intlayer 将在此目录中写入您的消息 JSON 文件
-    reactIntlMessagesDir: "./react-intl/messages",
-  },
+  plugins: [
+    syncJSON({
+      source: ({ key, locale }) => `./intl/messages/${locale}/${key}.json`,
+    }),
+  ],
 };
 
 export default config;
 ```
 
-> **注意**：有关其他文件扩展名（`.mjs`、`.cjs`、`.js`），请参阅 [Intlayer 文档](https://intlayer.org/en/doc/concept/configuration) 以获取使用细节。
+`syncJSON` 插件会自动包装 JSON。它会读取和写入 JSON 文件，而不会改变内容结构。
 
----
+如果你想让 JSON 与 intlayer 内容声明文件（`.content` 文件）共存，Intlayer 会按以下方式处理：
 
-## 创建您的 Intlayer 内容声明
+    1. 加载 JSON 和内容声明文件，并将它们转换为 intlayer 字典。
 
-Intlayer 默认扫描您的代码库（在 `./src` 下），查找匹配 `*.content.{ts,tsx,js,jsx,mjs,mjx,cjs,cjx,json}` 的文件。  
-这里是一个 **TypeScript** 示例：
+2. 如果 JSON 文件和内容声明文件之间存在冲突，Intlayer 将合并所有字典。合并的优先级取决于插件的优先级以及内容声明文件的优先级（所有这些都是可配置的）。
 
-```typescript title="src/components/MyComponent/index.content.ts"
-import { t, type Dictionary } from "intlayer";
+如果使用 CLI 翻译 JSON，或使用 CMS 进行更改，Intlayer 会使用新的翻译更新 JSON 文件。
 
-const content = {
-  // "key" 变成您的 react-intl JSON 文件中的顶级消息键
-  key: "my-component",
+有关 `syncJSON` 插件的更多详细信息，请参阅 [syncJSON 插件文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/plugins/sync-json.md)。
 
-  content: {
-    // 每次调用 t() 声明一个可翻译的字段
-    helloWorld: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-    description: t({
-      en: "This is a description",
-      fr: "Ceci est une description",
-      es: "Esta es una descripción",
-    }),
-  },
-} satisfies Dictionary;
+## Git 配置
 
-export default content;
-```
-
-如果您更喜欢 JSON 或不同的 JS 语法（`.cjs`、`.mjs`），结构大致相同, 请参阅 [Intlayer 文档关于内容声明](https://intlayer.org/en/doc/concept/content)。
-
----
-
-## 构建 react-intl 消息
+建议忽略自动生成的 Intlayer 文件：
 
-要生成 **react-intl** 的实际消息 JSON 文件，请运行：
-
-```bash
-# with npm
-npx intlayer dictionaries build
-
-# with yarn
-yarn intlayer build
-
-# with pnpm
-pnpm intlayer build
+```plaintext fileName=".gitignore"
+# 忽略 Intlayer 生成的文件
+.intlayer
 ```
 
-这会扫描所有 `*.content.*` 文件，编译它们，并将结果写入您在 **`intlayer.config.ts`** 中指定的目录, 在这个例子中是 `./react-intl/messages`。  
-典型输出可能如下所示：
+这些文件可以在构建过程中重新生成，无需提交到版本控制。
 
-```bash
-.
-└── react-intl
-    └── messages
-        ├── en.json
-        ├── fr.json
-        └── es.json
-```
+### VS Code 扩展
+
+为了提升开发者体验，建议安装官方的 **Intlayer VS Code 扩展**：
 
-每个文件都是一个 JSON 对象，其 **顶级键** 对应于每个
+[从 VS Code 市场安装](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)