前端 i18n 最佳实践:在 React 中使用 i18next

发布一下 0 0
前端 i18n 最佳实践:在 React 中使用 i18next

前端 i18n 最佳实践:在 React 中使用 i18next

本合集文章,授权转载,侵权必究。

来源 : 代码与野兽


本文将会介绍 i18n 的业界最佳实践。

聊聊什么是 i18n?JavaScript 中的 i18n 基本概念

目前业界最流行的 i18n 方案都需要处理两个东西:

  • 资源文件
  • 路由

资源文件

i18n 这个问题在前后端未分离的时代就一直存在。

实现 i18n,可以分为后端 runtime 的策略和前端 runtime 的策略。

先讲一下后端 runtime 的策略。

比如在 JSP 和 PHP 模板引擎中就有大量基于这种策略实现的 i18n。

它会把网页中要显示的内容提前翻译成多种语言。

当用户请求网页时,由用户自己选择语言,或者在第一次用户没选择语言时使用服务端接收到的 accept-language 请求头字段来确定用户的语言。

之后去加载写死的模板字符串资源文件,去替换文本内容。

拿代码举个大概的例子。

这是原来没有做国际化的代码。

<div>这是一段简单的文本</div>

做完国际化后。

<div>{t('simpleContent')}</div>

其实就是提供了一个 t 函数(就是 translation 的缩写),它可以翻译文本。

资源文件可以是 JSON,或者是其他格式的文件,内容大概如下:

{  "en": {    "simpleContent": "Just simple content"  },  "zh": {    "simpleContent": "这是一段简单的文本"  }}

前端 runtime 的策略原理和上面的类似,就是提前定义一堆 JavaScript 对象,然后去动态获取它的值而已。

这么看来似乎前端 runtime 策略似乎更加简单,但在实际上几乎没有什么人会用这种方案,因为它有一个致命缺点,就是不支持 SEO。

国际化的目的本来就是服务更多的用户群体,考虑做国际化的站点,基本上也会考虑做 SEO。

路由

早期的网站很多都没有考虑路由的问题,所有国家的用户都访问同一个网站。但是当中国的用户分享了他老婆网址,他老婆精通中英双语,但是她老婆的浏览器默认是英语,对方想直接看到中文的内容,还需要手动切换语言,很麻烦。而且有些语言的书写和排列都和英语、汉语这类语言不一样,需要单独调整样式。

基于这些需求,现代的网站在做国际化时都喜欢区分路由,比如 web.dev 的网址,中文访问是这个地址:web.dev/i18n/zh/web…,英文访问是这个地址:web.dev/i18n/en/web…。

甚至还可以转发网址,比如中国用户访问 xxx.cn,美国用户访问 xxx.com。

最流行的 i18n 库

从 npm 周下载量上看,i18next 无疑是最流行的 i18n 库。

前端 i18n 最佳实践:在 React 中使用 i18next

i18next 之所以如此受欢迎,是因为 i18next 不仅仅是针对 React 或者某个框架而设计的,甚至都不是针对 Web 这个平台而设计的。它可以用在 Node.js、Deno、.NET、php、ruby、IOS、Android 等一系列平台上。

而且 i18next 也足够老,从 2011 年末就开源了,比 React、Vue 这些前端框架都要老,经过了很长时间的考验,基本上没有什么 i18n 领域的问题是它解决不了的。

在 React 中使用 i18next

为了更好的适配 React 这个框架,社区又基于 i18n 开发了 react-i18next 这个库。

接下来我会完成一个简单的案例,带大家快速学习 react-i18next。

基本用法

首先创建项目。

npx create-react-app react-i18n

然后安装 i18-next 的依赖项。

npm i i18next react-i18next i18next-browser-languagedetector复制代码
  • i18next 提供了翻译的基本能力。
  • react-i18next 是 i18next 的一个插件,用来降低 react 的使用成本。
  • i18next-browser-languagedetector 是用来检测浏览器语言的插件。

创建 i18n.js,具体的注释都在代码中。

import i18n from 'i18next';import { initReactI18next } from 'react-i18next';import LanguageDetector from 'i18next-browser-languagedetector';i18n  // 检测用户当前使用的语言  // 文档: https://github.com/i18next/i18next-browser-languageDetector  .use(LanguageDetector)  // 注入 react-i18next 实例  .use(initReactI18next)  // 初始化 i18next  // 配置参数的文档: https://www.i18next.com/overview/configuration-options  .init({    debug: true,    fallbackLng: 'en',    interpolation: {      escapeValue: false,    },    resources: {      en: {        translation: {          // 这里是我们的翻译文本        }      }    }  });export default i18n;

在 index.js 中导入 i18n.js。

import './i18n.js'

重新编写 App.js 中的内容。

import { useTranslation, Trans } from 'react-i18next';function App() {  const { t } = useTranslation();  return (    <div >      <main>        <p>          {t('welcome')}        </p>        <Trans i18nKey="author">          作者是: <code>{Date.now()}</code>        </Trans>      </main>    </div>  );}export default App;

其中使用到了 useTranslation 这个 Hooks,以及 Trans 这个组件。

useTranslation 返回的对象包含一个 t 方法,这个方法可以翻译文本。

Trans 可以翻译一个组件树。

打开浏览器,这时显示下面的内容:

前端 i18n 最佳实践:在 React 中使用 i18next

我们去 i18n.js 中添加翻译。

import i18n from 'i18next';import { initReactI18next } from 'react-i18next';import LanguageDetector from 'i18next-browser-languagedetector';i18n  // 检测用户当前使用的语言  // 文档: https://github.com/i18next/i18next-browser-languageDetector  .use(LanguageDetector)  // 注入 react-i18next 实例  .use(initReactI18next)  // 初始化 i18next  // 配置参数的文档: https://www.i18next.com/overview/configuration-options  .init({    debug: true,    fallbackLng: 'en',    interpolation: {      escapeValue: false,    },    resources: {      en: {        translation: {          // 这里是我们的翻译文本          welcome: 'Welcome to my website',          author: `Author is:<1>code and beast</1>`,        }      },      zh: {        translation: {          welcome: '欢迎来到我的网站',          author: `作者是:<1>代码与野兽</1>`,        }      }    }  });export default i18n;

现在显示正常了。

前端 i18n 最佳实践:在 React 中使用 i18next

接下来我们再来测试浏览器是英文的情况。

我用的是 Chrome 浏览器,其他浏览器操作步骤类似。

在浏览器设置中搜索 languages。

前端 i18n 最佳实践:在 React 中使用 i18next

点击 add languages,选择 English。

前端 i18n 最佳实践:在 React 中使用 i18next

然后需要 Move to the top,把 English 设置为首选语言。

前端 i18n 最佳实践:在 React 中使用 i18next

重启浏览器。

这时就被翻译成英语了。

前端 i18n 最佳实践:在 React 中使用 i18next

语言翻译器

接下来我们实现一个语言切换的功能。

import { useTranslation, Trans } from 'react-i18next';const lngs = {  en: { nativeName: 'English' },  zh: { nativeName: '中文' }};function App() {  const { t, i18n } = useTranslation();  return (    <div >      <header>        <select onChange={(evt) => {          i18n.changeLanguage(evt.target.value)        }}>          {Object.keys(lngs).map((lng) => (            <option key={lng} value={lng} label={lngs[lng].nativeName}              style={{ fontWeight: i18n.resolvedLanguage === lng ? 'bold' : 'normal' }} />          ))}        </select>      </header>      <main>        <p>          {t('welcome')}        </p>        <Trans i18nKey="author">          作者是: <code>{Date.now()}</code>        </Trans>      </main>    </div >  );}export default App;
前端 i18n 最佳实践:在 React 中使用 i18next

核心代码是 useTranslation 返回的 i18n.changeLanguage 方法,这个方法可以修改用户的当前语言。

不过 i18next-browser-languagedetector 会自动尝试检测浏览器的默认语言,我们可以把用户上次手动选择的语言存储到 localStorage 中,下次访问页面时使用上次存储的语言作为首选语言。

插值表达式

这时你可能会问了,当我们碰到要翻译的内容中存在变量时该怎么办?

i18next 提供了插值的用法。

我们在 t 函数中传递第二个参数,它是一个对象。

比如我们要显示当前时间。

首先安装 dayjs。

npm i day.js

添加一个元素。

<p>  {t('currentTime', { time: dayjs().format('MM/DD/YYYY') })}</p>

然后在 i18n.js 中添加翻译的文本。

{  resources: {      en: {        translation: {          // 这里是我们的翻译文本          welcome: 'Welcome to my website',          author: `Author is:<1>code and beast</1>`,          currentTime: 'Current time is {{time}}',        }      },      zh: {        translation: {          welcome: '欢迎来到我的网站',          author: `作者是:<1>代码与野兽</1>`,          currentTime: '当前时间是 {{time}}',        }      }    }}

插值表达式的语法是使用两个大花括号包裹属性名。

格式化

如果你想对插值进行格式化,比如中文的日期显示 2022-09-05,英文日期显示05/09/22。该怎么做呢?

i18next 提供了格式化的能力。

首先差值表达式支持第二个值,它是格式化器的名字。

{  resources: {  en: {    translation: {      // 这里是我们的翻译文本      welcome: 'Welcome to my website',      author: `Author is:<1>code and beast</1>`,      currentTime: 'Current time is {{time, DD/MM/YY}}',    }  },  zh: {    translation: {      welcome: '欢迎来到我的网站',      author: `作者是:<1>代码与野兽</1>`,      currentTime: '当前时间是 {{time, YYYY-MM-DD}}',    }  }}}

然后添加两个格式化器。

i18n.services.formatter.add('DD/MM/YY', (value, lng, options) => {  return dayjs(value).format('DD/MM/YY')});i18n.services.formatter.add('YYYY-MM-DD', (value, lng, options) => {  return dayjs(value).format('YYYY-MM-DD')});

这样就实现了插值文本的格式化。

除了上面介绍的用法外,i18next 还有更多的功能,比如语境、复数、命名空间等。这里就不多做介绍了,详细的内容可以参考 i18next 的文档。

将翻译文件与代码进行拆分

通常来说,翻译的工作不是程序员干的,而是有专业的业务团队去负责翻译,因为他们对业务术语等更加了解。

为了方便维护,我们可以选择使用 json 文件来作为保存翻译文本的资源文件。

首先需要安装一个库:i18next-http-backend。

npm install i18next-http-backend复制代码

然后修改 i18n.js 的内容,将这个插件用上,并且删除掉原来的 resources 字段。

import i18n from 'i18next';import { initReactI18next } from 'react-i18next';import LanguageDetector from 'i18next-browser-languagedetector';import dayjs from 'dayjs'import Backend from 'i18next-http-backend';i18n  .use(Backend)  // 检测用户当前使用的语言  // 文档: https://github.com/i18next/i18next-browser-languageDetector  .use(LanguageDetector)  // 注入 react-i18next 实例  .use(initReactI18next)  // 初始化 i18next  // 配置参数的文档: https://www.i18next.com/overview/configuration-options  .init({    debug: true,    fallbackLng: 'en',    interpolation: {      escapeValue: false,    },  });// new usagei18n.services.formatter.add('DD/MM/YY', (value, lng, options) => {  return dayjs(value).format('DD/MM/YY')});i18n.services.formatter.add('YYYY-MM-DD', (value, lng, options) => {  return dayjs(value).format('YYYY-MM-DD')});export default i18n;复制代码

然后在 public 下面创建 locales 目录,在这个目录下创建和语言缩写对应的文件夹,其中放置 translation.json 文件。这个命名是约定好的,backend 插件会去按照这个路径请求资源文件。

前端 i18n 最佳实践:在 React 中使用 i18next

翻译的内容和 resources 的内容一模一样。

比如 zh/translation.json 的内容如下:

{  "welcome": "欢迎来到我的网站",  "author": "作者是:<1>代码与野兽</1>",  "currentTime": "当前时间是 {{time, YYYY-MM-DD}}"}复制代码

但是这样会让资源文件以异步的方式进行请求,如果网络存在波动,那么有可能请求资源文件失败。

所以我们还要使用 Suspense 组件处理加载出错。

import { Suspense } from 'react';function App() {  // ...}export default function WrappedApp() {  return (    <Suspense fallback="loading">      <App />    </Suspense>  );}复制代码

locize 平台

i18next 有自己的翻译平台 locize.app/。

这个平台可以帮助我们整合翻译服务、追踪翻译的更改、版本、机器翻译等一系列功能,它会让我们管理翻译资源文件就像管理代码一样。

当我们的全球化业务非常庞大时,采用这个平台来处理 i18n 问题会更加轻松。

文中介绍的代码部分均为客户端 runtime 翻译,在更多的实际情况下我们会选择服务端 runtime 翻译,这时可能会使用 nextjs 这种 SSR 框架来处理 i18n。

#头条创作挑战赛#

版权声明:内容来源于互联网和用户投稿 如有侵权请联系删除

本文地址:http://0561fc.cn/198692.html