# General Translation Knowledge Base: General Translation 与 Paraglide JS：该选哪一个？
URL: https://generaltranslation.com/zh/kb/general-translation-vs-paraglide.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 如果你希望将文案内联在代码中，并结合 React 组件结构、共享术语和仪表板审阅来生成译文，请选择 General Translation。如果你需要编译生成的带类型消息函数，以及按单条消息进行的 tree-shaking，请选择 Paraglide JS。Paraglide 负责渲染你的消息目录；General Translation 则将源文案与译文生成及后续更新衔接起来。
Category: 国际化
Last updated: 2026-10-16
Authors: Kevin Wu, Jackie Chen
Published: 2026-10-16

Paraglide JS 是 inlang 推出的一款以编译器为核心的国际化库。你将消息保存在 `messages/en.json` 等 JSON 文件中，它的编译器会把每条消息转换为带类型的函数，供你以 `m.greeting({ name })` 的形式调用，这样打包工具就能剔除页面用不到的消息。不过，翻译工作仍需你自己完成：每种语言的每条消息，都要由你、译者，或你针对这些文件运行的机器翻译命令来提供。General Translation 的库同样负责渲染译文，此外 General Translation 还能直接生成译文——你只需在组件中内联编写一次文案即可。

## Paraglide JS 的优势

* **类型安全。** 消息键和参数都会生成对应的类型。在 2.29.0 版本中，拼错的 `m.greting()`，以及调用 `m.greeting({})` 时遗漏 `name` 参数，都会报 TypeScript 错误。
* **打包体积。** 消息会被编译为 ES 模块，未使用的消息可通过 tree-shaking 移除。在 Paraglide [公开的基准测试](https://paraglidejs.com/benchmark)中，某页面在五个区域设置下使用了 200 条消息中的 100 条，使用 Paraglide 时传输量为 47 KB，使用 i18next 时则为 205 KB。
* **复数形式与变体。** 默认消息格式会[声明复数选择器](https://paraglidejs.com/variants)，并按 `one`、`few`、`many` 等 CLDR 类别进行匹配。[插件](https://paraglidejs.com/file-formats)可添加对 ICU MessageFormat 1 和 i18next 文件的支持，格式化器则借助 `Intl` 处理数字、日期和相对时间。
* **区域设置策略。** 有序的 [`strategy` 列表](https://paraglidejs.com/strategy)会依次从 URL、cookie、`localStorage`、浏览器首选语言、全局变量、自定义策略或 `baseLocale` 中解析区域设置。在 2.29.0 中，[默认](https://github.com/opral/paraglide-js/blob/main/src/compiler/compiler-options.ts)顺序为 `cookie`、`globalVariable`、`baseLocale`。[服务端中间件](https://paraglidejs.com/middleware)和 `localizeUrl` 负责处理本地化路由。
* **框架覆盖面广。** Paraglide [适用于任何 Vite 应用](https://paraglidejs.com/vite)，并提供 React、Vue、Solid、SvelteKit、TanStack Start、React Router、Astro 和 Next.js 的指南。Svelte CLI 中的 [`npx sv add paraglide` 所安装的附加组件](https://paraglidejs.com/sveltekit)正是 Paraglide。其 [Next.js 指南](https://paraglidejs.com/next-js)通过 webpack 插件支持 App Router，运行时需加上 `--webpack` 标志。
* **免费、开放的工具链。** 该库采用 [MIT 许可证](https://github.com/opral/paraglide-js/blob/main/LICENSE)。[inlang CLI](https://inlang.com/m/2qj2w8pu/app-inlang-cli) 可在 CI 中检查项目，[Sherlock](https://inlang.com/m/r7kp499g/app-inlang-ideExtension) 可在 VS Code 中内联显示译文，[Fink](https://fink.inlang.com/) 则是一款免费的浏览器端编辑器，能将译者的修改提交到 GitHub 代码仓库。

## Paraglide JS 需要你自己处理的部分

inlang 项目就是一个 `project.inlang` 文件夹，其中的 `settings.json` 列出了你的区域设置、插件以及消息文件的路径。下面以一个收件箱为例，其中包含一条普通消息、一个参数和一个复数形式：

```json title="messages/en.json"
{
  "inbox_title": "Inbox",
  "greeting": "Hello {name}!",
  "unread_messages": [
    {
      "declarations": ["input count", "local countPlural = count: plural"],
      "selectors": ["countPlural"],
      "match": {
        "countPlural=one": "You have {count} unread message.",
        "countPlural=*": "You have {count} unread messages."
      }
    }
  ]
}
```

```tsx title="Inbox.tsx"
import { m } from './paraglide/messages.js';

export function Inbox({ name, count }: { name: string; count: number }) {
  return (
    <section>
      <h1>{m.inbox_title()}</h1>
      <p>{m.greeting({ name })}</p>
      <p>{m.unread_messages({ count })}</p>
    </section>
  );
}
```

其他每个区域设置都需要单独的文件，其中包含相同的键，以及该语言所需的变体：波兰语需要匹配 `one`、`few`、`many` 和 `*`。如果 `messages/pl.json` 中缺少某个键，编译后的函数会静默回退到基础区域设置，不会发出任何警告。下面是使用缺少 `greeting` 的波兰语文件渲染该组件的效果：

```text title="Output"
pl  <h1>Skrzynka odbiorcza</h1><p>Hello Ada!</p><p>Masz 2 nieprzeczytane wiadomości.</p>
```

`npx @inlang/cli check` 发现了这个问题：它报告 `greeting` 缺少波兰语翻译，并以退出码 1 退出，因此 CI 可以拦截这类遗漏。但补齐翻译仍然需要你自己来做。`inlang machine translate` 默认使用一个免费的社区运营服务来翻译缺失的消息，也可以改用你自己的 Google Cloud Translation 或 DeepL 密钥；它每次只翻译一条消息，并且不会参考该消息所在的组件。inlang CLI 自己的文档也提到，掌握产品和代码上下文的编程智能体能够生成比通用机器翻译更好的初稿。

## 由 General Translation 负责翻译

General Translation 的库同样负责渲染，区别在于文案存放在哪里，以及由谁来翻译。下面是用 `gt-react` 实现的同一个收件箱：

```tsx title="Inbox.tsx"
import { T, Plural, Num, Var } from 'gt-react';

export function Inbox({ name, count }: { name: string; count: number }) {
  return (
    <T>
      <section>
        <h1>Inbox</h1>
        <p>Hello <Var>{name}</Var>!</p>
        <Plural
          n={count}
          singular={<p>You have <Num>{count}</Num> unread message.</p>}
          plural={<p>You have <Num>{count}</Num> unread messages.</p>}
        />
      </section>
    </T>
  );
}
```

无需维护需要同步更新的消息文件：英文本身就写在组件里。[`npx gt translate`](/docs/cli/reference/commands/translate) 会将每个 [`<T>`](/docs/react/reference/components/t) 代码块连同其元素结构发送到 General Translation API，并为每个目标区域设置生成译文，因此新增的句子在构建前就已完成翻译，而不会回退显示英文。[`<Var>`](/docs/react/reference/components/var) 中的值永远不会发送到 API，[`<Plural>`](/docs/react/reference/components/plural) 则根据读者区域设置的复数规则选择分支。[`npx gt validate`](/docs/cli/reference/commands/validate) 无需调用 API 即可检查项目，[`gt generate`](/docs/cli/reference/commands/generate) 则为手动翻译的团队生成模板文件。

此代码块中的标题、问候语和复数分支会作为一个整体提交翻译。General Translation 还会应用分配给该项目的[词汇表和自定义提示词](/docs/platform/dashboard/guides/defining-context-for-translations)，审校人员可在仪表板中编辑翻译结果。你可以将 CLI 集成到 CI 中，或配置 [Locadex](/docs/platform/locadex/quickstart)，在代码变更时自动创建翻译拉取请求。

General Translation 的 JavaScript 库采用 MIT 许可证，使用自备译文时无需注册账户。将译文与应用打包在一起，渲染就不依赖托管服务；通过 CDN 投递译文，则可以独立于应用发布，单独发布译文修改。具体的初始化设置请参阅[存储译文](/docs/react/guides/storing-translations)。

Sierra 借助 General Translation，在其网站和市场推广内容中支持 7 种以上的区域设置。 (参见[生产环境部署](https://generaltranslation.com/enterprise)。)

## Paraglide JS 与 General Translation 速览

| 功能        | Paraglide JS                                                                           | General Translation                                                                                                      |
| --------- | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| 文案编写方式    | 每个区域设置对应一个 JSON 文件，在其中定义键，通过 `m.key()` 调用                                              | 将 JSX 包裹在 [`<T>`](/docs/react/reference/components/t) 中，字符串通过 [`useGT`](/docs/react/reference/hooks/use-gt) 处理，或使用基于键的字典 |
| 是否翻译你的内容  | 否；`inlang machine translate` 借助社区服务、Google 或 DeepL 翻译                                  | 是，通过 [`npx gt translate`](/docs/cli/reference/commands/translate)                                                        |
| 翻译方能看到的内容 | 提供给所选翻译工具的消息内容                                                                         | 被标记的 JSX 块、开发者备注，以及已分配的词汇表和自定义提示词                                                                                        |
| 类型安全      | 为每个键和参数生成类型                                                                            | 内联 JSX，不存在拼错消息键的问题                                                                                                       |
| 应用包       | 按消息进行 tree-shaking                                                                     | 译文按区域设置加载                                                                                                                |
| 缺失翻译      | 回退到基础区域设置，并由 `inlang check` 报告                                                         | 由 [`npx gt translate`](/docs/cli/reference/commands/translate) 生成；未翻译的内容以源语言渲染                                           |
| 框架        | Vite 应用、React、Vue、Solid、SvelteKit、Astro、TanStack Start、React Router、Next.js (webpack)  | React、Next.js、Vue、Node.js 以及[更多 SDK](/docs/overview/get-started)                                                         |
| 费用        | 免费且开源                                                                                  | JavaScript 库免费；[翻译按用量计费](https://generaltranslation.com/pricing)                                                         |

如果你使用 SvelteKit、Astro 或 Solid 开发，最看重按消息 tree-shaking 和类型化的消息函数，或者团队已经自行编写或采购译文，那么继续使用 Paraglide JS 即可。如果你希望文案在组件中一目了然，并在每次构建时结合代码上下文生成所有语言的译文，请选择 General Translation。

## 逐个组件迁移到 General Translation

完全可以逐个组件进行迁移。Paraglide 的消息就是普通函数，无需提供者，因此在逐步转换路由的过程中，`m.*` 调用和 [`<T>`](/docs/react/reference/components/t) 块可以同时渲染、互不干扰。具体步骤请参阅[迁移国际化库](/docs/react/guides/migrating-i18n-libraries)，可从 [React 快速入门](/docs/react/react-quickstart)或 [Next.js 快速入门](/docs/react/nextjs-quickstart)开始。

## 要点总结

* Paraglide JS 会将消息目录编译为带类型、支持 tree-shaking 的函数；另有独立的 inlang 工具可为这些消息目录生成译文。
* General Translation 将文案内联在 [`<T>`](/docs/react/reference/components/t) 中，结合代码、词汇表和自定义提示词提供的上下文生成译文，并支持在仪表板中审阅。
* 在将组件逐步迁移到 General Translation 的过程中，Paraglide 现有的消息可以照常运行。每个迁移完成的组件都会在 JSX 中携带自身的源文本和翻译上下文。

## Related questions

- [General Translation 与 i18next、react-intl 和 next-intl 对比：应该选择哪个国际化库？](https://generaltranslation.com/zh/kb/general-translation-vs-i18n-libraries.mdx): i18next、react-intl 和 next-intl 等开源库本身并不翻译任何内容。它们只负责显示你在各语言目录文件中提供的译文，这些译文由你、你的译者或其他服务编写。General Translation 的库同样开源，承担同样的工作，此外 General Translation 还会以你的代码为上下文完成翻译。
- [General Translation 与 Intlayer：该选哪一个？](https://generaltranslation.com/zh/kb/general-translation-vs-intlayer.mdx): Intlayer 将每个组件的内容保存在组件旁的类型化声明文件中，所有语言并排编写，并可借助你配置的 AI 提供商补全缺失的语言。General Translation 则将文案以单一语言内联在组件中，并结合代码上下文生成其他语言的译文。
- [不用翻译文件也能做 i18n 吗？](https://generaltranslation.com/zh/kb/i18n-without-translation-files.mdx): 可以。使用 gt-react 或 gt-next 时，内容以内联方式直接写在组件中的 `<T>` 组件内，译文在构建时作为输出生成，因此无需编写键，也无需为每个区域设置编写 JSON 文件并保持同步。
- [如何在 React 中处理复数形式？](https://generaltranslation.com/zh/kb/how-to-handle-plurals-in-react.mdx): 不要用 n === 1 这类判断硬编码复数逻辑。如果应用只支持英语，一个简单的辅助函数就够用了；但多语言应用需要符合区域设置的复数规则，而 gt-react 或 gt-next 中的 `<Plural>` 等 i18n 组件能够为每种语言处理这些规则。
- [为什么选择 General Translation 而不是 TMS（Smartling、Lokalise、Phrase、Crowdin 或 Transifex）？](https://generaltranslation.com/zh/kb/general-translation-vs-tms.mdx): Smartling、Lokalise、Phrase、Crowdin 或 Transifex 等翻译管理系统（TMS）负责协调译员，但工程师仍需提取字符串、发送出去、等待译文，再把译文接回产品中。General Translation 结合上下文直接翻译代码中的内容，每次发布都同步交付所有语言，并基于开源库运行，不存在供应商锁定。

## Previous and next questions

- Previous question: [General Translation 与 nestjs-i18n：该选哪一个？](https://generaltranslation.com/zh/kb/general-translation-vs-nestjs-i18n.mdx)
- Next question: [General Translation 与 Rails I18n：两者都需要吗？](https://generaltranslation.com/zh/kb/general-translation-vs-rails-i18n.mdx)

## Sitemap

See the [Knowledge Base sitemap](https://generaltranslation.com/zh/kb/sitemap.md) for every article.