yarn
安装 glotstackyarn install glotstack
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()
从您托管的静态文件(如 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>
)
}
en-US.json
作为基础。建议将其放在类似 ./translations/en-US.json
的位置。如果担心包体积,可以通过拆分并使用类似 ./public/translations/en-US.json
的公共文件来减小体积.glotstack.json
get-translations
yarn glotstack get-translations
yarn glotstack live-translate
实现实时翻译export GLOTSTACK_API_KEY="Drl85MXtxgWsYq0PfWiSFAeFkCJRKpfe40pPoGKcyZ0D5HwfXwsk+xFq72uCGhvEnVV1rZdBUansecB3J+r5XA=="
yarn glotstack get-translations --source-path "./translations" --project-id "first-project" pl-PL fr-FR