schummar-translate开源项目教程

1. 项目介绍

schummar-translate 是一个使用 TypeScript 编写的翻译库，适用于 React 和 Node.js 环境。它能够为翻译键和 ICU 格式的参数提供类型检查和自动完成/智能感知功能。这个库的目的是为了简化多语言应用的开发流程，同时保证类型安全。

2. 项目快速启动

在开始之前，请确保您的开发环境中已经安装了 Node.js。

安装

首先，您需要通过 npm 安装 schummar-translate：

npm install schummar-translate

创建翻译文件

接下来，创建您的翻译文件，例如 en.ts：

// en.ts
export default {
  welcomeMessage: 'Hi, {name}',
  currentTime: 'It is now {time, time, short}',
} as const;

创建翻译实例

在您的项目中创建一个翻译实例：

// translate.ts
import { createTranslator } from 'schummar-translate/react';
import en from './en.ts';

export const {
  t,
  useTranslator,
  getTranslator
} = createTranslator({
  sourceDictionary: en,
  sourceLocale: 'en'
});

在应用中使用

您可以在应用的任何地方使用 t 函数来显示翻译文本：

import { t } from './translate';

export function App() {
  const [locale, setLocale] = useState('en');
  
  const toggleLocale = () => {
    setLocale(locale === 'en' ? 'de' : 'en');
  };

  return (
    <TranslationContextProvider locale={locale}>
      <div onClick={toggleLocale}>
        {t('welcomeMessage', { name: 'schummar' })}
      </div>
    </TranslationContextProvider>
  );
}

3. 应用案例和最佳实践

国际化上下文提供者

使用 TranslationContextProvider 来包裹应用的组件树，以便在整个应用中共享翻译上下文。

import { TranslationContextProvider } from 'schummar-translate/react';

<TranslationContextProvider locale={locale}>
  {/* 应用组件 */}
</TranslationContextProvider>

动态加载语言包

如果您的应用支持多种语言，您可以通过动态导入来懒加载语言包：

dicts: (locale: string) => import(`./langs/${locale}`).then(mod => mod.default)

使用 ICU 格式化

schummar-translate 支持 ICU 格式的字符串，允许您进行复杂的文本替换，例如日期、时间和数值格式化。

export default {
  currentTime: 'It is now {time, time, medium}'
} as const;

4. 典型生态项目

由于 schummar-translate 是一个翻译库，它通常与以下类型的开源项目配合使用：

• 国际化框架：如 i18next、react-intl 等。
• 前端框架：React、Vue、Angular 等现代前端框架。
• 服务器端渲染：如 Next.js、Nuxt.js 等。
• 服务器端框架：Express、Koa 等 Node.js 框架。

通过结合这些项目，您可以构建具有完整国际化支持的应用程序。