Internationalization

[16slowly]

背景

威爱通需要支持 zh-CN, en-US, zh-TW 三种语言，具体的需求是：

• 语言配置需要进入配置文件
• 通过在配置文件中重设 “locale” 配置项切换威爱通的显示语言（重启威爱通后生效）
• 对于不支持的语言（非 zh-CN, zh-TW, en-US 三种之外），威爱通将以 en-US 进行显示

I18n 难点

• 不同语种之间产生 UI 样式上的差异，比如文字上，英语长度可能比中文长。
• 不同地区的表达习惯不同。
• 信息展示习惯有地域性差异。

实现思路

准备资源

• 静态资源，固定词组的不同语言包。
• 动态资源，可通过 HTTP Request header 的 Accept-Languge 或 cookie 告知服务器所请求资源的语言类型。

实现策略

1. webpack I18nWebpackPlugin

'编译'过程中引入语言包，直接生成不同语种的 bundle.js 文件，由于启用了静态资源（hash）缓存策略, 该方案无法满足用户自由切换语言的需求。

2. react-intl

运行过程中引入语言包，用户切换语言时，通过 reload，重新注入切换后的语言包。

• babel-plugin-react-intl, 提取组件中的所有文本，方便进行 translate
• IntlProvider 组件，包裹应用的 APP 根节点，使得整个应用都处于 react-intl 上下文中，通过为该上下文配置语言（locale）,语种映射表（messages），达到在应用的任何一处都能访问到 lacale 及语种映射表。
• FormattedMessage 组件, 提供转换复杂文本（带有动态变化词组的文本）的能力，如方案二中的 formate 方法，需要转换的文本通过使用 id 访问 IntlProvider 配置的语种映射表。
• injectIntl 方法, 组件通过该方法的加持，将具备访问从根节点流入的 messages 及 locale 的能力。

3. 样式处理

see https://www.w3.org/International/techniques/authoring-html.en?open=style

• using language attributes，这个方法过于碎片化，极端情况下，每个节点都需要添加 lang, 不方便维护.
• 根据语言，准备不同的 .css 文件，动态引入.

4. 针对不同语言分别建站，适用于大型应用。

参阅

• https://survivejs.com/webpack/techniques/i18n/
• https://www.smashingmagazine.com/2017/01/internationalizing-react-apps/
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl