Preact i18next 集成

在构建国际化（i18n）应用时，选择合适的工具和库非常重要。i18next 是一个广泛使用的国际化框架，而 Preact 是一个轻量级的 React 替代品，它提供了类似的 API 和性能优化。本章将详细介绍如何在 Preact 应用程序中集成 i18next，从而实现多语言支持。

安装依赖

在开始之前，我们需要安装一些必要的库。首先，确保你已经创建了一个 Preact 项目。如果还没有，可以使用以下命令来初始化一个新的项目：

npm init -y
npm install preact

接下来，安装 i18next 及其相关插件：

npm install i18next i18next-http-backend i18next-browser-languagedetector react-i18next

这里我们使用了 i18next-http-backend 来从服务器加载翻译文件，并且使用了 i18next-browser-languagedetector 来自动检测浏览器的语言设置。react-i18next 是 i18next 的 React 绑定库，它允许我们在 React 组件中使用 i18next。

初始化 i18next

在你的项目中创建一个名为 i18n.js 的文件，用于配置 i18next：

// www.javascriptcn.com code example
// src/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import HttpBackend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(HttpBackend) // 使用 HttpBackend 加载翻译文件
  .use(LanguageDetector) // 自动检测浏览器的语言设置
  .use(initReactI18next) // 将 i18next 绑定到 React
  .init({
    fallbackLng: 'en', // 设置默认语言为英语
    debug: true, // 启用调试模式
    interpolation: {
      escapeValue: false, // 不需要对 HTML 片段进行转义
    },
  });

export default i18n;

在 Preact 应用中使用 i18next

接下来，我们需要在 Preact 应用中引入并使用 i18next。首先，在你的主入口文件（通常是 index.js 或 App.js）中导入刚刚创建的 i18n.js 文件：

// src/index.js
import { createRoot } from 'preact';
import App from './App';
import i18n from './i18n';

const root = createRoot(document.getElementById('app'));
root.render(<App />);

然后，在你的组件中使用 useTranslation 钩子来获取翻译函数：

// www.javascriptcn.com code example
// src/App.js
import { h } from 'preact';
import { useTranslation } from 'react-i18next';

function App() {
  const { t, i18n } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <button onClick={() => i18n.changeLanguage('zh')}>切换至中文</button>
      <button onClick={() => i18n.changeLanguage('en')}>Switch to English</button>
    </div>
  );
}

export default App;

在这个例子中，我们通过调用 t 函数来获取翻译文本，并且提供了一个按钮来切换语言。为了使这些翻译文本生效，你需要准备相应的 JSON 文件。

创建翻译文件

i18next 支持多种格式的翻译文件，最常见的是 JSON 格式。创建一个目录来存放你的翻译文件，例如 public/locales：

mkdir -p public/locales/en/public/locales/zh

然后，在每个语言文件夹中创建一个 translation.json 文件。例如，public/locales/en/translation.json 文件的内容如下：

{
  "welcome": "Welcome to our website!"
}

对于中文：

{
  "welcome": "欢迎来到我们的网站！"
}

最后，确保在你的 i18n.js 文件中正确配置了路径，以便 i18next 能够找到这些文件：

i18n.use(HttpBackend).init({
  backend: {
    loadPath: '/locales/{{lng}}/translation.json',
  },
  ...
});

结论

至此，我们已经完成了在 Preact 应用中集成 i18next 的过程。通过这一系列步骤，你可以轻松地为你的应用程序添加多语言支持。希望本章的内容对你有所帮助！

以上是关于 Preact 与 i18next 集成的一个详细教程。如果你有任何问题或需要进一步的帮助，请随时提问。