React项目中最全面多语言解决方案

行业方案调研

方案1：react-intl-universal

安装

    npm install i18next react-i18next --save

引入

import i18n from 'i18next';
import { useTranslation, initReactI18next } from 'react-i18next';

初始化

const lng = 'en';
i18n.use(initReactI18next)
  .init({
    resources: {
      en: {
        translation: {
          Welcome: 'Welcome to React',
        },
      },
      zh: {
        translation: {
          Welcome: '欢迎进入react',
        },
      },
    },
    lng: lng,
    fallbackLng: lng,

    interpolation: {
      escapeValue: false,
    },
  });

使用

function App() {
  const { transation} = useTranslation();
  return (
    <div className="App">
      <p>{t('Welcome')}</p>
    </div>
  );
}

export default App;

方案二：react-intl-universa

和方案一类同，具体可参考github

方案三： react-intl

今天也是重点说方案三是相关配置及实现，市面上也有很多集成方案，可以结合自身业务情况选择

在我的业务项目中，有英文，中文，繁体字三种切换，请看以下设计实现

1：多语言

本方案基于react-intl 和 antd 组件 LocaleProvider国际化方案

提供了多语言功能, 文案文件位于根目录的src/sonfig/language子目录中.

2：语言标识

使用 ISO-639 标准语言标识, 但是使用全小写字母, 使用横杠而不是下划线分割. 比如简体中文为zh-cn, 美式英文为en-us.

3：文案文件

react-intl目录中, 各个语言的文案文件以语言标识命名, 比如简体中文的文案文件为zh-cn.js. 另外language目录的入口为index.js, 如果你要增加一种语言的文案文件, 请在index.js增加相应的 import 代码.

// 导入的语言包
import zh from 'config/language/zh_CN';
import en from 'config/language/en_US';
import Config from 'config/Config';

export default {
  'zh-CN':zh,
  'en':en
}[Config.languageEnv];
// 具体的语言包文件
{
  "zh-cn": "简体中文",
  "en-us": "美式英语",
  "logout": "退出",
  "homepage": "主页",
  "404page": "未找到页面",
  "hello-world": "你好, 海尔.",
  "error-get-example-data-failed": "获取示例数据失败.",
  "error-login-failed": "登录失败.",
  "error-get-permission-data-failed": "获取权限数据失败."
}

4：描述

业务要求实现多语言展示诉求, 目前用中/英文/繁体切换来展示页面

5：简介

什么是多语言

      1：我们的系统可能将要在各个国家使用，每个国家的语言可能都会有差异

      2：我们要在界面显示上，适应各个语言区域的用户

      3：所以我们制定了一套流程来实现并规范这个过程

      4：基于现有前端架构，将多语言方案分为：

组件（antd，widget，tools）；

静态内容（label，接口提示）；

动态内容（接口）；

动态输入（表单输入）  

四个部分的内容互相解耦，独立操作。

 

6：适用范围

适用在react工程, 样式上依赖Bem+ css-modules

7：实现方案

利用react本身就可以加载reactDom元素的特征, 可以直接配置携带丰富样式的内容, 同时注 入页面样式对象, 根据语言类型引入特定的局部样式, 实现多语言下多样式组合的诉求, 引用实例 如下: 方案一：

import {IntlProvider, addLocaleData} from 'react-intl';

方案二：

import enUS from 'antd-mobile/lib/locale-provider/en_US';

1：widget下local文件作为全局入口

2：config/local/EN.JS&CN.js 分别维护内容包

3：路由名称手动在模块中判断加载语言类型

4：系统登录页 增加按钮--切换语言

方案一和方案二均依赖国际化i18n，在此次项目中使用方案一

 多语方案（提示语）通用模块构建

通过antd i18n 实现后端提示信息的多语言支持 ; 设计方案：在请求头添加自定义字段languageEnv

语言配置

异常码全部维护在数据库中

语言配置分四个层级, 优先级由高到低:

• 后端配置的强制语言
• 用户手动切换的语言
• 后端配置的默认语言
• 浏览器当前的语言

API异常码产生分类：

应用自身的异常码

各应用中心的异常码

系统基础架构的异常码

---

实现步骤

1：ant-design组件

2：widget组件，

3：业务代码，

4：接口数据

第一步：配置语言包，在config/language/文件夹下准备语言包

第二步：修改配置文件Config.js中的languageEnv的值为localStorage.getItem('languageEnv') || 'zh-CN'

第三步：ant-design组件通过

LocaleProvider 使用 React 的 context 特性，只需在应用外围包裹一次即可全局生效。

import enUS from 'antd/lib/locale-provider/en_US';
return <LocaleProvider locale={enUS}><App /></LocaleProvider>;

第四步：业务组件widget的多语言处理，在用到widget组件的页面或者index.js总入口中加入下面代码

import { WidgetConfig } from 'widget'

if (localStorage.getItem('languageEnv') === 'en') {
  WidgetConfig.set({ languageEnv: 'enUS' })
} else {
  WidgetConfig.set({ languageEnv: 'zhCN' })
}

第五步：业务代码模块，通过react-intl库实现多语言

1，项目根目录，入口index.js 中加入下面代码

import { IntlProvider, addLocaleData } from 'react-intl';
import enLocaleData from 'react-intl/locale-data/zh'

addLocaleData(enLocaleData)

<IntlProvider locale={localStorage.getItem('languageEnv') || 'zh-CN'} messages={staticLabelLanguage}>
      <Provider {...stores}>
        <App />
      </Provider>
 </IntlProvider>

2，在页面中的使用，通过injectIntl注入locale和messages，messages就是语言包, FormattedMessage是react-intl自带的组件，用于渲染文本内容

import { FormattedMessage, injectIntl } from 'react-intl';

const { messages } = this.props.intl

messsages['sy.account.login']

<FormattedMessage id="sy.account.login" />

第六步：在request.js中的请求头里加入languageEnv字段

if (!headers["languageEnv"]) {
      headers["languageEnv"] = localStorage.getItem('languageEnv') || ''
    }

第七步：首界面或登录界面添加切换方法

效果：

如后续业务中增加其他语言，可以使用插件： language-translate 批处理翻译，具体请参考github配置

下次计划将单元测试实战讲解，如快照测试等

webpack5.X优化：www.yuque.com/lufeilizhix…

Jest+Enzyme: www.yuque.com/lufeilizhix…

各位客官，点个赞吧！对内容感兴趣可加个关注，感谢！