系列

说明

1、React项目做的国际化需求，相关关注点整理，业务代码包括js、css、ts文件中不允许直接写中文

2、改变语言可刷新页面，或者只刷新组件，一般大的项目刷新页面更有效

3、要注意判断国际化配置文件是否响应式，如不是响应式，那么配置文件要先加载才能渲染页面

4、国际化配置文件一般比较大，几百K到几M之间，要懒加载分片处理

5、一般重复率都是比较高的，重复三次的要提到公共配置文件中

定义

International Code （国际化Code）= Route Code（路由Code） + Ukey

国际化Code 命名规范

1、国际化Code由文件路由和Ukey组成

2、国际化配置文件放在 src/locales 目录下，当前有 en 存放英文 , zh-CN 存放中文

3、文件名采用路由命名，pages业务较多可多拆分一级，其他业务较少就直接一个json配置文件即可

4、除 themes 路由，其他文件中，同一个中文用三次就要提到 common.json 中

5、如 themes 经过webpack多入口，需要单独一个themes配置文件，减少首屏请求文件大小

Ukey命名规范

1、Ukey使用英文拼接，大驼峰命名，比如DotNumberCount

2、5个单词内，拼接英文单词组成Ukey，首字母大写

3、中文翻译成英文后，超过5个单词的句子，取前5个单词组成Ukey，首字母大写

4、如Ukey重复，可适当加数字后缀，或增加单词字母

引入react-intl-universal

1、能组件内调用

2、能js文件中调用

1、在文件头引入  import intl from "react-intl-universal"; 

2、使用get方法，参数为国际化Code   
    intl.get("pages.forgetPassword.GetVerificationCode")
    可以传参
    { "HELLO": "Hello, {name}. Welcome to {where}!" }
    intl.get('HELLO', { name: 'Tony', where: 'Alibaba' }) // "Hello, Tony. Welcome to Alibaba!"

第三方库支持国际化

1、项目中使用的三方库，可能并不支持国际化，那需要改造

2、目前常用的 element、antd 等都支持国际化，具体库要具体考虑

图片处理组件IMGC

考虑两点：

1、图片来自项目中且文字固定在图片中，因webpack是只打包项目中使用到图片，所以项目中所有内部图片且存在国际化需求的需要直接引入，根据当前语言切换

2、图片来自项目中，但是文字不固定在图片中，可根据语言，动态生成文字，只需维护好配置文件

3、图片来自与接口的外部地址，那OSS上需要准备上不同语言图片，一种是后端根据语言传不同图片地址，另一种是前端根据语言拼接图片地址，如带上语言en之类后缀

可参考：

1、IMGC 组件的src属性只传中文图片 ，options参数 增加 isLocale 属性，默认false，当传true时，图片会根据当前语言请求对应图片

2、图片命名规范，放到同目录下，会自动在图片地址前增加语言前缀

js判断语言

导入currentLanguage判断当前语言


//获取当前语言字符串
import { currentLanguage } from '@/utils/locale';

// urrentLanguage 值是LAN_ENUM枚举值
import { LAN_ENUM } from '@/utils/locale';

// LAN_ENUM 是枚举值
const LAN_ENUM = {
    ZHCN: 'zh-CN',
    EN: 'en',
}

// 断当前语言
if( currentLanguage == LAN_ENUM.ZHCN){
    // 执行中文逻辑  your chinese code
}
else if( currentLanguage == LAN_ENUM.EN){
    // 执行英文逻辑  your english code
}

js判断className

用getLanClassName不同语言使用不同className

// 导入LAN_ENUM 和 getLanClassName 
import { LAN_ENUM,getLanClassName } from '@/utils/locale';

// getLanClassName 传入 LAN_ENUM 字典对象
<Tooltip>
    <span className={getLanClassName({
      [LAN_ENUM.ZHCN]:styles.lanBarForChinese,
      [LAN_ENUM.EN]:styles.lanBarForEnglish,
    })}>
      <img src={dataLanguage?.icon} />
      <span>{dataLanguage?.text}</span>
    </span>
</Tooltip>

css中写不同语言环境代码

在根 html 标签上增加了 lang 属性，可用于css区分不用环境

一般不用语言的css初始化样式是不同的，需要加载不同css初始化文件

// css文件中不同语言
.lanDrop{
  .lanDropItem{
     background: white;
  }
}

// 增加English标签 
html[lang=en]{
  .lanDrop{
    .lanDropItem{
      background: red;
    }
  }
}

// html引入className
<div className={styles.lanDrop}>
	<span className={styles.lanDropItem}>Hello</span>
</div>

// reset.css 用于不同语言样式初始化 
html body{
  font-size: 20px;
}
html[lang=en] body{
  font-size: 20px;
}

css中伪元素content包含中文的的处理

1、一种是每种语言写一个content，用css的[lang=en]区分

2、弃用伪元素的content，改为组件写法

vscode插件自动提示

1、预先安装 Power Tools 插件，用于可快速开发vscode插件

2、鼠标 Hover 放到国际化key上面，不需要选中，就会看到对应中英原文，点击图标可跳转到配置文件位置，后面会具体讲解开发过程，项目实战 - 国际化之基于Power Tools开发vscode代码提示插件

Ukey 采用抽象语法树（AST）替换中文，如库recast

项目中大概有2万处需要被替换，人工耗时耗力，采用AST自动处理，然后英文纠错快速处理，过程如下：

1、AST 匹配处中文，输出到txt文件中，并记录对应文件，行，列等信息

2、复制txt到百度或谷歌excel中，自动翻译出英文，于是就有了中英对照文档

3、用英文翻译，根据上述UKey规则，生成中文的UKey

4、根据中文和UKey的对照文档，替换源代码文件中响应的中文如intl.get("pages.forgetPassword.GetVerificationCode")

5、剩余组织人力，纠错即可，后面会具体讲解开发过程，项目实战 - 国际化之AST提取中文

项目实战 - 国际化之规范

系列

说明

定义