React 快速入门
使用 yarn 安装 glotstack
yarn install glotstack
将 glotstack 提供器添加到您的 React 应用
import * as React from 'react'
import { GlotstackProvider } from 'glotstack'

const importMethod = (locale: string) => {
  // 从静态目录 fetch(),以限制包体积,确保翻译文件保存在静态路径下
  return fetch(`/public/translations/${locale}.json`)
}
// // 或者实现内联 require 以支持内置翻译 —— 适用于不支持动态导入的环境
const translations: Record<string, () => Promise<Translations>> = {
  'en-US': () => require('@/translations/en-US.json'),
  'pl-PL': () => require('@/translations/pl-PL.json'),
  'fr-FR': () => require('@/translations/fr-FR.json'),
};

const importMethod2 = (locale: string) => {
  return translations[locale]();
}

const Application = () => {
  const locale = 'en-US' // replace with your locale source
  return (
    <GlotstackProvider initialLocale={locale} importMethod={importMethod}>
      {/*<YourComponent />*/}
    </GlotstackProvider>
  )
}
何时使用 fetch 或 import?
fetch() 从您托管的静态文件(如 CDN)获取内容,有助于保持包体积小,适合 Cloudflare Workers 等限制环境。fetch() 通常优于动态导入,若环境不支持动态导入,require() 是更稳妥的选择,但可能需要写更多样板代码。 对于小型应用或 react-native,建议使用 require() 将资源打包到宿主包中。
useGlotstack() 用于您的组件内部
import * as React from 'react'
import {useGlotstack} from 'glotstack'

function MyComponent() => {
  const {t} = useGlotstack()

  return (
    <div>
      {t('Quickstart.example', {assigns: {userName: 'JD'}})}
      {/* Icon can be a function reference or a node */}
      {t('Quickstart.example2', {assigns: {Icon: <Icon/>}})}
    </div>
  )
}
创建翻译源文件
您可以使用母语,Glotstack 默认以 en-US.json 作为基础。建议将其放在类似 ./translations/en-US.json 的位置。如果担心包体积,可以通过拆分并使用类似 ./public/translations/en-US.json 的公共文件来减小体积
全新推出
不喜欢编辑 JSON?
试试用 YAML 写翻译文件(我们就是这么做的!)使用 YAML 进行国际化
获取翻译
选项 1
:在项目中创建 .glotstack.json
您可以使用配置中提供的 API 密钥。前10次翻译免费,之后需注册。
运行 get-translations
yarn glotstack get-translations
敬请期待!通过 yarn glotstack live-translate 实现实时翻译
选项 2:
使用 CLI 获取翻译
export GLOTSTACK_API_KEY="Drl85MXtxgWsYq0PfWiSFAeFkCJRKpfe40pPoGKcyZ0D5HwfXwsk+xFq72uCGhvEnVV1rZdBUansecB3J+r5XA==" 
yarn glotstack get-translations --source-path "./translations" --project-id "first-project" pl-PL fr-FR
终端操作允许!但我们的选项可能经常更新, 维护配置的 codemod 比更新保存的命令更方便。
© 2026 Glotstack.ai。版权所有。
Glotstack 是面向 React 的开发者优先本地化工作流:管理 YAML/JSON 翻译,保持语言同步,借助 AI 工具快速发布新语言。